基于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
目录
相关文章
|
10天前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
|
17天前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
87 7
|
11天前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
2月前
|
XML Java 数据库连接
微服务——SpringBoot使用归纳——Spring Boot集成MyBatis——基于 xml 的整合
本教程介绍了基于XML的MyBatis整合方式。首先在`application.yml`中配置XML路径,如`classpath:mapper/*.xml`,然后创建`UserMapper.xml`文件定义SQL映射,包括`resultMap`和查询语句。通过设置`namespace`关联Mapper接口,实现如`getUserByName`的方法。Controller层调用Service完成测试,访问`/getUserByName/{name}`即可返回用户信息。为简化Mapper扫描,推荐在Spring Boot启动类用`@MapperScan`注解指定包路径避免逐个添加`@Mapper`
77 0
|
2月前
|
前端开发 Java 数据库
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 介绍
本课介绍Spring Boot集成Thymeleaf模板引擎。Thymeleaf是一款现代服务器端Java模板引擎,支持Web和独立环境,可实现自然模板开发,便于团队协作。与传统JSP不同,Thymeleaf模板可以直接在浏览器中打开,方便前端人员查看静态原型。通过在HTML标签中添加扩展属性(如`th:text`),Thymeleaf能够在服务运行时动态替换内容,展示数据库中的数据,同时兼容静态页面展示,为开发带来灵活性和便利性。
76 0
|
2月前
|
Java 测试技术 微服务
微服务——SpringBoot使用归纳——Spring Boot中的项目属性配置——少量配置信息的情形
本课主要讲解Spring Boot项目中的属性配置方法。在实际开发中,测试与生产环境的配置往往不同,因此不应将配置信息硬编码在代码中,而应使用配置文件管理,如`application.yml`。例如,在微服务架构下,可通过配置文件设置调用其他服务的地址(如订单服务端口8002),并利用`@Value`注解在代码中读取这些配置值。这种方式使项目更灵活,便于后续修改和维护。
38 0
|
2月前
|
SQL Java 数据库连接
微服务——SpringBoot使用归纳——Spring Boot使用slf4j进行日志记录—— application.yml 中对日志的配置
在 Spring Boot 项目中,`application.yml` 文件用于配置日志。通过 `logging.config` 指定日志配置文件(如 `logback.xml`),实现日志详细设置。`logging.level` 可定义包的日志输出级别,例如将 `com.itcodai.course03.dao` 包设为 `trace` 级别,便于开发时查看 SQL 操作。日志级别从高到低为 ERROR、WARN、INFO、DEBUG,生产环境建议调整为较高级别以减少日志量。本课程采用 yml 格式,因其层次清晰,但需注意格式要求。
167 0
|
2月前
|
缓存 NoSQL Java
基于SpringBoot的Redis开发实战教程
Redis在Spring Boot中的应用非常广泛,其高性能和灵活性使其成为构建高效分布式系统的理想选择。通过深入理解本文的内容,您可以更好地利用Redis的特性,为应用程序提供高效的缓存和消息处理能力。
188 79
|
2月前
|
Java Spring
SpringBoot自动配置原理
本文深入解析了SpringBoot的核心功能——自动配置,重点探讨了`org.springframework.boot.autoconfigure`及相关注解的工作机制。通过分析`@SpringBootApplication`、`@EnableAutoConfiguration`等注解,揭示了SpringBoot如何基于类路径和条件自动装配Bean
94 7
|
2月前
|
JSON 前端开发 Java
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 的使用
本文介绍了 Thymeleaf 在 Spring Boot 项目中的使用方法,包括访问静态页面、处理对象和 List 数据、常用标签操作等内容。通过示例代码展示了如何配置 404 和 500 错误页面,以及如何在模板中渲染对象属性和列表数据。同时总结了常用的 Thymeleaf 标签,如 `th:value`、`th:if`、`th:each` 等,并提供了官方文档链接以供进一步学习。
105 0
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 的使用