當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Spring Boot实训开发个人博客4
生活随笔
收集整理的這篇文章主要介紹了
Spring Boot实训开发个人博客4
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、頁面設計與開發
- （七）博客管理列表頁 - blogs.html
- （八）博客發布頁 - blogs-input.html
- 二、頁面插件集成
- （一）插件集成
一、頁面設計與開發
接上一講
（七）博客管理列表頁 - 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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle删除表结构或者表数据
- 下一篇： CUBA使用Spring查询接口