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

本项目来源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 

<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.0modelVersion>
    <modules>
        <module>yeb-servermodule>
        <module>yeb-generatormodule>
        <module>yeb-generatormodule>
    modules>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.1.1.RELEASEversion>
        <relativePath/> 
    parent>
    <groupId>com.examplegroupId>
    <artifactId>yebartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <packaging>pompackaging>
    <name>yebname>
    <description>Demo project for Spring Bootdescription>
    <properties>
        <java.version>1.8java.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文件中，添加依赖于父工程。并且添加项目中用到的依赖，整体代码：

<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.0modelVersion>
  <parent>
    <groupId>com.examplegroupId>
    <artifactId>yebartifactId>
    <version>0.0.1-SNAPSHOTversion>
  parent>

  <artifactId>yeb-serverartifactId>
  <version>0.0.1-SNAPSHOTversion>

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

  <dependencies>
    
    <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-webartifactId>
    dependency>

    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <scope>runtimescope>
    dependency>
    
    <dependency>
      <groupId>com.baomidougroupId>
      <artifactId>mybatis-plus-boot-starterartifactId>
      <version>3.4.1version>
    dependency>
    <dependency>
      <groupId>org.projectlombokgroupId>
      <artifactId>lombokartifactId>
      <optional>trueoptional>
    dependency>
    
    <dependency>
      <groupId>io.springfoxgroupId>
      <artifactId>springfox-swagger2artifactId>
      <version>2.7.0version>
    dependency>
    
    <dependency>
      <groupId>com.github.xiaoymingroupId>
      <artifactId>swagger-bootstrap-uiartifactId>
      <version>1.9.6version>
    dependency>
    
    <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-securityartifactId>
    dependency>
    
    <dependency>
      <groupId>io.jsonwebtokengroupId>
      <artifactId>jjwtartifactId>
      <version>0.9.0version>
    dependency>
    
    <dependency>
      <groupId>com.github.axetgroupId>
      <artifactId>kaptchaartifactId>
      <version>0.0.9version>
    dependency>
    
    <dependency>
      <groupId>org.apache.commonsgroupId>
      <artifactId>commons-lang3artifactId>
      <version>3.11version>
    dependency>
    
    <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-data-redisartifactId>
    dependency>
    
    <dependency>
      <groupId>org.apache.commonsgroupId>
      <artifactId>commons-pool2artifactId>
    dependency>
    
    <dependency>
      <groupId>cn.afterturngroupId>
      <artifactId>easypoi-spring-boot-starterartifactId>
      <version>4.2.0version>
    dependency>
    
    <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-amqpartifactId>
    dependency>
    
    <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-starter-websocketartifactId>
    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 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文件

<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>yebartifactId>
        <groupId>com.examplegroupId>
        <version>0.0.1-SNAPSHOTversion>
    parent>
    <modelVersion>4.0.0modelVersion>

    <artifactId>yeb-generatorartifactId>
    <version>0.0.1-SNAPSHOTversion>

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

    <dependencies>
        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <scope>runtimescope>
        dependency>
        
        <dependency>
            <groupId>com.baomidougroupId>
            <artifactId>mybatis-plus-boot-starterartifactId>
            <version>3.4.1version>
        dependency>
        
        <dependency>
            <groupId>com.baomidougroupId>
            <artifactId>mybatis-plus-generatorartifactId>
            <version>3.4.1version>
        dependency>

        
        <dependency>
            <groupId>org.apache.velocitygroupId>
            <artifactId>velocity-engine-coreartifactId>
            <version>2.2version>
        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根据表名生成的

​

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