一、页面设计与开发

接上一讲

（七）博客管理列表页 - blogs.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客管理</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><link rel="stylesheet" href="../static/css/me.css">
</head>
<body><!--导航--><nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small"><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>博客</a><a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a><a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a><div class="right m-item m-mobile-hide menu"><div class="ui dropdown item"><div class="text"><img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">袁晓晓</div><i class="dropdown icon"></i><div class="menu"><a href="#" class="item">注册</a></div></div></div></div></div><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><div class="ui attached pointing menu"><div class="ui container"><div class="right menu"><a href="#" class="item">发布</a><a href="#" class="teal active item">列表</a></div></div></div><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><form action="#" method="post" class="ui segment form"><div class="inline fields"><div class="field"><input type="text" name="title" placeholder="标题"></div><div class="field"><div class="ui selection dropdown"><input type="hidden" name="type"><i class="dropdown icon"></i><div class="default text">分类</div><div class="menu"><div class="item" data-value="1">错误日志</div><div class="item" data-value="2">开发者手册</div></div></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="recommend" name="recommend"><label for="recommend">推荐</label></div></div><div class="field"><button class="ui mini teal basic button"><i class="search icon"></i>搜索</button></div></div></form><table class="ui celled table"><thead><tr><th></th><th>标题</th><th>类型</th><th>推荐</th><th>更新时间</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>刻意练习清单</td><td>认知升级</td><td>是</td><td>2021-06-09 15:47</td><td><a href="#" class="ui mini teal basic button">编辑</a><a href="#" class="ui mini red basic button">删除</a></td></tr></tbody><tfoot><tr><th colspan="6"><div class="ui mini pagination menu"><a class="item">上一页</a><a class="item">下一页</a></div><a href="#" class="ui mini right floated teal basic button">新增</a></th></tr></tfoot></table></div></div><br><br><!--底部footer--><footer class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事（User Story）</a><a href="#" class="item">用户故事（User Story）</a><a href="#" class="item">用户故事（User Story）</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email: listen@169.com</a><a href="#" class="item">QQ: 2293432330</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">Lirenmi</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright@2019-2022Lirenml Designed by Lirenmi</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('.ui.dropdown').dropdown({on : 'hover'});</script>
</body>
</html>

运行页面

（八）博客发布页 - blogs-input.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客发布</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><link rel="stylesheet" href="../static/css/me.css">
</head>
<body><!--导航--><nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small"><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>博客</a><a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a><a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a><div class="right m-item m-mobile-hide menu"><div class="ui dropdown item"><div class="text"><img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">袁晓晓</div><i class="dropdown icon"></i><div class="menu"><a href="#" class="item">注册</a></div></div></div></div></div><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><div class="ui attached pointing menu"><div class="ui container"><div class="right menu"><a href="#" class="teal active item">发布</a><a href="#" class="item">列表</a></div></div></div><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><form action="#" method="post" class="ui form"><div class="required field"><div class="ui left labeled input"><div class="ui selection compact teal basic dropdown label"><input type="hidden" value="原创"><i class="dropdown icon"></i><div class="text">原创</div><div class="menu"><div class="item" data-value="原创">原创</div><div class="item" data-value="转载">转载</div><div class="item" data-value="翻译">翻译</div></div></div><input type="text" name="title" placeholder="标题"></div></div><div class="field"><textarea placeholder="博客内容" name="content"></textarea></div><div class="two fields"><div class="field"><div class="ui left labeled action input"><label class="ui compact teal basic label">分类</label><div class="ui fluid selection dropdown"><input type="hidden" name="type"><i class="dropdown icon"></i><div class="default text">分类</div><div class="menu"><div class="item" data-value="1">错误日志</div><div class="item" data-value="2">开发者手册</div></div></div></div></div><div class="field"><div class="ui left labeled action input"><label class="ui compact teal basic label">标签</label><div class="ui fluid selection multiple search dropdown"><input type="hidden" name="tag"><i class="dropdown icon"></i><div class="default text">标签</div><div class="menu"><div class="item" data-value="1">java</div><div class="item" data-value="2">javaScript</div></div></div></div></div></div><div class="field"><div class="ui left labeled input"><label class="ui teal basic label">首图</label><input type="text" name="indexPicture" placeholder="首图引用地址"></div></div><div class="inline fields"><div class="field"><div class="ui checkbox"><input type="checkbox" id="recommend" name="recommend" checked class="hidden"><label for="recommend">推荐</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="shareInfo" name="shareInfo" class="hidden"><label for="shareInfo">转载声明</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="appreciation" name="appreciation" class="hidden"><label for="appreciation">赞赏</label></div></div><div class="field"><div class="ui checkbox"><input type="checkbox" id="comment" name="comment" class="hidden"><label for="comment">评论</label></div></div></div><div class="ui mini error message"></div><div class="ui right aligned container"><button type="button" class="ui button" onclick="window.history.go(-1)">返回</button><button class="ui secondary button">保存</button><button class="ui teal button">发布</button></div></form></div></div><br><br><!--底部footer--><footer class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事（User Story）</a><a href="#" class="item">用户故事（User Story）</a><a href="#" class="item">用户故事（User Story）</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email: listen@169.com</a><a href="#" class="item">QQ: 2293432330</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">Lirenmi</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright@2019-2022Lirenml Designed by Lirenmi</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('.ui.dropdown').dropdown({on : 'hover'});$('.ui.form').form({fields : {title: {identifier : 'title',rules : [{type :'empty',prompt : '标题：请输入博客标题'}]}}});</script>
</body>
</html>

运行页面

二、页面插件集成

（一）插件集成

编辑器 Markdown
内容排版 typo.css
动画 animate.css
代码亮亮 prism
目录生成 Tocbot
滚动侦测 waypoints
平滑滚动 jquery.scrollTo
二维码生成 qrcode.js

Spring Boot实训开发个人博客4相关推荐

Spring boot实训开发个人博客（二）详情页
Spring boot实训开发个人博客(二)详情页 1.在index页面添加归档: 2.开始写详情页: 1.头部文件: 2.添加文章内容 <h2 class="ui center al ...
Spring Boot实训开发个人博客13 -博客详情
文章目录一.博客详情页面二.修改IndexController 三.在Blog.html页面添加获取数据四.页面查看五.Markdown 转换 HTML (一)添加依赖 (二)编写工具类 (三 ...
Spring boot开源项目之个人博客（12）—分类（标签）管理
Spring boot开源项目之个人博客(12)-分类(标签)管理分类.标签管理功能高度重合,就只记录分类管理.分类管理主要涉及到了增删查改和前端分页展示的功能,还有一些零碎的非空验证.重复验证等. ...
Spring boot开源项目之个人博客（11）—登录功能实现
Spring boot开源项目之个人博客(11)-登录功能实现这部分就把一下重要的点记录一下. 前端表单非空验证 <script>$('.ui.form').form({fields:{ ...
Python实训-15天-博客汇总表
目录 1.课程安排 1.1.课程介绍 1.2.课程目标 2.课件 2.1.课件and录屏 2.2.练习and案例and作业 3.实训博客笔记第1周-week1 day01 day02 day03 d ...
Spring Boot干货系列：（十二）Spring Boot使用单元测试 | 嘟嘟独立博客
原文地址 2017-12-28 开启阅读模式 Spring Boot干货系列:(十二)Spring Boot使用单元测试 Spring Boot干货系列 Spring Boot 前言这次来介绍下Sp ...
Spring Boot + vue-element 开发个人博客项目实战教程（四、数据库搭建和配置）
前言 java项目已经创建好了,接下来我们要准备数据库了,数据库是干嘛的相信大家都知道了,我在这就不说了,我们需要做的就是在电脑上安装mysql数据库. 附菜鸟教程的MySQL基础学习教程:https ...
Spring Boot + vue-element 开发个人博客项目实战教程（二十五、项目完善及扩展(前端部分)）
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 ⭐我的文档网站:http://xyhwh- ...
Spring Boot + vue-element 开发个人博客项目实战教程（十三、文章标签功能实现）
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统项目部署视频 https://www.bi ...
Spring Boot + vue-element 开发个人博客项目实战教程（一、项目介绍和规划）
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 ⭐我的文档网站:http://xyhwh- ...

Spring Boot实训开发个人博客4

文章目录

一、页面设计与开发

（七）博客管理列表页 - blogs.html

（八）博客发布页 - blogs-input.html

二、页面插件集成

（一）插件集成

Spring Boot实训开发个人博客4相关推荐

最新文章

热门文章