【从头开始做项目Springboot+vue前后端分离（中）】

首先要下载安装配置好maven，目前已放弃webstorm，投入IntelliJ IDEA的怀抱！！！！
maven不要下载最新版本！！！！！本来我下载的最新版3.8.5，引入依赖总是报错，显示有个jar包找不到，花了一下午时间试了各种方法，最终没办法重新下载了3.6.3版本，啥也没动就成功了。我以后再也不下载最新版的东西了！！！
maven配置与安装教程
进入下面网站搭建springboot，搭建后台项目

左边部分按照自己的Java配置来选择

右边点击Add dependencies按钮添加依赖，分别是Spring Web，MySQL Driver，Lombok，Mybatis Framework。
接下来点击生成按钮即可

会生成一个demo.zip

打开IntelliJ IDEA，在总文件夹名上面右击，选择新建，选择module，新建Maven，名字为springboot，
接着将之前写好的前端页面放到新建的vue文件夹里面，这样就形成了前后端分离的项目搭建

注意启动服务这里要跟着改变，更改到到现在的package.json

查看springboot当中的pom.xml里面的maven依赖是否报错，直接去博客找解决办法
maven依赖爆红解决办法，根据这个博客解决了大部分问题，最终的问题还是下载了低版本maven解决了。

navicat建user表

在application.properties文件中链接数据库并且设置端口信息

#后台打开端口
server.port=9090
#配置数据库链接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据库驱动配置信息
#localhost:3306/springboot-vue 端口号3306以及数据库名字springboot-vue 注意修改这两部分就行
spring.datasource.url=jdbc:mysql://localhost:3306/springboot-vue?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=CTT&allowMultiQueries=true
spring.datasource.username=root
spring.datasource.password=1234

后端启动按钮，选择绿色的Demo…，与前台同样的启动方式

浏览器输入http://localhost:9090/
看到这个界面即可

至此，后台基础搭建完成

在java的demo文件中如图添加几个package
common：包含常用配置类
controller：包含控制端接口
entity：包含实例
mapper：

common中直接从源码中粘贴进两个工具类即可

日后常用到这两个工具，无需修改直接使用即可，本项目目前只需要这两个工具类即可
其中的MybatisPlusConfig里面是分页插件，必须要先引入MyBatis-Plus插件才能使用，可以直接在MyBatis-Plus官网查询分页插件用法。
MyBatis-Plus官网安装Maven插件
在maven中引入MyBatis-Plus插件，也就是在pom.xml当中添加

    com.baomidou
    mybatis-plus-boot-starter
    3.5.1

更新maven依赖即可
Result是返回给前台的一个包装类，返回json数据，里面的code（0代表成功）会返回成功还是失败（可以定义失败码，例如1001代表用户名或密码错误。。。失败码与错误类型一一对应），msg就是返回前台的错误信息，T是个范型，任意类型的数据都可以接收，里面还定义了一些方法，例如success方法

UserController.java

package com.example.demo.controller;

import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
//@RestController返回json数据
@RestController
//定义一个路由，接口统一路由 @RequestMapping("/user")
@RequestMapping("/user")
public class UserController {
//    @Resource是为了引入mapper，不过不规范，比较简单
    @Resource
    UserMapper userMapper;
//   @PostMapping 定义一个post接口
    @PostMapping
//    save方法是新增用户信息接口
//    @RequestBody意为把前台转来的Json转化为java对象,User实体
//    为了传入实体对象，所以定义了实体包entity
//    Result ?代表任意一种类型
    public Result save(@RequestBody User user){
    //        使用mapper进行新增数据
    userMapper.insert(user);
    return Result.success();
    }
}

entity里面新建User类

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
//因为使用了mybatis-plus 所以要与数据库相连，tablename为表名
@TableName("user")
//引入lombok中的data，简化了get 、set方法
@Data
public class User {
//    写入实体
//    下面这句话为了使id自增，value是主键的名字，后面是自增设置
    @TableId(value="id",type= IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String sex;
    private String address;
}

mapper：定义接口继承MP当中的BaseMapper

package com.example.demo.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.User;

public interface UserMapper extends BaseMapper {
}

接口暂时写到这边

主要是对homeview添加操作
前端继续使用elements-plus进行一手对话框加表单复制操作
首先把表里的各个内容添加上

给新增按钮添加点击事件，使得弹出对话框，对话框内容是一个需要填写信息的表单

//给新增按钮添加点击事件add
新增

    

      
        
          
        
        
          
        
        
          
        
        
          男
          女
        
        
          
        
      
      
    

js代码块添加数据及方法


homeview完整代码：