B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目

编程语言 2023-08-22 20:43:51 阅读次数: 0

本项目来源B站云E办，笔记整理了项目搭建的过程和涉及的知识点。对于学习来说，不是复制粘贴代码即可，要知其然知其所以然。希望我的笔记能为大家提供思路，也欢迎各位伙伴的指正。

项目前端学习笔记目录

B站云E办Vue+SpringBoot前后端分离项目——搭建vue.js项目

B站云E办Vue+SpringBoot前后端分离项目——前端动态获取菜单目录

一、项目简介

本项目基于Vue+Spring Boot构架一个前后端分离项目。本项目实现了一个在线办公系统，用来管理日常办公事物的：日常流程审批，新闻，通知，公告，文件信息，财务，人事，费用，资产，行政，项目，移动办公等。通过软件的方式方便管理。本项目在技术方面采用最主流的前后端分离开发模式，使用业界最流行、社区非常活跃的开源框架 Spring Boot来构建后端，旨在实现云E办在线办公系统。包括职位管理、职称管理、部门管理、员工管 理、工资管理、在线聊天等模块。项目中还会使用业界主流的第三方组件扩展大家的知识面和技能池。前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可，项目框架设计如下：

​

二、后端技术架构

后端主流开发框架：SpringBoot+Spring MVC +MyBatisPlus。

  • 从零开始搭建一个项目骨架，最好选择合适，熟悉的技术，并且在未来易拓展，适合微服务化体系等。所以一般以Springboot作为我们的框架基础，这是离不开的了。
  • 然后数据层，我们常用的是Mybatis，易上手，方便维护。但是单表操作比较困难，特别是添加字段或减少字段的时候，比较繁琐，所以这里我推荐使用Mybatis Plus（https://mp.baomidou.com/），为简化开发而生，只需简单配置，即可快速进行 CRUD 操作，从而节省大量时间。
  • 考虑到项目可能需要部署多台，这时候我们的会话等信息需要共享，Redis是现在主流的缓存中间件，也适合我们的项目。
  • 然后因为前后端分离，所以我们使用jwt作为我们用户身份凭证。使用SpringSecurity做安全认证及权限管理。Redis做缓存，RabbitMq做邮件的发送，使用EasyPOI实现对员工数据的导入和导出,使用WebSocket做在线聊天。

​

安全框架：SpringSecurity

令牌：JWT

图形验证码：Kaptcha

缓存：redis

文档导入导出：EasyPOI

消息队列：RabbitMQ 做异步的处理，邮件发送

邮件组件：Mail

在线聊天：WebSocket

文件服务器：FastDFS

数据库MySQL+Redis

三、MVC三层架构

Controller层调用Service层的方法，Service层调用Dao层中的方法，其中调用的参数是使用Entity层进行传递的。总的来说这样使业务逻辑更加清晰，写代码更加方便。其实就是提供一种规则，让你把相同类型的代码放在一起，这样就形成了层次，从而达到分层解耦、复用、便于测试和维护的目的。我们的项目会在很长一段时间内采取这种简单的三层架构（DAO + Service + Controller），希望大家能慢慢体会这三个模块的分工。这里我简单总结一下，先有个初步印象：

DAO 用于与数据库的直接交互，定义增删改查等操作 Service 负责业务逻辑，跟功能相关的代码一般写在这里，编写、调用各种方法对 DAO 取得的数据进行操作 Controller 负责数据交互，即接收前端发送的数据，通过调用 Service 获得处理后的数据并返回

 在具体的项目中，其流程为：

Controller-->service接口-->serviceImpl-->dao接口-->daoImpl-->mapper-->db

​

​

四、项目准备-引入数据库

1.数据库地址：

链接：https://pan.baidu.com/s/1PMIJdX3xXvKa0UrAtvUZ1Q?pwd=ay2b
提取码：ay2b

2.数据库准备

新建yeb数据库，数据库字符集选utf8mb4，导入放在database文件夹下的yeb.sql数据库脚本。数据库的采用是 MySQL，算是比较主流的选择，从性能和体量等方面都比较优秀，当然也有一些弊端，但数据库不是我们这里讨论的重点，暂时能用就行。通过navicat新建数据库：

​

选择表-》右键运行sql，sql文件已放入百度网盘中

低版本选utf8，高版本选utf8mb4

mysql5.6版本

DEFAULT：数据库字符集，设置数据库的默认编码为utf8

COLLATE： 数据库校对规则，默认设置utf8_general_ci

mysql8版本

DEFAULT：数据库字符集，设置数据库的默认编码为utf8mb4

COLLATE： 数据库校对规则，默认设置utf8mb4_0900_ai_ci

3.表目录

执行sql后生成的表如下

 ​

4.IDEA安装lombok

​

五、搭建项目

IDEA中使用 Spring Initializr 创建一个SpringBoot项目。后端项目采用maven聚合的形式，父工程做pom依赖管理。主要工作如下：

1）新建SpringBoot项目，作为我们的父工程，该父工程只是用来做我们所有项目的pom依赖管理，所以可以删掉大部分的文件及文件夹

2）修改pom.xml文件，删掉依赖dependencies标签和构建build标签及其内容，加入packaging标签里面写pom

3）创建一个Module项目，使用Maven创建一个quickstart的Module子项目 yeb-server 负责我们整个的业务逻辑

4）对新建的Module项目 yeb-server 进行修改，删掉生成的App类和AppTest类，然后添加一个server包名

5）在yeb-server子项目的pom.xml中引入父工程坐标，关联父工程（主工程）

6）删除构建bulid标签，删除依赖（因为我们直接copy需要的依赖进来）

7）把子项目工程的目录补充完整，如 resources、各层目录等，并添加application.yml配置文件，注意copy配置文件里的内容很容易出现问题

8）添加启动类 YebApplication，并添加mapper扫描注解

9）把配置文件application.yml放到config目录下

1.创建父工程pom文件-yeb-back

该项目采用的是maven聚合的项目，会有一个父工程——yeb-back。父工程下面有子项目：完整云E办业务逻辑——yeb-server、邮箱项目、逆向工程项目——yeb-generator。

父工程，只是用来整个项目pom的依赖管理。除了pom.xml，其他文件都不需要，进行删除。

​

修改pom.xml文件，删掉依赖dependencies标签和构建build标签及其内容，加入packaging标签里面写pom 

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <modules>
        <module>yeb-server</module>
        <module>yeb-generator</module>
        <module>yeb-generator</module>
    </modules>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>yeb</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>
    <name>yeb</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
</project>

2.修改子工程pom文件-yeb-server

创建一个Module项目，使用Maven创建一个quickstart的Module子项目 yeb-server 负责我们整个的业务逻辑。对新建的Module项目 yeb-server 进行修改，删掉生成的App类和AppTest类，然后添加一个server包名。在yeb-server子项目的pom.xml中引入父工程坐标，关联父工程（主工程）。删除构建bulid标签，删除依赖（因为我们直接copy需要的依赖进来）

​

​

 在xml文件中，添加依赖于父工程。并且添加项目中用到的依赖，整体代码：

<?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>
  <parent>
    <groupId>com.example</groupId>
    <artifactId>yeb</artifactId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>

  <artifactId>yeb-server</artifactId>
  <version>0.0.1-SNAPSHOT</version>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <!--web依赖 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <scope>runtime</scope>
    </dependency>
    <!-- mybatis-plus -->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.4.1</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <optional>true</optional>
    </dependency>
    <!-- swagger2 依赖 -->
    <dependency>
      <groupId>io.springfox</groupId>
      <artifactId>springfox-swagger2</artifactId>
      <version>2.7.0</version>
    </dependency>
    <!-- Swagger第三方ui依赖 -->
    <dependency>
      <groupId>com.github.xiaoymin</groupId>
      <artifactId>swagger-bootstrap-ui</artifactId>
      <version>1.9.6</version>
    </dependency>
    <!-- security 权限控制依赖 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <!-- JWT 依赖 -->
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt</artifactId>
      <version>0.9.0</version>
    </dependency>
    <!-- google kaptcha 验证码 -->
    <dependency>
      <groupId>com.github.axet</groupId>
      <artifactId>kaptcha</artifactId>
      <version>0.0.9</version>
    </dependency>
    <!-- StringUtils.isBlank 用来做判断，是不是空，是不是有空格等等 -->
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.11</version>
    </dependency>
    <!-- redis -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <!-- commons-pool2 对象池依赖 -->
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-pool2</artifactId>
    </dependency>
    <!-- easy poi 依赖，导入导出数据 -->
    <dependency>
      <groupId>cn.afterturn</groupId>
      <artifactId>easypoi-spring-boot-starter</artifactId>
      <version>4.2.0</version>
    </dependency>
    <!-- rabbitmq 消息队列 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-amqp</artifactId>
    </dependency>
    <!-- websocket 实时聊天 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>

  </dependencies>

</project>

3. 添加配置文件application.properties

​


server.port=8081
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yeb?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root


spring.datasource.hikari.pool-name=DateHikariCP

spring.datasource.hikari.minimum-idle=5

spring.datasource.hikari.idle-timeout=180000

spring.datasource.hikari.maximum-pool-size=10

spring.datasource.hikari.auto-commit=true

spring.datasource.hikari.max-lifetime=1800000

spring.datasource.hikari.connection-timeout=30000

spring.datasource.hikari.connection-test-query=SELECT 1

# redis
#redis��ַ ������ϵ�
#spring.redis.host=127.0.0.1
spring.redis.host=192.168.110.130
spring.redis.port=6379

spring.redis.database=1
spring.redis.timeout=10000s

#spring.redis.password=root

spring.redis.lettuce.pool.max-active= 1024

spring.redis.lettuce.pool.max-wait= 10000ms

spring.redis.lettuce.pool.max-idle=200

spring.redis.lettuce.pool.min-idle=5

#Mybatis-plus����

mybatis-plus.mapper-locations=classpath*:/mapper/*Mapper.xml

mybatis-plus.type-aliases-package=com.example.server.pojo

#mybatis-plus.configuration.map-underscore-to-camel-case=false

## Mybatis SQL
logging.level.com.example.server.mapper=debug

jwt.tokenHeader=Authorization
jwt.secret=yeb-secret
jwt.expiration=604800
jwt.tokenHead=Bearer

# \u6D88\u606F\u961F\u5217
spring.rabbitmq.username=guest
spring.rabbitmq.password=guest
spring.rabbitmq.host=172.16.100.4
spring.rabbitmq.port=5672

spring.rabbitmq.publisher-confirm-type=correlated

spring.rabbitmq.publisher-returns=true

 4.添加YebApplication启动类

​

package com.example.server;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.example.server.mapper")
public class YebApplication {
    public static void main(String[] args){
        SpringApplication.run(YebApplication.class,args);
    }
}

5.逆向工程AutoGenerator

1).AutoGenerator是什么

AutoGenerator 是 MyBatis-Plus 的代码生成器，通过 AutoGenerator 可以快速生成 Pojo、Mapper、Mapper XML、Service、Controller 等各个模块的代码。

2).AutoGenerator能干什么

可以避免重复大量的工作。比如：1.在开发功能之前，会根据表和字段去新建对应的Pojo类以及属性（private int age;）。而pojo类名要和表名对应，属性要和表字段相对应。对于单表而言，几乎是一个全能的工具，极大的提升了开发效率。更多的关注业务逻辑的实现。

3).怎么使用呢？

在我们项目中使用MyBatis的AutoGenerator自动生成mapper，service，Controller。使用MyBatisPlus自带的逆向工程代码生成器AutoGenerator可以快速生成Entity、Mapper、Mapper XML、Service、Controller 等各个模块的代码，极大的提升了开发效率。

4).yeb-generator项目目录结构

  1. 使用maven的quickstart新建逆向工程代码生成器子项目yeb-generator，专门用于各模块代码的生成。将自动生成的mapper|service|controller层代码复制到yeb-server中对应的位置。
  2. 删除新建的yeb-generator子项目pom.xml中用不到的内容，指定父工程坐标，copy依赖过来，还有新建包名generator。

​

5). CodeGenerator类文件

运行我们编写的那个类中的main方法，然后在下面输入我们的表就可以了，下面的表的话（就是数据库里面对应的表）然后会自动生成对应的mapper文件。

​

运行上面文件，然后在控制框，输入表格名字：

 请输入表名，多个英文逗号分割：
 t_admin,t_admin_role,t_appraise,t_department,t_employee,t_employee_ec,t_employee_remove,t_employee_train,t_joblevel,t_mail_log,t_menu,t_menu_role,t_nation,t_oplog,t_politics_status,t_position,t_role,t_salary,t_salary_adjust,t_sys_msg,t_sys_msg_content

代码：

package com.example.generator;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.DateType;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import org.apache.commons.lang3.StringUtils;

import java.util.Scanner;

/**
 * 执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
 *
 */

public class CodeGenerator {
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输入" + tip + ":");
        System.out.println(help.toString());
        if(scanner.hasNext()){
            String ipt = scanner.next();
            if(StringUtils.isNotEmpty(ipt)){
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的"+tip+"!");

    }
    public static void main(String[] args) {

        AutoGenerator autoGenerator = new AutoGenerator();
        DataSourceConfig dataSourceConfig = new DataSourceConfig();
        dataSourceConfig.setDbType(DbType.MYSQL);
        dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
        dataSourceConfig.setUsername("root");
        dataSourceConfig.setPassword("root");
        dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/yeb?useUnicode=true&characterEncoding=UTF-8");
        autoGenerator.setDataSource(dataSourceConfig);
        GlobalConfig globalConfig = new GlobalConfig();
        globalConfig.setOpen(true); // 代码生成后打开目录
        globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");
        globalConfig.setAuthor("Zeng");
//        globalConfig.setIdType(IdType.ASSIGN_ID);// id 主键策略
//        globalConfig.setDateType(DateType.ONLY_DATE); // 定义生成的实体类中日期类型
        globalConfig.setSwagger2(true);// 开启Swaggers模式
        globalConfig.setServiceName("%sService");
        autoGenerator.setGlobalConfig(globalConfig);
        PackageConfig packageConfig = new PackageConfig();
        packageConfig.setParent("com.example");
        packageConfig.setEntity("pojo");
        packageConfig.setMapper("mapper");
        packageConfig.setController("controller");
        packageConfig.setService("service");
        packageConfig.setServiceImpl("service.impl");
        autoGenerator.setPackageInfo(packageConfig);
        StrategyConfig strategyConfig = new StrategyConfig();

//        strategyConfig.setInclude("t_admin"); // 生成单表写法
        // strategyConfig.setInclude("user","product"); // 生成多张表写法。生成所有表，不用配置
        strategyConfig.setTablePrefix("t"+"_"); // 去表前缀 t,根据实际情况填写

        strategyConfig.setEntityLombokModel(true);
        //数据库表映射到实体的命名策略
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setInclude(scanner("表名，多个英文逗号分割").split(","));
//        List<TableFill> list = new ArrayList<>();
//        TableFill tableFill1 = new TableFill("create_time", FieldFill.INSERT);
//        TableFill tableFill2 = new TableFill("update_time",FieldFill.INSERT_UPDATE);
//        list.add(tableFill1);
//        list.add(tableFill2);

//        strategyConfig.setTableFillList(list);
        autoGenerator.setStrategy(strategyConfig);

        autoGenerator.execute();
    }
}

6.yeb-generator工程pom文件

<?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">
    <parent>
        <artifactId>yeb</artifactId>
        <groupId>com.example</groupId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>yeb-generator</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <!--web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <!-- mybatis-plus 代码生成器 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>

        <!-- mybatis-plus 代码生成器默认模板 -->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>

        <!-- mybatis-plus 代码生成器模板引擎 -->
        <!--        <dependency>-->
        <!--            <groupId>org.freemarker</groupId>-->
        <!--            <artifactId>freemarker</artifactId>-->
        <!--            <version>2.3.30</version>-->
        <!--        </dependency>-->
    </dependencies>

</project>

7.复制生成的mapper\service\controller到yeb-server目录

1）在yeb-generator子项目中，生成好各模块的类后，copy到yeb-server子项目中

2）copy到yeb-server子项目中后，删除掉在yeb-generator子项目中生成好的各模块的类，因为它们会报红

3）添加所需的依赖，解决报红的问题，如添加swagger2的依赖

4）逆向工程文件CodeGenerator，你需要在这个文件里配置你要生成对应模块类的包，里面有具体的注释说明

yeb-server目录

 ​

yeb-server/controller层目录如下图，各文件由CodeGenerator根据表名生成的

​

项目搭建完成，接下来开始项目实战啦

猜你喜欢

转载自blog.csdn.net/qq_36384657/article/details/124676242
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022