参考老罗
BBS专栏下有三个课程,分别是前端的前后台,和后端代码讲解,非常细致。
前置技能
- 技术栈有 SpringBoot, Mybatis, MySQL, Vue3, 这个项目没有用到Redis, 但是之前的Blog项目用到了。
- 后端代码是基于 老罗自己实现的代码生成工具,类似于 MybatisPlus, 他的主页有复现课程。
- 如果对Vue3不熟悉,可以取看之前他发的Vue3的讲解,快速入门。
本次总结的代码是正规渠道购买的源代码【BBS完整代码+代码生成工具】,二次开发的代码见文末。
复现
本节分为4部分,分别是构建数据库,后端环境搭建,前端环境搭建,部署上线。
构建数据库
数据库设计是非常重要的工作,我认为系统的二次开发应该从这里开始。文末提供的资源中包含的SQL脚本是我修改后的数据库脚本。
navicat打开后,连接mysql数据库后,建立数据库easybbs,注意字符集和排序规则。MySQL数据库可以使用docker构建,见这里
后端环境搭建
使用idea打开后端的Java代码库,基本配置都可以参考B站的视频,但是需要结合很多视频才可以找到一些细节,比如,application.properites这个配置文件的中文是乱码,可以打开settings,找到encoding,做如下处理:
这个配置文件需要修改的地方有【数据库部分】【spring.mail.username和spring.mail.password】【project.folder】
├─.idea
├─easybbs-admin
├─easybbs-common
├─easybbs-web
├─file
│ ├─attachment
│ ├─avatar
│ ├─images
│ └─temp
└─logs
三个模块,common存放的是公用的service层和mapper层代码,admin和web模块分别放后台和前台的controller代码,application.properties在两个模块有都有。
maven环境搭建参照视频配置即可。依赖安装好后,运行【EasybbsWebApplication.java】,看到控制台输出以下一行表示启动成功。
2023-08-12 16:14:20 [INFO][com.easybbs.InitRun][run][48]-> 服务启动成功,开始愉快的开发吧
前端环境搭建
vscode打开项目,结构如下,以前台为例。
├─.vscode
├─vite.config.js
├─package.json
├─package-lock.json
├─index.html
├─src
│ ├─main.js
│ ├─App.vue
│ ├─assets
│ ├─components
│ ├─router
│ ├─utils
│ ├─views
└─store
vite是构建工具,package.json下是项目依赖,类似maven下的pom.xml,index.html是入口文件,src下的App.vue也是入口,main.js主要写配置。
npm install
npm run dev
按照终端显示的地址打开浏览器即可。后台前端的账号密码写在application.properties下。
部署上线
按照视频操作即可。
链接:https://pan.baidu.com/s/1R3mkLVYtuczltyzLpDVGDw
提取码:1111