基于springboot+vue快速搭建一个轻量级实用的博客系统

简介: 基于springboot+vue快速搭建一个轻量级实用的博客系统

在去年七月份,看着自己有一台空闲的服务器放在那里也是浪费,刚好我也有域名备案了就想着在公网部署一个博客系统。于是我去Github上找用Java语言写的博客系统,
找到自己喜欢的博客系统后拉下来研究了一通,发现他这个项目的技术栈和现在主流的互联网应用架构一样,比如用SpringCloud微服务、中间件、ES等等。

他这个项目用的倒是互联网公司主流框架,而且仅SpringBoot微服务都需要部署5个左右更何况还有ES等中间件,显然在我自己服务器(1核2G)这样的配置下不太可行。
于是我下定决心自己写一套轻量级的博客系统在不损失功能性的情况下保证以最少资源就可以部署。

Tip以下是我用SpringBoot+Vue搭建的轻量级博客的源码,有兴趣可以自己获取。

// Git代码
https://gitee.com/yeeevip/yeee-blog

1 功能介绍

这个博客项目从功能上整体划分为 后台管理端 和 前台用户端,管理端主要负责维护博客文章查看用户范围行为等,用户端主要用于展示博客文章和提供用户交互功能(点赞、评论等)

1.1 用户端

预览地址:一页的博客

  • 1 博客首页

blog-index2.png

  • 2 博客详情

blog-detail.png

  • 3 点赞/评论

blog-likecomment.png

1.2 管理端

  • 1 管理员输入账号密码后即可进入管理页面

blog-login.png

  • 2 在博客管理菜单下,有文章、专题、标题、分类管理

blog-list.png

  • 3 在文章管理下,我们首先创建文章,设置标题、分类等基本信息

blog-create.png

  • 4 紧接着列表页双击标题进入文章详情编辑页编辑/预览文章

blog-edit.png
blog-preview.png

  • 5 还有个专门的菜单展示博客的用户行为日志

blog-stats.png

2 技术设计

博客的技术架构上采用的是前后端分离,其中前端页面是基于Vue+Element-ui组件库来开发编译打包的,服务端则采用SpringBoot框架来自动化配置及按需引入Starter组件实现业务功能逻辑开发。

2.1 前后端分离+微服务

前后端独立,脱离相互依赖,降低开发部署影响风险提升开发效率

  • 1 前端页面独立使用Vue+Element-ui

blog-design-ui.png

  • 2 后端采用Maven+SpringBoot,并按照功能模块分层设计,虽然目前打包为一个单体项目,但是之后需要时很方便独立部署

blog-design-service.png

2.2 富文本编辑

博客详情内容编辑采用的是一个开源的功能强大的富文本编辑器 wangeditor(5.1.23)

wangeditor5是一款基于JavaScript开发的Web富文本编辑器,多达20个常用功能,使用简单,维护便利,提供了扩展插件、上传服务等等相关的资源,可以让我们在开发过程中更好地使用。

blog-design-richtext1.png
blog-design-richtext2.png

2.3 资源权限认证

博客管理端的资源权限认证框架使用的是 SpringSecurity + Oauth2 + Jwt 框架;SpringSecurity是Spring框架的安全框架,用于提供身份认证和授权功能,
使用Oauth2来实现认证服务器统一颁发/验证令牌,主要用于单点登录(SSO),生成令牌的数据格式使用的是Jwt它具有可靠性和自校验性。

blog-design-auth1.png

Tip我已经将SpringSecurity + Oauth2 + Jwt封装成为starter了,只需要引入对应server/cient就可以使用,有兴趣可以自己获取。

// Git代码
https://gitee.com/yeeevip/yeee-memo/tree/master/memo-parent/memo-common/common-auth

blog-design-auth2.png

2.4 接口性能优化

项目的业务比较简单主要就是查询,如查询详情页、列表页,显而易见系统的主要性能瓶颈就是数据库的QPS,所以我决定使用二级缓存 (redis + 本地缓存),在这里市面上已经有一个比较流行的框架JetCache。

JetCache是由阿里巴巴 Group 开源的一款基于 Spring 和 Redis 的分布式缓存框架,它的主要特点包括:基于注解、多级缓存、高性能、易用性。

  • 在需要的方法上直接加缓存注解@Cached

blog-design-jetcache.png

3 云服务器部署项目

要运行项目,我们得提前安装好 JDK(1.8)、Mysql(>=5.7)、Redis、Nginx(静态资源代理),其次就是将编译好的静态资源、功能服务Jar文件打包到服务器。

3.1 基础环境安装

  • 我这里使用的Docker安装的,具体安装过程本文章不详细复述

blog-deploy-base.png

3.2 静态资源部署

  • 1 管理端UI更改.env.production文件,然后执行npm命令打包

blog-deploy-adminui.png

  • 2 用户端UI更改.env.production文件,然后执行npm命令打包

blog-deploy-webui.png

  • 3 将编译打包好的静态文件分别上传服务器/home/webpage/对应目录中,并配置nginx.conf转发
server {
   
   
        listen 443 ssl;
        server_name wwww.yeee.vip;
        ...
        ## 管理端UI转发
        location ^~/adminui {
   
   
            alias /home/webpage/adminui/index.html;
        }
        ## 用户端UI转发
        location ^~/webui {
   
   
            alias /home/webpage/webui/index.html;
        }
    }

3.3 功能服务部署

  • 1 本地执行mvn clean install编译打包jar文件上传到服务器

blog-deploy-srvjar.png

  • 2 nginx.conf配置接口转发,执行java -jar 命令启动java程序
server {
   
   
        listen 443 ssl;
        server_name wwww.yeee.vip;
        ...
        ## 管理端接口
        location ^~/manage {
   
   
            proxy_pass       http://127.0.0.1:8801;
        }
        ## 用户端接口
        location ^~/api {
   
   
            proxy_pass       http://127.0.0.1:8801;
        }
    }
java -jar -Xms300m -Xmx300m yeee-app-bootstrap-1.0.0-SNAPSHOT.jar >./startup-blog.log&

最后

至此我整体上通过功能介绍、技术架构及部署流程完整的介绍了我的这个开源的轻量级博客系统,有什么问题大家可以评论区交流,也可以去github给我
提交PR或者提问,感谢大家支持。

Tip以下是我用SpringBoot+Vue搭建的轻量级博客的源码,有兴趣可以自己获取。

// Git代码
https://gitee.com/yeeevip/yeee-blog
目录
相关文章
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
61 10
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
46 8
|
26天前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
57 8
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
70 3
|
29天前
|
XML Java 应用服务中间件
Spring Boot 两种部署到服务器的方式
本文介绍了Spring Boot项目的两种部署方式:jar包和war包。Jar包方式使用内置Tomcat,只需配置JDK 1.8及以上环境,通过`nohup java -jar`命令后台运行,并开放服务器端口即可访问。War包则需将项目打包后放入外部Tomcat的webapps目录,修改启动类继承`SpringBootServletInitializer`并调整pom.xml中的打包类型为war,最后启动Tomcat访问应用。两者各有优劣,jar包更简单便捷,而war包适合传统部署场景。需要注意的是,war包部署时,内置Tomcat的端口配置不会生效。
233 17
Spring Boot 两种部署到服务器的方式
|
29天前
|
Dart 前端开发 JavaScript
springboot自动配置原理
Spring Boot 自动配置原理:通过 `@EnableAutoConfiguration` 开启自动配置,扫描 `META-INF/spring.factories` 下的配置类,省去手动编写配置文件。使用 `@ConditionalXXX` 注解判断配置类是否生效,导入对应的 starter 后自动配置生效。通过 `@EnableConfigurationProperties` 加载配置属性,默认值与配置文件中的值结合使用。总结来说,Spring Boot 通过这些机制简化了开发配置流程,提升了开发效率。
61 17
springboot自动配置原理
|
1月前
|
XML JavaScript Java
SpringBoot集成Shiro权限+Jwt认证
本文主要描述如何快速基于SpringBoot 2.5.X版本集成Shiro+JWT框架,让大家快速实现无状态登陆和接口权限认证主体框架,具体业务细节未实现,大家按照实际项目补充。
87 11
|
1月前
|
缓存 安全 Java
Spring Boot 3 集成 Spring Security + JWT
本文详细介绍了如何使用Spring Boot 3和Spring Security集成JWT,实现前后端分离的安全认证概述了从入门到引入数据库,再到使用JWT的完整流程。列举了项目中用到的关键依赖,如MyBatis-Plus、Hutool等。简要提及了系统配置表、部门表、字典表等表结构。使用Hutool-jwt工具类进行JWT校验。配置忽略路径、禁用CSRF、添加JWT校验过滤器等。实现登录接口,返回token等信息。
362 12
|
1月前
|
Java 测试技术 应用服务中间件
Spring Boot 如何测试打包部署
本文介绍了 Spring Boot 项目的开发、调试、打包及投产上线的全流程。主要内容包括: 1. **单元测试**:通过添加 `spring-boot-starter-test` 包,使用 `@RunWith(SpringRunner.class)` 和 `@SpringBootTest` 注解进行测试类开发。 2. **集成测试**:支持热部署,通过添加 `spring-boot-devtools` 实现代码修改后自动重启。 3. **投产上线**:提供两种部署方案,一是打包成 jar 包直接运行,二是打包成 war 包部署到 Tomcat 服务器。
47 10
|
1月前
|
存储 安全 Java
Spring Boot 3 集成Spring AOP实现系统日志记录
本文介绍了如何在Spring Boot 3中集成Spring AOP实现系统日志记录功能。通过定义`SysLog`注解和配置相应的AOP切面,可以在方法执行前后自动记录日志信息,包括操作的开始时间、结束时间、请求参数、返回结果、异常信息等,并将这些信息保存到数据库中。此外,还使用了`ThreadLocal`变量来存储每个线程独立的日志数据,确保线程安全。文中还展示了项目实战中的部分代码片段,以及基于Spring Boot 3 + Vue 3构建的快速开发框架的简介与内置功能列表。此框架结合了当前主流技术栈,提供了用户管理、权限控制、接口文档自动生成等多项实用特性。
83 8