MySql+SpringBoot+Vue 搭建一个完整的前后端分离项目

完整项目搭建流程

虽说 SpringBoot 相较于 SSM 框架，大大减轻了配置的繁琐，但是，要整合 MyBatis ，统一异常处理，Vue等一系列东西，还是要费一番劲的。

这次将创建的整个流程记录下来，方便以后的项目搭建。

要搭建一个完成的前后端分离项目，分为这么几个部分：数据库、后端、前端

如果是为微信小程序搭建一个后端服务，那就只要看到数据库、后端就可以了

数据库

一般在新建项目的时候，我们会选择专门为这个项目新建一个用户，并为这个用户，赋予只属于这一个项目的所有权限

1. 连接 admin

只有 admin 有所有权限

我的数据库 admin 的账户名和密码是：

**账户：**admin

**密码：**123

2. 新建数据库

其字符类型一定要选择utf8mb4，这才是真正的 utf8，支持表情符号

3. 为这个数据库，专门建一个用户

开发环境中，就将密码和用户名设置成一样的，这样不会忘记

host 设置为 localhost

4. 为这个用户，授予对应数据库的全部权限

5. 对当前用户，建立连接

后端

关于 Maven、tomcat 的下载配置，这里就不费笔墨去讲解了。如有需要，可以自行百度查找。

1. 新建 SpringBoot 项目

• 点击 SpringInitiallizr，新建项目

• 选择默认依赖的包

• 选择存放路径

• 新建完成后，项目目录如下

2. 更改启动类位置

• 新建 config 包，将启动类放进去

• 为启动类添加注解

注解内的信息，是项目名称

@ComponentScan("weixindemo")

3. IDEA 数据库配置

• IDEA 连接数据库

• 添加 sql 脚本

新建 sql 文件夹，建立all.sql文件

我们在 sql 脚本中添加测试用数据，并执行

# 测试表
drop table if exists `test`;
create table `test` (
  `id` bigint not null comment 'id',
  `name` varchar(50) comment '名称',
  `password` varchar(50) comment '密码',
  primary key (`id`)
) engine=innodb default charset=utf8mb4 comment='测试';

insert into `test` (id, name, password) values (1, '测试', 'password');       

可以看到，数据库已建立

4. 配置 MyBatis

• 在 resource文件夹下，新建 mapper文件夹

这是用来存放 MyBatis 的实现的

• 新建 pojo 包

pojo 包用来存放实体类

• 在项目下，新建 mapper 包，用来存放接口

• 将配置文件后缀改为.yml

我个人习惯使用.yml进行位置

• 添加 Mybatis配置

这里，要添加数据源，和 MyBatis 的配置，部分地方，要根据实际项目，进行修改

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/weixindemo?useUnicode=true&characterEncoding=utf-8
    username: weixindemo
    password: weixindemo
    driver-class-name: com.mysql.cj.jdbc.Driver
    
    
# 整合Mybatis
mybatis:
  # ** 表示在mapper下不管有多少文件夹，都可以全部识别
  mapper-locations: classpath:/mapper/**/*.xml
  type-aliases-package: weixindemo.pojo
  #  打印sql相关的日志信息
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

• 添加端口配置

因为 vue 也是用的8080端口，我们不能和它重了

server:
  port: 8880

• 启动类添加mapper接口扫描路径

@MapperScan("weixindemo.mapper") //mybatis mapper接口扫描

5. MVC 包建立

我们还要建立 service，util，controller包

5. 测试 Mybatis 配置

配置到这一步，要对之前的配置，进行一个测试

• pojo 中，新建 Test 实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Test {
   
    private Integer id;
    private String name;
}

• mapper 包中，新建 TestMapper 接口

@Repository
@Mapper
public interface TestMapper {
   
    List<Test> getList();
}

• resources 下的 mapper 文件夹中，增加 TestMapper.xml 实现

  

具体内容，要根据实际项目修改

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--namespace要和接口的位置和名字对应-->
<mapper namespace="weixindemo.mapper.TestMapper">

    <select id="getList" resultType="weixindemo.pojo.Test">
        select * from test
    </select>

</mapper>

• 在 service 包下，新建 TestService

别忘了加上 @Service 注解

@Service
public class TestService {
   

    @Autowired
    private TestMapper mapper;

    public List<Test> getList() {
   
        return mapper.getList();
    }
}

• 在 controller包下，新建 TestController

@RestController
public class TestController {
   

    @Autowired
    private TestService testService;
    

    @RequestMapping("/test/list")
    public List<Test> list() {
   
        return testService.getList();
    }

}

• 重启项目

• 新建 http 文件，编写 http 测试脚本，执行

GET http://localhost:8880/test/list
Accept: application/json

###

最后成功从接口中获取数据库中的数据，说明我们之前配置的都没有错误，可以进行下面的操作

6. MyBatis 代码生成器

我们不可能去写所有持久层的实现，业务中，这部分都是自动生成的

• 导入 Maven 依赖

注意，是放在plugiuns下面的

<!-- mybatis generator 自动生成代码插件 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.4.0</version>
                <configuration>
                    <configurationFile>src/main/resources/generator/generator-config.xml</configurationFile>
                    <overwrite>true</overwrite>
                    <verbose>true</verbose>
                </configuration>
                <dependencies>
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>8.0.22</version>
                    </dependency>
                </dependencies>
            </plugin>

• 建立代生成器位置

pom文件中，显示了要创建的代码生成器的位置src/main/resources/generator/generator-config.xml

<configurationFile>
  src/main/resources/generator/generator-config.xml
</configurationFile>

• 代码生成器代码

从jdbcConnection开始，别忘了根据项目进行修改

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <context id="Mysql" targetRuntime="MyBatis3" defaultModelType="flat">

        <!-- 自动检查关键字，为关键字增加反引号 -->
        <property name="autoDelimitKeywords" value="true"/>
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>

        <!--覆盖生成XML文件-->
        <plugin type="org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin" />
        <!-- 生成的实体类添加toString()方法 -->
        <plugin type="org.mybatis.generator.plugins.ToStringPlugin"/>

        <!-- 不生成注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>

        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/wiki?useUnicode=true&amp;characterEncoding=utf-8"
                        userId="wiki"
                        password="123456">
        </jdbcConnection>

        <!-- domain类的位置 -->