实训总结，第一次vue+SpringBoot前后端分离开发，实现前后端分离登录注册及单表CRUD

一. 前言

花了两天时间完成了这次实训，因为是第一次做前后端分离，碰到不少问题，由于只涉及到单表的CRUD，所以大部分都是前端的问题，在这里记录一下自己的心得，以及一些问题的总结。

另外在项目中同时使用了SpringDataJpa以及MyBatis是因为这次实训本来是两个人一组做的，且要突出各自所做的部分，所以就干脆admin表相关都使用SpringDataJpa，user表相关都使用的MyBatis。

整体界面的设计参考：element官网
前后端分离以及SpringDataJpa相关操作参考：【2020版】4小时学会Spring Boot+Vue前后端分离开发

二. 课题简介

1. 课题任务

根据最代码上面的一个完整的前后端分离登录小项目，学习如何初始化vue项目和spring boot来完成一个完整的登录注册案例以及实现一个用户表的CRUD功能。

2. 课题要求

通过实训中对项目的搭建，将本学期所学到过的知识融会贯通起来，开发一个具有前后台的B/S业务系统，能实现一定的业务功能。作品包含但不限于SpringBoot后台、Vue前端技术、mybatis、mysql数据库…

3. 开发环境

JDK 1.8 + IntelliJ IDEA 2019.3 + MySQL 8.0.17 + maven

4. 项目技术

SpringBoot + MyBatis + SpringDataJpa + Vue + element UI

三. 实现功能

本次项目是一个小型的登录注册系统，然后再在登录注册的基础上实现用户的增删查改功能，使得系统具备一定的业务能力，具体功能如下：

1. 管理员用户

登录注册相关功能：

• 注册功能：实现管理员用户的注册
• 登录功能：输入用户名密码登入系统
• 修改密码：修改当前管理员用户密码
• 退出登录：退出当前用户登录状态

2. 用户管理（CRUD）

管理员用户登录系统后对用户的增删改查：

• 编辑功能：修改用户信息
• 分页查询：查询用户列表分页显示
• 添加功能：添加用户进入用户表
• 删除用户：删除单个用户以及批量删除用户

四. 遇到的问题及解决方法

1. 跨域问题

在前端无法直接访问到后端的数据接口，来实现前后端数据交互，前后端都可以解决跨域问题，在当前项目中，采用的是后端解决方案，在后端通过编写配置类实现WebConfigurer接口，并重写该接口中的addCrosMapping()方法来解决跨域问题。

代码如下：

/**
 * 跨域问题解决
 */
@Configuration
public class CrosConfig