Spring boot开发小而美的个人博客

最新推荐文章于 2022-08-31 21:04:17 发布
最新推荐文章于 2022-08-31 21:04:17 发布
阅读量270 收藏
点赞数
分类专栏： Spring Boot框架笔记 实训项目 文章标签： spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_1725046289/article/details/117409702
版权

1、功能

在这里插入图片描述

2、页面设计与开发

2.1设计

前端展示：首页、详情页、分类、标签、归档、关于我
后台管理：模板页

2.2页面开发

创建blog
在blog里创建static文件夹，在static里面创建css、images、js文件夹
在这里插入图片描述
创建index.html文件
在这里插入图片描述

页面头部加底部

在这里插入图片描述

创建me.css文件
在这里插入图片描述
在这里插入图片描述
加入图标样式
在这里插入图片描述
加入搜索框
在这里插入图片描述
编写底部内容
在这里插入图片描述
底部css
在这里插入图片描述

页面中间内容

左边博客列表
在这里插入图片描述
右边的top

在这里插入图片描述
手机端
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
css

body{
   
    background: url("../images/bg.png");
}
.m-padded-mini{
   
     padding: 0.2em !important;
}
.m-padded-tiny{
   
    padding: 0.3em !important;
}
.m-padded-tb-mini{
   
    padding-top: 0.2em !important;
    padding-bottom:0.2em !important;
}
.m-padded-tb-tiny{
   
    padding-top: 0.3em !important;
    padding-bottom:0.3em !important;
}
.m-padded-tb-small{
   
    padding-top: 0.5em !important;
    padding-bottom:0.5em !important;
}
.m-padded-tb{
   
    padding-top: 1em !important;
    padding-bottom:1em !important;
}
.m-padded-tb-large{
   
    padding-top: 2em !important;
    padding-bottom:2em !important;
}
.m-padded-tb-big{
   
    padding-top: 3em !important;
    padding-bottom:3em !important;
}
.m-padded-tb-huge{
   
    padding-top: 4em !important;
    padding-bottom:4em !important;
}
.m-padded-tb-massive{
   
    padding-top: 5em !important;
    padding-bottom:5em !important;
}


/*-----text-----*/
.m-text{
   
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}
.m-text-thin{
   
    font-weight: 300 !important;
}
.m-text-spaced{
   
    letter-spacing: 1px !important;
}
.m-text-lined{
   
    line-height: 1.8;
}

/*-----margin-----*/
.m-margin-top-small{
   
    margin-top: 0.5em !important;

}
.m-margin-top{
   
    margin-top: 1em !important;

}
.m-margin-top-large{
   
    margin-top: 2em !important;

}
.m-margin-tb-tiny{
   
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}

/*-----opacity-----*/
.m-opacity-mini{
   
    opacity: 0.8 !important;
}
.m-opacity-tiny{
   
    opacity: 0.6 !important;
}

/*-----position-----*/
.m-right-top{
   
    position: absolute;
    top: 0;
    right: 0;
}

/*-----display-----*/
.m-inline-block{
   
    display: inline-block !important;
}

/*----container----*/
.m-container{
   
    max-width: 72em !important;
    margin: auto !important;
}

/*----color----*/
.m-black{
   
    color: #333 !important;
}

.m-mobile-show{
   
    display: none !important;
}

@media screen and (max-width: 768px) {
   
    .m-mobile-hide{
   
        display: none !important;
    }
    .m-mobile-show{
   
        display: block !important;
    }
}

效果图
在这里插入图片描述
在这里插入图片描述

博客详情页面

复制index.html更改为blog.html
在这里插入图片描述
修改页面，删除中间内容，其余的不变
在这里插入图片描述

效果图：
在这里插入图片描述
头部
在这里插入图片描述
效果

在这里插入图片描述

图片区域
在这里插入图片描述
效果
在这里插入图片描述

内容
在这里插入图片描述
效果
在这里插入图片描述

标签
在这里插入图片描述
效果
在这里插入图片描述

赞赏
在这里插入图片描述
效果
在这里插入图片描述
博客信息
在这里插入图片描述
效果
在这里插入图片描述

评论列表
在这里插入图片描述
效果
在这里插入图片描述
css

body{
   
    background: url("../images/bg.png");
}
.m-padded-mini{
   
     padding: 0.2em !important;
}
.m-padded-tiny{
   
    padding: 0.3em !important;
}
.m-padded-tb-mini{
   
    padding-top: 0.2em !important;
    padding-bottom:0.2em !important;
}
.m-padded-tb-tiny{
   
    padding-top: 0.3em !important;
    padding-bottom:0.3em !important;
}
.m-padded-tb-small{
   
    padding-top: 0.5em !important;
    padding-bottom:0.5em !important;
}
.m-padded-tb{
   
    padding-top: 1em !important;
    padding-bottom:1em !important;
}
.m-padded-tb-large{
   
    padding-top: 2em !important;
    padding-bottom:2em !important;
}
.m-padded-tb-big{
   
    padding-top: 3em !important;
    padding-bottom:3em !important;
}
.m-padded-tb-huge{
   
    padding-top: 4em !important;
    padding-bottom:4em !important;
}
.m-padded-tb-massive{
   
    padding-top: 5em !important;
    padding-bottom:5em !important;
}
.m-padded-lr-responsive{
   
    padding-left: 4em !important;
    padding-right: 4em !important;
}

/*-----text-----*/
.m-text{
   
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}
.m-text-thin{
   
    font-weight: 300 !important;
}
.m-text-spaced{
   
    letter-spacing: 1px !important;
}
.m-text-lined{
   
    line-height: 1.8;
}

/*-----margin-----*/
.m-margin-top-small{
   
    margin-top: 0.5em !important;

}
.m-margin-top{
   
    margin-top: 1em !important;

}
.m-margin-top-large{
   
    margin-top: 2em !important;

}
.m-margin-tb-tiny{
   
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}
.m-margin-bottom-small{
   
    margin-bottom: 0.5em !important;
}


/*-----opacity-----*/
.m-opacity-mini{
   
    opacity: 0.8 !important;
}
.m-opacity-tiny{
   
    opacity: 0.6 !important;
}

/*-----position-----*/
.m-right-top{
   
    position: absolute;
    top: 0;
    right: 0;
}

/*-----display-----*/
.m-inline-block{
   
    display: inline-block !important;
}

/*----container----*/
.m-container{
   
    max-width: 72em !important;
    margin: auto !important;
}
.m-container-small{
   
    max-width: 60em !important;
    margin: auto !important;
}

/*----color----*/
.m-black{
   
    color: #333 !important;
}

.m-mobile-show{
   
    display: none !important;
}

@media screen and (max-width: 768px) {
   
    .m-mobile-hide{
   
        display: none !important;
    }
    .m-mobile-show{
   
        display: block !important;
    }
    .m-padded-lr-responsive{
   
        padding-left: 0 !important ;
        padding-right: 0 !important;
    }
    .m-mobile-wide{
   
        width: 100% !important;
    }
}
博客分类页面

头部
在这里插入图片描述
效果
在这里插入图片描述
标题分类
在这里插入图片描述
效果
在这里插入图片描述
内容
在这里插入图片描述
效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

博客标签页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述

博客归档页面

在这里插入图片描述
效果
在这里插入图片描述

博客关于我页面

在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述

博客管理列表页面

在这里插入图片描述
效果
在这里插入图片描述

博客管理发布页面

在这里插入图片描述
在这里插入图片描述
效果：
在这里插入图片描述

博客发表页面插件集成-Markdown

https://pandao.github.io/editor.md/
在这里插入图片描述
解压导入选中的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述

页面集成插件-博客详情页

https://github.com/sofish/typo.css
在这里插入图片描述
导入到
在这里插入图片描述

<!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/typo.css">
    <link rel="stylesheet" href="./static/css/me.css">
</head>
<body>
<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i> 首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
            <a href
最低0.47元/天 解锁文章
小钊钊丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QingFengInn-blog:个人博客完整原始码：如果对你有所帮助，可以给个star鼓励一下
03-24
庆丰客栈博客 个人博客完整原始码：如果对你有所帮助，可以给个star鼓励一下 SpringBoot个人博客项目建造 博客Github源码： : 个人博客主页： : //www.qingfenginn.top/ 一，项目简介： 1.1前言 曾几何时，浏览着别人一个个好好看的个人博客的时候，也憧憬着要是有一个属于自己的个人博客网站就好了。 随着技术的提升自己也想用Spring Boot建造一个属于自己的博客系统，刚好前段时间学习了李仁密大神的小而美个人博客项目课受益匪浅。非常棒。 于是参考了一个明星博主的博客项目，乘热打铁巩固所学习的内容，好让自己熟悉的项目开发的基本流程。于是有了这个“清峰小栈”个人博客项目。 本SpringBoot个人博客项目已开启在我的Github上，研究的可以去了解一下，制作不易可以给个star适当鼓励一下。 来不及多说上图： 1.2技术选型 下面我将分模块对本项目进行
小而美的博客（李仁密）笔记
mx_is_bang的博客
10-30 6124
十月份开始在B站看李仁密的开发小而美博客的视频，想跟着做走一遍前后端的流程，我可能不是一个小白吧，但也是刚刚入门，知道点皮毛 前端框架用的semantic UI 后端Springboot 先开发前端界面，博主真的很厉害，对框架十分熟悉，考虑了很多细节，界面做的很漂亮，增加了很多功能，目前我完成了前端界面的编程。 前端用到的插件及地址如下 markdown https://pandao.github...
Spring Boot开发小而美的个人博客
10-29
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦.......
小而美的个人博客项目总结（mybatis）
m0_55732806的博客
03-29 779
在b站上跟着李仁密老师学习了项目后，我将jpa改造成了mybatis，其中也遇到了很多问题，以下是个人对该项目后端部分的一些总结 代码已上传至git git地址 # 个人博客项目 ## 难点（也是踩坑比较多的地方）： **1.博客评论功能踩坑**：我是建立了一个新的博客详情的实体类，其中有评论区的子父评论关系。目的是无论回复循环嵌套多少次，将它们变成二级目录结构。在做评论对应关系处理时我只添加了回复与被回复者id对应关系，但是前端部分有@功能，这个是要显示被回复者名称的，所以还要添加评论之间昵.
2021.06.08——信息系统开发实训日志01
雍仲的迎客茶庄
06-08 307
个人博客开发 提示：本次项目为学期的实训项目，具有一定的学习意义，主要资源来源于B站以及李仁密老师的视频，完全是全方位锻炼自己的编写能力以及对代码的处理与逻辑能力，十分感谢李老师的资源（尽管看在208的资源费的时候还是略显痛心不过好在有B站在） 文章目录个人博客开发前言一、项目的展示与介绍：1、介绍：2、基本的布局如下所示：3、项目成果图展示：二、项目创建操作步骤：1.使用工具WebStorm创建一个项目文件【MyBlog】:2、在static文件目录下创建三个文件夹【image】、【css】、【js】用
Spring Boot开发一个小而美的个人博客
11-22
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦....... ...
Spring Boot开发小而美的个人博客.zip
02-06
**技术组合：** * 后端：Spring Boot + JPA + thymeleaf模板 * 数据库：MySQL * 前端UI：Semantic UI框架 ...* 基于Spring Boot的完整全栈式的开发套路 * Semantic UI框架的使用 * 一套博客系统的源代码与设计
一个小而美的个人博客，基于Spring Boot开发
最新发布
05-30
一个小而美的个人博客，基于Spring Boot开发 安装运行 clone 项目,加载 maven。 还原数据库，导入 sql 文件夹下的 light-blog.sql 文件。 运行，大功告成。 frontend-design 文件夹下为原型设计图及设计好的原始 ...
基于SpringBoot的精美个人博客网站
04-22
感谢对我的博客网站感兴趣的你。 下载项目运行提示: 因为项目涉及到个人隐私，所以上传的时候做了如下修改： 修改了mysql连接密码 修改了ssl认证文件等java方法 运行忠告： 下载整个项目过后，请首先根据表结构构建相应的数据库表，并且在t_user表中插入一条信息 注意：第一次需要自己增加MD5加密过后的密码格式，相应的MD5加密算法在项目中的src/main/java/com.zzj.blog/util/MD5Utils中可以找到 .修改application的端口号，好让项目在你的电脑环境运行(application-dev.yml开发环境，application-pro.yml生产环境) .通过访问127.0.0.1:你的端口号/admin进行访问后台管理，可以进行编辑博客等操作 通过访问127.0.0.1:你的端口号 进行访问整个网站的对外首页 因为增加了ip记录功能，本地测试请使用127.0.0.1而不是localhost访问，否则将会访问不到首页 非常荣幸能得到你的青睐，在此希望能为你带来帮助的我一个好评~ 非常荣幸能得到你的青睐，在此希望能为你带来帮助的我一个好
SpringBoot开发小而美的个人博客
01-01
SpringBoot开发小而美的个人博客
Spring Boot带前后端 渐进式开发企业级博客系统源码
11-10
围绕Spring Boot技术栈，所涉及的技术不仅限于某个领域，以整合多个技术点，搭建一个能够用于快速开发的框架，一步一步构建博客系统的各个功能，实现一个完整前后端的企业级Java应用。
SpringBoot开发非常美观的java博客系统(包含后台管理功能)
04-27
核心功能 文章/图片/视频发布、喜欢、统计阅读次数。 文章标签tag功能、支持按tag分类 文章支持ueditor/markdown编辑器切换（后台配置） 评论功能，支持回复，支持表情。 第三方（微博、QQ）登录。 lucene实现的站内搜索。 响应式布局 支持用户订阅 先看效果图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) http://localhost:8080/admin/group/list SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能)SpringBoot开发非常美观的java博客系统(包含后台管理功能) 技术选型： JDK8 数据库MySQL 主框架 (Spring-boot、Spring-data-jpa） 安全权限 Shiro 搜索工具 Lucene 缓存 Ehcache 视图模板 Freemarker 其它 Jsoup、fastjson jQuery、Seajs Bootstrap 前端框架 UEditor/Markdown编辑器 font-Awesome 字体/图标 准备工作(sql文件在项目里面) 安装 Jdk8 安装 Maven 准备 IDE (如果你不看源码，可以忽略下面的步骤，直接通过Maven编译war包:mvn clean package -DskipTests) IDE 需要配置的东西 编码方式设为UTF-8 配置Maven 设置Jdk8 关于这些配置,网上有一大把的资料,所以此处不再重复。 获取代码导入到IDE 下载代码 导入到IDE的时候请选择以Maven的方式导入 项目配置参考 系统配置手册 配置完毕 启动项目，在控制台看到Mblog加载完毕的信息后，表示启动成功 打开浏览器输入：http//localhost/mblog/ (此处仅是示例,具体具体端口因人而异)，访问成功即部署完毕 后台管理的地址是 /admin, 如果你是管理员账号点导航栏的头像会看到"后台管理" 启动成功后,你应该去后台的系统配置里配置你的网站信息等。 常见问题总结 进入系统后, 菜单加载不出来, 那应该是你没有导 db_init.sql 点标签显示乱码, 请设置Tomcat的 URIEncoding 为 UTF-8 项目截图 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 转自：https://gitee.com/mtons/mblog SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注意： 一、java main方式运行mblog-web下的BootApplication.java时抛出异常的解决方案 Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean. SpringBoot开发非常美观的java博客系统(包含后台管理功能) 注释掉后下面图片的这段后，记得maven要重新reimport SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 否则maven依赖不生效还是会抛出以上的异常 二、第三方登录点击后无响应，那是因为第三方开放平台回调的url失效导致，需要你去对应的第三方开放平台注册app后获取对应的oauth帐号 SpringBoot开发非常美观的java博客系统(包含后台管理功能) 三、idea以maven项目导入该项目后，发现没有maven的依赖包时，需要对每个maven module进行clear和install，并且注意maven的依赖顺序 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能) 四、访问地址是http://localhost:8080 登录时，帐号，密码只要自己找个密码，然后md5下在更新到db中即可登录成功。 比如：zuidaima 111111，md5后密码是 3931MUEQD1939MQMLM4AISPVNE，md5的java类 SpringBoot开发非常美观的java博客系统(包含后台管理功能) SpringBoot开发非常美观的java博客系统(包含后台管理功能)
Springboot开发小而美的博客
weixin_43752167的博客
10-12 1607
Spring Boot开发小而美的个人博客 个人博客功能： 技术组合： 后端：Spring Boot + JPA + thymeleaf模板 数据库：MySQL 前端UI：Semantic UI框架 工具与环境： IDEA Maven 3 JDK 8 Axure RP 8 课程内容模块： 需求分析与功能规划 页面设计与开发 技术框架搭建 后端管理功能实现 前端管理功能实现 你能学得什...
Spring Boot开发小而美的个人博客-李仁密-专题视频课程
01叔的博客
10-30 6489
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦..........
基于Java+SpringBoot+IDEA+semanticUI的小而美的个人博客
cfqabc123的博客
08-31 595
基于spring boot与hibernate的项目---小而美的个人博客，学习练手必备项目 二、前台主要页面 1.首页 分类页面 登录页面 这是一个比较基础的
spring boot 个人博客
09-07
Spring Boot个人博客是一个使用Spring Boot框架搭建的个人博客系统。它提供了静态页面，可以通过访问https://download.csdn.net/download/weixin_61061381/87459276来下载。该博客系统还实现了一系列功能，包括博客...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值