参考老罗

BBS专栏下有三个课程,分别是前端的前后台,和后端代码讲解,非常细致。

alt

前置技能

  • 技术栈有 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

打赏作者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHA