Spring Boot实训开发个人博客4

最新推荐文章于 2023-02-19 18:52:41 发布
最新推荐文章于 2023-02-19 18:52:41 发布
阅读量177 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbj5063/article/details/117918829
版权

文章目录

一、页面设计与开发

接上一讲

（七）博客管理列表页 - 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

lbj5063
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring boot 搭建个人博客系统（四）——文章的发布和分页显示
tuzhenyu的博客
08-21 7700
Spring boot 搭建个人博客系统（四）——文章的发布和分页显示 一直想用Spring boot 搭建一个属于自己的博客系统，刚好前段时间学习了叶神的牛客项目课受益匪浅，乘热打铁也主要是学习，好让自己熟悉这类项目开发的基本流程。系统采用Spring boot+MyBatis+MySQL的框架进行项目开发。 项目源码：Jblog 个人主页：tuzhenyu’s page
《Spring Boot2.0项目开发综合实训》指导手册v1.0.pdf
09-05
采用Spring Boot2.0框架结合Jquery和Bootstrap前端技术项目来实现通用授权模块，面向实训教学
Spring boot实训 个人博客系统四 归档页
aqaerw的博客
07-05 180
1.新建文件archives.html 2.将头部代码复制过来,将头部文件生成: 2.在index添加活动显示页面: 3.修改头部名称为归档: 4.编写中间主内容: <div class="ui fluid vertical menu"> <a href="#" target="_blank" class="item"> <span>
Spring boot开源项目之个人博客（4）—搭建页面首页（3）
qq369392973的博客
08-27 213
Spring boot开源项目之个人博客（4）—搭建页面首页（3） 首页的最后一部分就是让它能与手机屏幕适配，在Semantic中也有相应的方法。 第一个用到的是stackable，这是一个可以应用于menu和grid等标签的class，效果是当屏幕宽度变窄时，自动将元素向下堆叠，以导航栏来说，我们希望达到以下效果： 之前做好的导航栏是这样的： 到了手机端时，把菜单栏隐藏起来，加一个按钮，点击则显示被隐藏的菜单栏： 当点击右上方的按钮时，菜单栏被隐藏/显示。这部分的实现主要是由写css完成的。首先给me
SpringBoot开发一个小而美的个人博客（六）博客管理
舒克、舒克的博客
03-03 921
博客管理分两个页面，一个编辑博客页面，一个列表展示页面。 编辑博客页面 整个页面分为几个模块，分别是选择博客创造类型是原创还是转载，博客内容，博客分类及标签，博客描述，博客图片地址（目前没有支持本地文件上传，并且只能选择一张作为展示图，博客内容中可以有多张图片），是否打开推荐/转载声明/赞赏/留言功能，保存草稿还是直接发布。 前端核心代码 HTML代码 <div class="m-container-big m-padded-tn-big"> <div cl
Springboot搭建个人博客网站过程记录（四）
Weleness的博客
01-27 4657
SpringBoot搭建个人博客过程记录（四）文章评论功能的实现前端代码的实现后台代码效果展示评论中回复的实现前台代码后端代码效果图 文章评论功能的实现 前端代码的实现 思路：数据库绑定文章的id，用户的id和评论的id，需要的时候就根据文章的id去查评论，评论id去查用户去联查就好了，用户和评论的关系是一对多的关系。即一个用户有多条评论，但一条评论只能属于一个用户。 实现：发布发布评论按钮...
spring-boot项目实践总结
02-05
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是简化新Spring应用程序的初始构建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种
《Spring Boot2.0项目开发综合实训》指导手册v1.0
09-06
《Spring Boot2.0项目开发综合实训》指导手册v1.0是一本专注于Java开发者学习Spring Boot 2.0框架的实战教程。该手册详细介绍了如何利用Spring Boot 2.0进行高效、便捷的Web应用开发，涵盖了从基础概念到高级特性的...
SpringBoot完整项目-个人博客
03-08
【SpringBoot完整项目-个人博客】是一个基于SpringBoot框架构建的个人博客系统，它提供了详细的实现，可以帮助开发者理解和学习如何运用SpringBoot来开发实际的Web应用程序。该项目的主要特点包括使用MySQL作为后台...
毕设&课设&项目&实训-基于Spring Boot、AdminLTE3、JqGrid 的RIREE交互系统.zip
01-26
基于Spring Boot、Mybatis、MySQL、Lombok、Web Bluetooth API、Thymeleaf、AdminLTE3、JqGrid 的RIREE交互系统 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一...
基于SpringBoot的个人博客系统设计与实现
毕业作品网站
09-02 6362
管理员可以对博客进行添加，删除，修改，查询操作。普通访客可以查看所有的博客，所有的分类，所有的标签，可以评论博客，可以查询博客，可以打赏管理员。管理员可以对博客进行添加，删除，修改，查询操作。个人博客系统是部署在云上的web项目，只要登录浏览器就可以访问，况且本系统跟很多博客系统类似。前端方面：核心框架为SemanticUi，基础为html，css，js，jq。首页:博客分页列表，展示Top标签，展示Top分类，最新博客推荐，博客详情。博客管理:发布博客，修改博客，删除博客，查询博客。
Springboot搭建个人博客系列
sanmi8276的博客
11-11 4335
要搭建博客系统，首先要做的就是搭建一个数据库。 我们选择的数据库是MySQL5.7，安装教程请自行百度。 数据库建模工具是PowerDesigner16.6，下载及安装教程也请自行百度。 既然是简单的博客系统，我只简单的建立了几张必要的表（为了保持系统简洁，og表什么暂时不添加了，后期需要再添加），分别为: sys_user:系统用户表 t_article:文章表 t_content:文章内容表 t_comment:文章评论表 t_category:文章分类表 数据库结构见下图 SQ
SpringBoot个人博客项目搭建—前端页面功能介绍（一）
清峰的博客
10-10 6516
SpringBoot个人博客—前端页面功能介绍（一） 一、前端框架Semantic UI Semintic UI官网：https://semantic-ui.com/ 前端页面主要采用了Semantic前端开发框架对页面骨架进行快速搭建。 Semantic作为一款开发框架，能够帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局更加快速设计出漂亮的网站。具体使用细节可以访问官网查看官方文档。 Semintic UI提供了一系列第三方组件和模板供我们使用，使我们可以更加方便、快捷的搭建出前端模板。
SpringBoot实战——个人博客项目
热门推荐
日常学习记录、分享，愿我们都遇见更好的自己，与诸君共勉
02-19 1万+
springboot实战，从零开始搭建一个web个人博客项目(持续更新中）
Spring boot个人博客【博客详细页面】---学习03
uoprewqsnh的博客
06-04 174
文章目录一、思维导图二、个人博客1、创建博客详情页面 一、思维导图 二、个人博客 接到上一讲写 1、创建博客详情页面 rounded 图片的圆角 circular 按钮的圆角
网站美化：网站底部右侧悬浮菜单，客服菜单，一键联系配置教程
sinzen的博客
08-09 3512
以wordpress举例 操作步骤： 1，代码共分为两部分，一部分是css，css部分建议加到主题的style.css里面！ 另一部分是html代码，加到可以加到主题文件夹下footer.php里面，至于里面的位置放到前面，如果主题后台有统计代码配置，可和统计代码放一起。 html代码 <!--底部悬浮菜单--> <div class="elevator_i...
【中科院1区】Matlab实现天鹰优化算法AO-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
汽车行业数字化转型报告顶层规划设计.docx
08-02
汽车行业数字化转型报告顶层规划设计.docx
毕业设计，基于ASP.NET+SqlServer开发的企业投资价值分析系统，内含完整源代码，数据库，毕业论文
08-02
毕业设计，基于ASP.NET+SqlServer开发的企业投资价值分析系统，内含完整源代码，数据库，毕业论文 自中国证券市场产生以来，投资者进行投资理财迫切需要有一个科学的理论依据，在众多投资理论体系中，确定企业的价值和股票的价值，是一个重要的流派。著名的投资专家巴非特就是通过分析企业的内在价值，寻找价值被低估的股票，等到市场认可了该企业的价值，再将股票抛出，从而获得了的投机收益，其管理的基金也一度成为世界上最成功的投资基金之一。从西方国家理论界对相关领域的研究结果来看，也取得了一些成果，包括：CAPM 模型、 ICAPM模型、APT模型等，也有人用市盈率方法对股票进行定价。国内在相关的领域也取得了一些研究成果。然而，尽管国内外理论界研究成果较多，但真正适应中国证券市场、适应中国广大投资者的切实有效的理论至今仍是一个空白。在中国这样一个特殊的背景下，股权结构的特殊性、证券市场初创时期的投资性等因素，使得一些模型受到挑战，而且这些模型的精确化程度也受到限制，有必要探求新的思路和方法，为广大的投资者提供切实可靠的操作依据。对股票的价值进行评估必须综合尽可能全面的因素才能使得这些评估更加科
Spring Boot2.0实战：通用授权模块开发教程
"《Spring Boot2.0项目开发综合实训》指导手册V1.0，是一本面向实训教学的书籍，旨在通过Spring Boot2.0框架结合Jquery和Bootstrap前端技术，教授如何实现通用授权模块。作者GJQ，出版于2019年8月，福建江夏学院电子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值