当前位置： 首页 > news >正文

继瑞吉外卖后的又一个项目——SpringBoot+Vue的前后端博客系统

news 2025/6/29 6:11:20

文章目录

  • 博客系统项目介绍
    • 前言
    • 项目演示
      • 前台演示
      • 后台演示
    • 组织结构
      • 后端组织结构
      • 前端组织结构
    • 技术选型
      • 前端技术
      • 后端技术
      • 架构图
        • 系统架构图
        • 业务架构图
    • 模块介绍
      • 前端模块
      • 后端模块
    • 环境搭建
      • 开发工具
      • 开发环境
      • 项目运行
    • 未完待续
    • 结语

博客系统项目介绍

前言

本项目已开源在Gitee

  • 后端代码仓库：blog: 博客系统后端代码仓库 (gitee.com)
  • 前端代码仓库：
    • 前台：blog-fe: 博客系统前端代码仓库（前台展示） (gitee.com)
    • 后台：blog-be: 博客系统前端代码仓库（后台管理） (gitee.com)

说明：本项目属于二次开发，我之前是跟着三更老师开发的，后面也就是现在我自己花了一周的时间复盘，重新再次开发一遍。所以在此致谢三更老师💖💖💖三更老师并不是培训机构的，而是利用工作业余时间出的教程，这里也为三更老师做一波宣传

三更老师B站地址：https://space.bilibili.com/663528522?spm_id_from=333.337.0.0

这个项目也是继瑞吉外卖后的一个比较完整的项目了，从项目的 开发 - 部署 - 上线，这段时间（前前后后花了大约两周时间）学到了很多东西，比如SpringSecurity+JWT实现登录流程，项目开发的流程、如何进行模块划分，项目如何上线（这里老师没教，纯自学），数据库表如何设计才更加优雅，三跟老师交给我的，更多的并不是如何使用某某技术，而是为什么要使用这个技术（做到了真正的“授人以鱼，不如授人以渔”），这个技术好在哪些地方。

项目演示

前台演示

  • 在线体验：暂无（部署失败┭┮﹏┭┮。。。）（由于我没有配置好域名，怕暴露服务器IP，所以这里就不透露了）

  • 项目前台截图：

    • 首页：

      image-20230508202436400

    • 登录页面：

      image-20230508202344010

    • 注册页面：

      image-20230508202406808

    • 文章简介：

      image-20230508202456937

    • 文章详情：

      image-20230508202525266

    • 友链展示：

      image-20230508202608053

    • 评论：

      image-20230508202621860

    • 赞赏：

      image-20230508202638850

    • 个人中心：

      image-20230508202650836

    • 安全中心：

      image-20230508202703804

后台演示

  • 在线体验：暂无

  • 项目后台截图：

    • 首页：

      image-20230508203144437

    • 登录：

      image-20230508202324056

    • 写博文：

      image-20230509160029803

    • 系统管理：

      • 用户管理：

        image-20230509160041384

      • 角色管理：

        image-20230509160049139

      • 菜单管理：

        image-20230509160058047

    • 内容管理：

      • 文章管理：

        image-20230509160150259

      • 分类管理：

        image-20230509160158700

      • 友链管理：

        image-20230509160206916

      • 标签管理：

        image-20230509160218331

组织结构

后端组织结构

blog
├─.idea
│  ├─dataSources
│  │  └─f902d677-27d9-4dcf-bcf6-2750320cbe2c
│  │      └─storage_v2
│  │          └─_src_
│  │              └─schema
│  ├─inspectionProfiles
│  ├─mybatisx
│  └─sonarlint
├─blog-be
│  ├─src
│  │  ├─main
│  │  │  ├─java
│  │  │  │  └─com
│  │  │  │      └─hhxy
│  │  │  │          ├─config
│  │  │  │          └─controller
│  │  │  └─resources
│  │  └─test
│  │      └─java
│  │          └─com
│  │              └─hhxy
│  │                  ├─mapper
│  │                  └─service
│  └─target
│      ├─classes
│      │  └─com
│      │      └─hhxy
│      │          ├─config
│      │          └─controller
│      ├─generated-sources
│      │  └─annotations
│      ├─generated-test-sources
│      │  └─test-annotations
│      ├─maven-archiver
│      ├─maven-status
│      │  └─maven-compiler-plugin
│      │      ├─compile
│      │      │  └─default-compile
│      │      └─testCompile
│      │          └─default-testCompile
│      └─test-classes
│          └─com
│              └─hhxy
│                  ├─mapper
│                  └─service
├─blog-fe
│  ├─src
│  │  ├─main
│  │  │  ├─java
│  │  │  │  └─com
│  │  │  │      └─hhxy
│  │  │  │          ├─config
│  │  │  │          ├─controller
│  │  │  │          ├─job
│  │  │  │          └─runner
│  │  │  └─resources
│  │  └─test
│  │      └─java
│  │          └─com
│  │              └─hhxy
│  │                  └─utils
│  └─target
│      ├─classes
│      │  └─com
│      │      └─hhxy
│      │          ├─config
│      │          ├─controller
│      │          ├─job
│      │          └─runner
│      ├─generated-sources
│      │  └─annotations
│      ├─generated-test-sources
│      │  └─test-annotations
│      ├─maven-archiver
│      ├─maven-status
│      │  └─maven-compiler-plugin
│      │      ├─compile
│      │      │  └─default-compile
│      │      └─testCompile
│      │          └─default-testCompile
│      └─test-classes
│          └─com
│              └─hhxy
│                  └─utils
└─blog-framework├─src│  ├─main│  │  ├─java│  │  │  └─com│  │  │      └─hhxy│  │  │          ├─annotation│  │  │          ├─aspect│  │  │          ├─config│  │  │          ├─constants│  │  │          ├─controller│  │  │          ├─filter│  │  │          ├─handler│  │  │          │  ├─exception│  │  │          │  ├─mybatisplus│  │  │          │  └─security│  │  │          ├─mapper│  │  │          ├─model│  │  │          │  ├─dto│  │  │          │  ├─entity│  │  │          │  └─vo│  │  │          ├─service│  │  │          │  └─impl│  │  │          └─utils│  │  │              ├─convert│  │  │              ├─redis│  │  │              └─response│  │  └─resources│  │      ├─mapper│  │      ├─sql│  │      └─static│  └─test│      └─java└─target├─classes│  ├─com│  │  └─hhxy│  │      ├─annotation│  │      ├─aspect│  │      ├─config│  │      ├─constants│  │      ├─controller│  │      ├─filter│  │      ├─handler│  │      │  ├─exception│  │      │  ├─mybatisplus│  │      │  └─security│  │      ├─mapper│  │      ├─model│  │      │  ├─dto│  │      │  ├─entity│  │      │  └─vo│  │      ├─service│  │      │  └─impl│  │      └─utils│  │          ├─convert│  │          ├─redis│  │          └─response│  ├─mapper│  ├─META-INF│  └─sql├─generated-sources│  └─annotations├─maven-archiver└─maven-status└─maven-compiler-plugin├─compile│  └─default-compile└─testCompile└─default-testCompile

前端组织结构

  • 前台项目

    blog-admin:
├─api
├─assets
│  └─css
├─components
├─pages
├─router
├─store
└─utils

  • 后台项目

    blog-vue:
├─public
├─src
│  ├─api
│  │  ├─content
│  │  └─system
│  ├─assets
│  │  ├─404_images
│  │  ├─icons
│  │  │  └─svg
│  │  └─images
│  ├─components
│  │  ├─Breadcrumb
│  │  ├─Hamburger
│  │  ├─ParentView
│  │  └─SvgIcon
│  ├─directive
│  │  └─permission
│  ├─layout
│  │  ├─components
│  │  │  ├─InnerLink
│  │  │  └─Sidebar
│  │  └─mixin
│  ├─plugins
│  ├─router
│  ├─store
│  │  └─modules
│  ├─styles
│  ├─utils
│  └─views
│      ├─content
│      │  ├─article
│      │  │  └─write
│      │  ├─category
│      │  ├─link
│      │  └─tag
│      ├─dashboard
│      ├─login
│      ├─nested
│      │  └─menu1
│      │      └─menu1-2
│      └─system
│          ├─menu
│          ├─role
│          └─user
├─static
└─tests└─unit├─components└─utils

技术选型

前端技术

技术说明文档
HTML网页结构https://developer.mozilla.org/zh-CN/docs/Web/HTML
CSS网页样式https://developer.mozilla.org/zh-CN/docs/Learn/CSS
Vue2.5.2前端框架https://vuejs.org/
NodeJS16.15.0前端依赖的环境https://nodejs.org/en
Vue-router3.0.1路由框架https://router.vuejs.org/
Vuex3.0.1全局状态管理框架https://vuex.vuejs.org/
Element1.4.12前端UI框架https://element.eleme.io
Axios0.17.0前端HTTP框架https://github.com/axios/axios
Js-cookie2.2.0cookie管理工具https://github.com/js-cookie/js-cookie

后端技术

技术说明文档
JDK1.8Java8https://www.java.com/zh-CN/
SpringBoot2.5.0Web应用开发框架https://spring.io/projects/spring-boot
SpringSecurity认证和授权框架https://spring.io/projects/spring-security
MyBatisPlus3.4.3ORM框架http://www.mybatis.org/mybatis-3/zh/index.html
MyBatisGenerator数据层代码生成器http://www.mybatis.org/generator/index.html
Redis6.2.6缓存数据https://redis.io/
MySQL8.0.27持久化存储数据https://www.mysql.com
Druid1.2.15数据库连接池https://github.com/alibaba/druid
OSS对象存储https://github.com/aliyun/aliyun-oss-java-sdk
Lombok1.8.24Java语言增强库https://github.com/rzwitserloot/lombok
PageHelperMyBatis物理分页插件http://git.oschina.net/free/Mybatis_PageHelper
Swagger-UI2.0.2API文档生成工具https://github.com/swagger-api/swagger-ui
Knife4j3.0.3API文档生成工具https://doc.xiaominfo.com/
Validation-api参数校验https://beanvalidation.org/
FastJson1.2.23序列化反序列化https://github.com/alibaba/fastjson/
Jwt0.9.0JWT登录支持http://jboot.com.cn/docs/jwt.html
EasyExcel3.0.5导入导出Excelhttps://easyexcel.opensource.alibaba.com

架构图

系统架构图

image-20230508171801282

业务架构图

image-20230508174627779

模块介绍

项目整体采用三层架构的形式进行开发，在此基础上，还进行了模块的划分，让项目整体结构显得更加清晰明了，从而大大提高代码的复用性，系统的可维护性

前端模块

  • 前台模块

    image-20230508194038339

  • 后台模块

    image-20230509160709565

后端模块

image-20230509160653287

  • 公共模块

    image-20230509160553786

    • 公共模块存哪些东西？

      主要放置公共的代码，比如：通用的Controller、通用的方法类、以及数据模型对象（Model、Dto、Entity、VO），同时存放将前台模块和后台模块的Service、Mapper层的代码。并且还设置有一个公共的配置文件。

    • 为什么要单独配置一个公共模块？

      1. 提高代码的复用性
      2. 提高代码的可维护性

      ……

  • 前台模块

    image-20230509160610022

    • 前台模块的作用：主要用于处理项目博客前台的请求，DDL操作较少、DQL操作较多

  • 后台模块

    image-20230509160623360

    • 后台模块的作用：主要用于处理项目博客后台的请求，DDL和DQL操作都较多

环境搭建

手把手教你如何搭建项目环境，并成功运行起来

开发工具

工具说明
InntelliJ IDEA 2022.2.1Java编译器
VSCode 2022前端编译器
Navicat Premium 12可视化操作数据库
Maven 3.6.1用于构建和管理Java项目
Git版本控制
Postman接口测试
VMware用于部署Redis
FinalShellLinux终端，远程来连接Linux
RESP可视化操作Redis
ProcessOn流程图绘制工具
Snipaste屏幕截图工具
TyporaMarkdown编辑器

开发环境

  • 前端：使用VueCLI3+Vue2

      "dependencies": {"axios": "^0.17.0","element-ui": "^1.4.12","js-cookie": "2.2.0","mavon-editor": "^2.10.4","vue": "^2.5.2","vue-router": "^3.0.1","vuex": "^3.0.1"},"devDependencies": {"@vue/cli-plugin-babel": "4.4.4","@vue/cli-plugin-eslint": "4.4.4","@vue/cli-plugin-unit-jest": "4.4.4","@vue/cli-service": "4.4.4","@vue/test-utils": "1.0.0-beta.29","autoprefixer": "^7.1.2","babel-core": "^6.22.1","babel-helper-vue-jsx-merge-props": "^2.0.3","babel-loader": "^7.1.1","babel-plugin-syntax-jsx": "^6.18.0","babel-plugin-transform-runtime": "^6.22.0","babel-plugin-transform-vue-jsx": "^3.5.0","babel-preset-env": "^1.3.2","babel-preset-stage-2": "^6.22.0","chalk": "^2.0.1","copy-webpack-plugin": "^4.0.1","css-loader": "^0.28.0","extract-text-webpack-plugin": "^3.0.0","file-loader": "^1.1.4","friendly-errors-webpack-plugin": "^1.6.1","less": "^2.7.2","less-loader": "^4.0.5","html-webpack-plugin": "^2.30.1","node-notifier": "^5.1.2","optimize-css-assets-webpack-plugin": "^3.2.0","ora": "^1.2.0","portfinder": "^1.0.13","postcss-import": "^11.0.0","postcss-loader": "^2.0.8","postcss-url": "^7.2.1","rimraf": "^2.6.0","semver": "^5.3.0","shelljs": "^0.7.6","uglifyjs-webpack-plugin": "^1.1.1","url-loader": "^0.5.8","vue-loader": "^13.3.0","vue-style-loader": "^3.0.1","vue-template-compiler": "^2.5.2","webpack": "^3.6.0","webpack-bundle-analyzer": "^2.9.0","webpack-dev-server": "^2.9.1","webpack-merge": "^4.1.0"}

  • 后端：SpringBoot2.5.0+JDK1.8

    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.hhxy</groupId><artifactId>blog</artifactId><packaging>pom</packaging><version>1.0-SNAPSHOT</version><modules><module>blog-framework</module><module>blog-be</module><module>blog-fe</module></modules><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><java.version>1.8</java.version><maven.plugin.version>3.1</maven.plugin.version><springboot.version>2.5.0</springboot.version><lombok-version>1.18.24</lombok-version><druid-version>1.2.15</druid-version><fastjson.version>1.2.33</fastjson.version><jwt.version>0.9.0</jwt.version><mybatisplus.version>3.4.3</mybatisplus.version><aliyun.sdk.oss>3.10.2</aliyun.sdk.oss><qiniuyun.sdk.version>[7.7.0, 7.7.99]</qiniuyun.sdk.version><easyexcel.version>3.0.5</easyexcel.version><knife4j-version>3.0.3</knife4j-version></properties><dependencyManagement><dependencies><!-- SpringBoot的依赖配置--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${springboot.version}</version><type>pom</type><scope>import</scope></dependency><!--Lombok--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>${lombok-version}</version></dependency><!--Druid--><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>${druid-version}</version></dependency><!--Fastjson依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>${fastjson.version}</version></dependency><!--Jwt依赖--><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>${jwt.version}</version></dependency><!--MybatisPlus依赖--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>${mybatisplus.version}</version></dependency><!--阿里云OSS--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>${aliyun.sdk.oss}</version></dependency><!--七牛云sdk--><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>${qiniuyun.sdk.version}</version></dependency><!--EasyExcel--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>${easyexcel.version}</version></dependency><!--Knife4j--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>${knife4j-version}</version></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>${maven.plugin.version}</version><configuration><source>${java.version}</source><target>${java.version}</target><encoding>${project.build.sourceEncoding}</encoding></configuration></plugin></plugins></build></project>

项目运行

温馨提示：

  • 后端的blog-be模块对应前端的blog-admin模块，后端的blog-fe模块对应前端的blog-vue模块，需要先启动后端模块再启动前端模块，才能够正常访问页面
  • 后端模块运行之前，一定要将项目配置文件application-common.yml（位于blog-framework下的resource中）中的MySQL和Redis的账号、密码、主机改成你自己的，SQL文件也位于改目录下，直接使用Navicate运行改目录下的blog.sql即可
  • 后端数据库中的密码已通过PasswordEncoding采用MD5进行了加密，无法直接查看。我设置的初识账号密码是 admin 123qwe，如果想要修改密码，直接可以通过测试类EncryptionPasswordTest（双击Shift搜索该测试类）进行加密，然后将加密后的密码复制到数据库，即可修改初识密码
  • 由于本项目没有使用本地上传功能，我使用的七牛云图床，所以如果想要上传图片需要修改一下配置，在application-common.yml将upload设置为false（true-使用七牛云图床，false-使用本地存储）

  • 前端

    • Step1：进入项目根目录，在文件路径中输入cmd

      image-20230508195348305

    • Step2：执行npm i（或者是 npm install，都一样），下载项目所需依赖（前提是先要有node环境，这里不过多介绍node的安装了，不懂的可以自行百度🤭）

      image-20230508195615086

    • Step3：执行npm run dev，启动项目

      image-20230508201042088

      注意：要想成功访问项目，需要先启动后端

  • 后端：

    • Step1：使用IDEA打开项目，刷新Maven，等待依赖加载

      image-20230508200909130

      PS：依赖加载慢，可以配置Maven镜像，这里也不多做解释了，不会的可以自行百度

    • Step2：开启虚拟机，然后启动Redis，关闭防火墙

      image-20230508200219372

      PS：关于Redis的安装部署，这里也不多做解释了，不会的可以参考这篇文章 Redis基础篇

    • Step3：右击启动类，然后运行（后者在服务中添加SpringBoot程序，也可以启动）

      image-20230508201016311

      image-20230508201743985

未完待续

我还想要完善的一些功能：

  • 点赞功能，包括文章、评论点赞功能（Redis实现）

  • 文章收藏功能

  • 用户关注功能（Redis实现）

  • 共同关注功能（并查集实现）

  • 对页面进行美化（加入一些有意思的动画效果，比如主题切换、看板娘）

  • 对于登录功能

    • 添加忘记密码和记住我两个功能
    • 接入QQ或者微信的扫码登录接口，实现扫码登录

  • 对于注册功能，添加验证码校验，提高系统的安全性，防止恶意注册

  • 对于后台管理首页展示区，缺乏动态数据查询功能

    image-20230511114044059

……

结语

  本项目历时一周开发完成。本次开发，采用分模块开发，由我设计接口并将接口分发给组员，通过Gitee版本控制工具，最终同理合作完成本项目。其中印象最深的是：对通用代码的抽取（比如查询字段是否存在，删除已有关联关系），SpringSecurity+JWT完成登录功能时拦截器的编写，这两块卡了一段时间，最终在组员的商议下共同合力解决。

  本项目在我看来，难点应该是对于权限的控制（SpringSecurity的使用），很多时候稍不注意就控制失败，抛出各种异常，其次就是前端，前端各种组件的设计，也显得有点力不从心，但好在在组员的通力合作下，最终完成了这个博客系统……

动力满满，继续加油冲冲冲！！！丫( •̀ ω •́ )y

http://www.lryc.cn/news/89309.html

相关文章：

  • 2023暑期实习历程总结
  • UART-STM32
  • jetson nano csi摄像头 tensorrt 运行yolov8检测
  • 提升国际品牌影响力：小企业海外网红营销实战指南
  • 从零开始的力扣刷题记录-第三十九天
  • PDPS教程：机器人工作站导出为JT格式文件操作方法
  • 【面试】为什么Mysql用B+树做索引而不用B-树或红黑树
  • 教你如何选择真正有用的防关联指纹浏览器
  • 某程序员哀叹：月薪四五万，却每天极度焦虑痛苦，已有生理性不适，又不敢裸辞，该怎么办？
  • 不愧是腾讯出来的，太厉害了...
  • 2023年上半年系统集成项目管理工程师上午真题及答案解析
  • psd文件丢失了怎么恢复？分享原因及对应恢复方法
  • 【Netty】 工作原理详解（十一）
  • SQL面试必备：100道高频考题解析
  • 基于区域的图像分割
  • 【Python json】零基础也能轻松掌握的学习路线与参考资料
  • 大数据开发之Hive案例篇8-解析XML
  • Sentinel降级规则
  • 基于非靶向和靶向代谢组学分析婴幼儿血管瘤的氨基酸代谢
  • 程序员困局：去大城市进大厂却买不了房，回老家又没有高薪工作…
  • 数字化转型下企业 IT 发展趋势-大企业自主研发，中小企业上云
  • 【Go语言从入门到实战】面向对象编程篇
  • 代码随想录算法训练营第四十五天 | 力扣 70. 爬楼梯（进阶）, 322. 零钱兑换, 279.完全平方数
  • dvwa靶场通关（三）
  • 【计算机图形学】理论考核回顾
  • 一文了解国内外电子后视镜(CMS)现行法规标准
  • LabVIEWCompactRIO 开发指南36 确定“Clock Ticks”或模拟时间
  • ESP32 ：项目的创建及项目架构解析
  • TI EDI 项目数据库方案开源介绍
  • 报表控件FastReport使用指南——使用NuGet包创建PDF文档