SpringBoot+VUE关联查询（查询所有、条件查询、分页查询）删除、添加功能，项目简单很详细！！

首先在数据库创建数据

CREATE DATABASE day1022try;
USE day1022try;

CREATE TABLE `emp` (
  `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '员工ID',
  `name` VARCHAR(50) DEFAULT NULL COMMENT '员工姓名',
  `password` VARCHAR(50) DEFAULT NULL COMMENT '密码',
  `age` INT(11) DEFAULT NULL COMMENT '年龄',
  `sex` VARCHAR(255) DEFAULT NULL COMMENT '性别',
  `birthday` DATE DEFAULT NULL COMMENT '生日',
  `email` VARCHAR(50) DEFAULT NULL COMMENT '邮箱',
  `phone` VARCHAR(50) DEFAULT NULL COMMENT '电话',
  `dept_id` INT(11) DEFAULT NULL COMMENT '部门id',
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

INSERT INTO `emp` VALUES (1, 'zhangsan', '123', 25, '1', '2000-02-01', '[email protected]', '15151770550', 1);
INSERT INTO `emp` VALUES (2, 'lisi', '123', 24, '0', '2000-03-15', '[email protected]', '15151770551', 2);
INSERT INTO `emp` VALUES (3, 'wangming', '123', 22, '1', '2000-02-24', '[email protected]', '15151772552', 2);
INSERT INTO `emp` VALUES (4, 'dignqian', '123', 23, '0', '2000-12-06', '[email protected]', '15151772553', 3);
INSERT INTO `emp` VALUES (5, 'zhaodong', '123', 25, '1', '2000-08-09', '[email protected]', '15151772554', 4);
INSERT INTO `emp` VALUES (6, 'liguang', '123', 24, '1', '2000-07-07', '[email protected]', '15151772555', 5);
INSERT INTO `emp` VALUES (7, 'liuyan', '123', 24, '0', '2001-11-17', '[email protected]', '15151772556', 2);
INSERT INTO `emp` VALUES (8, 'wangxia', '123', 22, '0', '2000-10-27', '[email protected]', '15151772557', 3);
INSERT INTO `emp` VALUES (9, 'liugang', '123', 22, '1', '2000-03-11', '[email protected]', '15151772558', 2);
INSERT INTO `emp` VALUES (11, 'ow', '123', 11, '1', '1992-01-01', '[email protected]', '123456', 7);
INSERT INTO `emp` VALUES (12, 'tt', '123', 12, '0', '2000-01-01', '[email protected]', '123456', 8);

CREATE TABLE `dept` (
  `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '部门id',
  `dept_name` VARCHAR(50) DEFAULT NULL COMMENT '部门名字',
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO `dept` VALUES (1, '开发部');
INSERT INTO `dept` VALUES (2, '测试部');
INSERT INTO `dept` VALUES (3, '财务部');
INSERT INTO `dept` VALUES (4, '法务部');
INSERT INTO `dept` VALUES (5, '总裁办');
INSERT INTO `dept` VALUES (6, '市场部');
INSERT INTO `dept` VALUES (7, '教学部');
INSERT INTO `dept` VALUES (8, '网咨部');

IDEA目录结构（每个目录作用就不多介绍了，这里没有涉及到mapper中的xml文件）

1. IDEA代码

SelectAllEmpController

package items.controller;

import items.domain.Dept;
import items.domain.Emp;
import items.service.ServiceEmp;
import items.vo.BaseResult;
import items.vo.EmpVo;
import items.vo.Msg;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/e")
@CrossOrigin
public class SelectAllEmpController {
    
    

    @Resource
    private ServiceEmp Service1;

    @PostMapping("/select/{
    
    pageSize}/{
    
    pageNum}")
    public BaseResult selectAll(@PathVariable(name = "pageSize") Integer pageSize,
                                @PathVariable(name = "pageNum") Integer pageNum,
                                @RequestBody EmpVo empVo){
    
    
        return  BaseResult.ok("查询成功",Service1.select(pageSize, pageNum, empVo),Service1.dlist());
    }

    @DeleteMapping("/del/{
    
    id}")
    public Msg dek(@PathVariable(name = "id") Integer id){
    
    
        Boolean del = Service1.del(id);
        if(del){
    
    
            return new Msg("删除成功",true);
        }
        return new Msg("删除失败",false);
    }

    @GetMapping
    public BaseResult add(){
    
    
        List<Dept> dlist = Service1.dlist();
        return  BaseResult.ok("查询成功",dlist);
    }

    @PostMapping("/insert")
    public BaseResult add(@RequestBody Emp emp){
    
    
        Boolean insert = Service1.insert(emp);
        if(insert){
    
    
            return  BaseResult.ok("添加成功");
        }else {
    
    
            return  BaseResult.ok("添加失败");
        }
    }
}

Dept

package items.domain;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
@Table(name = "dept")
public class Dept {
    
    

    @Id
    @Column(name = "id")
    private Integer id;
    @Column(name = "dept_name")
    private String dname;

    public Dept() {
    
    
    }

    @Override
    public String toString() {
    
    
        return "DeptMapper{
    
    " +
                "id=" + id +
                ", dname='" + dname + '\'' +
                '}';
    }

    public Integer getId() {
    
    
        return id;
    }

    public void setId(Integer id) {
    
    
        this.id = id;
    }

    public String getDname() {
    
    
        return dname;
    }

    public void setDname(String dname) {
    
    
        this.dname = dname;
    }

    public Dept(Integer id, String dname) {
    
    
        this.id = id;
        this.dname = dname;
    }
}

Emp

package items.domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;

@Table(name = "emp")
public class Emp {
    
    

    @Id
    @Column(name = "id")
    private Integer id;
    @Column(name = "name")
    private String name;
    @Column(name = "password")
    private String password;
    @Column(name = "age")
    private Integer age;
    @Column(name = "sex")
    private String sex;
    @Column(name = "birthday")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date birthday;
    @Column(name = "email")
    private String email;
    @Column(name = "phone")
    private String phone;
    @Column(name = "dept_id")
    private Integer did;
    
    private Dept dept;

    public Emp() {
    
    }

    @Override
    public String toString() {
    
    
        return "Emp{
    
    " +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", birthday=" + birthday +
                ", email='" + email + '\'' +
                ", phone='" + phone + '\'' +
                ", did=" + did +
                ", dept=" + dept +
                '}';
    }

    public Integer getId() {
    
    
        return id;
    }

    public void setId(Integer id) {
    
    
        this.id = id;
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public String getPassword() {
    
    
        return password;
    }

    public void setPassword(String password) {
    
    
        this.password = password;
    }

    public Integer getAge() {
    
    
        return age;
    }

    public void setAge(Integer age) {
    
    
        this.age = age;
    }

    public String getSex() {
    
    
        return sex;
    }

    public void setSex(String sex) {
    
    
        this.sex = sex;
    }

    public Date getBirthday() {
    
    
        return birthday;
    }

    public void setBirthday(Date birthday) {
    
    
        this.birthday = birthday;
    }

    public String getEmail() {
    
    
        return email;
    }

    public void setEmail(String email) {
    
    
        this.email = email;
    }

    public String getPhone() {
    
    
        return phone;
    }

    public void setPhone(String phone) {
    
    
        this.phone = phone;
    }

    public Integer getDid() {
    
    
        return did;
    }

    public void setDid(Integer did) {
    
    
        this.did = did;
    }

    public Dept getDept() {
    
    
        return dept;
    }

    public void setDept(Dept dept) {
    
    
        this.dept = dept;
    }

    public Emp(Integer id, String name, String password, Integer age, String sex, Date birthday, String email, String phone, Integer did) {
    
    
        this.id = id;
        this.name = name;
        this.password = password;
        this.age = age;
        this.sex = sex;
        this.birthday = birthday;
        this.email = email;
        this.phone = phone;
        this.did = did;
    }

    public Emp(Integer id, String name, String password, Integer age, String sex, Date birthday, String email, String phone, Integer did, Dept dept) {
    
    
        this.id = id;
        this.name = name;
        this.password = password;
        this.age = age;
        this.sex = sex;
        this.birthday = birthday;
        this.email = email;
        this.phone = phone;
        this.did = did;
        this.dept = dept;
    }
}

DeptMapper

package items.mapper;
import items.domain.Dept;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface DeptMapper extends Mapper<Dept> {
    
    

}

empMapper

package items.mapper;
import items.domain.Emp;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface empMapper extends Mapper<Emp> {
    
    

}

Service1

package items.service.Impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import items.domain.Dept;
import items.domain.Emp;
import items.mapper.DeptMapper;
import items.mapper.empMapper;
import items.service.ServiceEmp;
import items.vo.EmpVo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;
import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class Service1 implements ServiceEmp {
    
    

    @Resource
    private empMapper empMapper;
    @Resource
    private DeptMapper deptMapper;
    
    @Override
    public PageInfo<Emp> select(Integer pageSize, Integer pageNum, EmpVo empVo) {
    
    

        Example example = new Example(Emp.class);
        Example.Criteria criteria = example.createCriteria();

        if(empVo.getD_id()!=null&&!empVo.getD_id().equals("")){
    
    
            criteria.andEqualTo("did",empVo.getD_id());
        }
        if(empVo.getName()!=null&&!empVo.getName().equals("")){
    
    
            criteria.andLike("name","%"+empVo.getName()+"%");
        }
        if(empVo.getStartage()!=null&&!empVo.getStartage().equals("")){
    
    
            criteria.andGreaterThanOrEqualTo("age",empVo.getStartage());
        }
        if(empVo.getEndage()!=null&&!empVo.getEndage().equals("")){
    
    
            criteria.andLessThanOrEqualTo("age",empVo.getEndage());
        }
        PageHelper.startPage(pageNum,pageSize);
        List<Emp> emps = empMapper.selectByExample(example);
        for (Emp emp : emps) {
    
    
            Dept dept = deptMapper.selectByPrimaryKey(emp.getDid());
            emp.setDept(dept);
        }
        return new PageInfo<>(emps);
    }

    @Override
    public Boolean del(Integer id) {
    
    
        int i = empMapper.deleteByPrimaryKey(id);
        if(i>0){
    
    
            return true;
        }
        return false;
    }

    @Override
    public List<Dept> dlist() {
    
    
        return deptMapper.selectAll();
    }

    @Override
    public Boolean insert(Emp emp) {
    
    
        int i = empMapper.insertSelective(emp);
        if(i>0){
    
    
            return true;
        }
        return false;
    }
}

ServiceEmp

package items.service;
import com.github.pagehelper.PageInfo;
import items.domain.Dept;
import items.domain.Emp;
import items.vo.EmpVo;
import java.util.List;

public interface ServiceEmp {
    
    
    PageInfo<Emp> select(Integer pageSize, Integer pageNum, EmpVo empVo);
    Boolean del(Integer id);
    List<Dept> dlist();
    Boolean insert(Emp emp);
}

BaseResult

这个类中定义了成功状态码、失败状态码、返回码、以及返回字段、存放数据字段（根据需求来定义）、和其他数据

package items.vo;

import java.util.HashMap;
import java.util.Map;

public class BaseResult<T> {
    
    

    //成功状态码
    public static final int OK = 1;
    //失败状态码
    public static final int ERROR = 0;

    //返回码
    private Integer code;
    //返回消息
    private String message;
    // 数据1
    private T dd;
    // 数据2
    private T data;
    //其他数据
    private Map<String,Object> other = new HashMap<>();

    public BaseResult() {
    
    

    }

    public BaseResult(Integer code, String message) {
    
    
        this.code = code;
        this.message = message;
    }
    public BaseResult(Integer code, String message, T data,T dd) {
    
    
        this.code = code;
        this.message = message;
        this.data = data;
        this.dd = dd;
    }

    public BaseResult(Integer code, String message, T data) {
    
    
        this.code = code;
        this.message = message;
        this.data = data;
    }

    /**
     * 快捷成功BaseResult对象
     * @param message
     * @return
     */
    public static BaseResult ok(String message){
    
    
        return new BaseResult(BaseResult.OK , message);
    }

    public static BaseResult ok(String message, Object data){
    
    

        return new BaseResult(BaseResult.OK , message, data);
    }

    public static BaseResult ok(String message, Object data,Object dd){
    
    

        return new BaseResult(BaseResult.OK , message, data ,dd);
    }

    /**
     * 快捷失败BaseResult对象
     * @param message
     * @return
     */
    public static BaseResult error(String message){
    
    
        return new BaseResult(BaseResult.ERROR , message);
    }

    /**
     * 自定义数据区域
     * @param key
     * @param msg
     * @return
     */
    public BaseResult append(String key , Object msg){
    
    
        other.put(key , msg);
        return this;
    }

    public Integer getCode() {
    
    
        return code;
    }

    public String getMessage() {
    
    
        return message;
    }

    public T getData() {
    
    
        return data;
    }

    public T getDd() {
    
    
        return dd;
    }

    public void setDd(T dd) {
    
    
        this.dd = dd;
    }

    public Map<String, Object> getOther() {
    
    
        return other;
    }
}

EmpVo

这个类是为查询条件字段

package items.vo;


/*
*    todo:  查询条件字段类
* */
public class EmpVo {
    
    

    private String  d_id;  // 部门
    private String name;   // 姓名
    private String startage;  // 最小年龄
    private String endage;  // 最大年龄

    public EmpVo() {
    
    
    }

    @Override
    public String toString() {
    
    
        return "EmpVo{
    
    " +
                "d_id='" + d_id + '\'' +
                ", name='" + name + '\'' +
                ", startage='" + startage + '\'' +
                ", endage='" + endage + '\'' +
                '}';
    }

    public String getD_id() {
    
    
        return d_id;
    }

    public void setD_id(String d_id) {
    
    
        this.d_id = d_id;
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public String getStartage() {
    
    
        return startage;
    }

    public void setStartage(String startage) {
    
    
        this.startage = startage;
    }

    public String getEndage() {
    
    
        return endage;
    }

    public void setEndage(String endage) {
    
    
        this.endage = endage;
    }

    public EmpVo(String d_id, String name, String startage, String endage) {
    
    
        this.d_id = d_id;
        this.name = name;
        this.startage = startage;
        this.endage = endage;
    }
}

Msg
这个类封装了返回判断以及返回信息，功能和BaseResult差不多

package items.vo;

import java.io.Serializable;

/**
 * 用于ajax响应体数据返回
 */
public class Msg implements Serializable {
    
    
    private String msg;    //返回字符串结果
    private boolean flag;  //返回操作成功与否。  true成功，false失败
    
    @Override
    public String toString() {
    
    
        return "Msg{
    
    " +
                "msg='" + msg + '\'' +
                ", flag=" + flag +
                '}';
    }

    public Msg(String msg, boolean flag) {
    
    
        this.msg = msg;
        this.flag = flag;
    }

    public Msg() {
    
    
    }

    public String getMsg() {
    
    
        return msg;
    }

    public void setMsg(String msg) {
    
    
        this.msg = msg;
    }

    public boolean isFlag() {
    
    
        return flag;
    }

    public void setFlag(boolean flag) {
    
    
        this.flag = flag;
    }
}

application.properties（根据自己数据库信息修改对应数据
）

#�˿ں�
server.port=8080

#���ݿ��������
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/day1022try?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root

#druid ���ӳ�����
#����
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#��ʼ�����ӳش�С
spring.datasource.druid.initial-size=1
#��������
spring.datasource.druid.min-idle=1
#���������
spring.datasource.druid.max-active=20
#��ȡ����ʱ����֤����Ӱ������
spring.datasource.druid.test-on-borrow=true

 #mybatis
 mybatis.type-aliases-package=items.domain
 #mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#�����շ�ӳ��
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#����log4j��ӡSQL���
logging.level.items.mapper=debug

pom.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>

    <groupId>day20211022_try</groupId>
    <artifactId>day20211022_try</artifactId>
    <version>1.0-SNAPSHOT</version>


    <!-- 1 确定spring boot的版本-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
    </parent>

    <!--2  确定版本-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
        <spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version>
        <nacos.version>1.1.0</nacos.version>
        <alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version>
        <mybatis.starter.version>1.3.2</mybatis.starter.version>
        <mapper.starter.version>2.0.2</mapper.starter.version>
        <pageHelper.starter.version>1.2.5</pageHelper.starter.version>
        <mysql.version>5.1.32</mysql.version>
        <durid.starter.version>1.1.10</durid.starter.version>
        <mybatis.plus.version>3.4.0</mybatis.plus.version>
        <swagger.version>2.7.0</swagger.version>
        <jwt.jjwt.version>0.9.0</jwt.jjwt.version>
        <jwt.joda.version>2.9.7</jwt.joda.version>
        <beanutils.version>1.9.3</beanutils.version>
    </properties>

    <!-- 3 锁定版本-->
    <dependencyManagement>
        <dependencies>
            <!-- sprig cloud-->
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${
    
    spring-cloud-release.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <!--nacos -->
            <dependency>
                <groupId>com.alibaba.nacos</groupId>
                <artifactId>nacos-client</artifactId>
                <version>${
    
    nacos.version}</version>
            </dependency>

            <!--nacos cloud 发现 -->
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
                <version>${
    
    alibaba.cloud.version}</version>
            </dependency>

            <!--nacos cloud 配置 -->
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
                <version>${
    
    alibaba.cloud.version}</version>
            </dependency>

            <!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
                <version>${
    
    alibaba.cloud.version}</version>
            </dependency>

            <!-- mybatis启动器 -->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>${
    
    mybatis.starter.version}</version>
            </dependency>
            <!-- 通用Mapper启动器 -->
            <dependency>
                <groupId>tk.mybatis</groupId>
                <artifactId>mapper-spring-boot-starter</artifactId>
                <version>${
    
    mapper.starter.version}</version>
            </dependency>
            <!-- 分页助手启动器 -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>${
    
    pageHelper.starter.version}</version>
            </dependency>

            <!-- mybatis plus-->
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>${
    
    mybatis.plus.version}</version>
            </dependency>
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-annotation</artifactId>
                <version>${
    
    mybatis.plus.version}</version>
            </dependency>

            <!-- mysql驱动 -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${
    
    mysql.version}</version>
            </dependency>

            <!-- Druid连接池 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>${
    
    durid.starter.version}</version>
            </dependency>

            <!--swagger2-->
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
                <version>${
    
    swagger.version}</version>
            </dependency>
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
                <version>${
    
    swagger.version}</version>
            </dependency>

            <!--jwt-->
            <!--JavaBean工具类，用于JavaBean数据封装-->
            <dependency>
                <groupId>commons-beanutils</groupId>
                <artifactId>commons-beanutils</artifactId>
                <version>${
    
    beanutils.version}</version>
            </dependency>

            <!--jwt工具-->
            <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>${
    
    jwt.jjwt.version}</version>
            </dependency>

            <!--joda 时间工具类 -->
            <dependency>
                <groupId>joda-time</groupId>
                <artifactId>joda-time</artifactId>
                <version>${
    
    jwt.joda.version}</version>
            </dependency>

        </dependencies>

    </dependencyManagement>

    <dependencies>
        <!--web起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mybatis启动器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
        </dependency>
        <!-- 通用Mapper启动器 -->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
        </dependency>
        <!-- 分页助手启动器 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
        </dependency>
        <!-- mysql驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- Druid连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
        </dependency>
        <!--swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>
    </dependencies>
</project>

2. VUE

这里使用的是 Visual Studio Code
下载地址：https://code.visualstudio.com/

需要引入这两个js文件

select.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <!-- 条件查询 -->
        <form action="">
                部门-<select v-model="EmpVo.d_id" @change="changeProduct($event)">
                    <option value="">所有部门</option>
                    <option v-for="(emp,index) in dlist" :value="emp.id">{
    
    {
    
    emp.dname}}</option>
                </select>&nbsp &nbsp

            姓名：<input type="text" v-model="EmpVo.name" placeholder="请输入姓名"> &nbsp
            最小年龄：<input type="text" v-model="EmpVo.startage" placeholder="请输入最小年龄"> --
            最大年龄：<input type="text" v-model="EmpVo.endage" placeholder="请输入最大年龄">
            <input type="button" @click = condition(1) value="查询">
        </form>
        <!-- 数据展示  -->
        <input type="button" value="添加数据" @click ="add()"><br/>
        <table border="1">
            <tr>
                <td>员工ID  </td>
                <td>员工姓名</td>
                <td>员工密码</td>
                <td>员工年龄</td>
                <td>员工性别</td>
                <td>员工生日</td>
                <td>员工邮箱</td>
                <td>员工电话</td>
                <td>部门</td>
                <td>操作</td>
            </tr>
            <tr v-for="(emp,index) in pageInfo.list">
                <td>{
    
    {
    
    emp.id}}</td>
                <td>{
    
    {
    
    emp.name}}</td>
                <td>{
    
    {
    
    emp.password}}</td>
                <td>{
    
    {
    
    emp.age}}</td>
                <td>{
    
    {
    
    emp.sex == 0?"男":"女"}}</td>
                <td>{
    
    {
    
    emp.birthday}}</td>
                <td>{
    
    {
    
    emp.email}}</td>
                <td>{
    
    {
    
    emp.phone}}</td>
                <td>{
    
    {
    
    emp.dept != null ? emp.dept.dname:''}}</td>
                <td>  
                    <a href="" @click.prevent="update(emp.id)">修改</a>
                    <a href="" @click.prevent="del(emp.id)">删除</a></td>  -->
            </tr>
        </table>
        <!--分页-->
        当前第{
    
    {
    
    pageInfo.pageNum}}页，共{
    
    {
    
    pageInfo.pages}}页
        <a style="text-decoration: none;"
           href="" v-for="(num,index) in pageInfo.pages" @click.prevent="condition(num)" > &nbsp {
    
    {
    
    num}}</a>
    </div>
</body>
</html>
<script>
    new Vue({
    
    
        el: '#app',
        data:{
    
    
            dlist:[
            ],
            // 查询到的数据
            pageInfo: {
    
          
                // 分页数据
                pageSize: 3,
                pageNum: 1
            },
            // 查询条件
            EmpVo:{
    
    
                d_id:'',
                name:'',
                startage:'',
                endage:''
            }
        },
        methods: {
    
    
            add(){
    
    
            location.href = 'add.html'
            },
            update(id){
    
    
                alert(id)
                location.href = `update.html?id=`+id

            },
            changeProduct(event) {
    
    
                this.EmpVo.d_id = event.target.value; 
            },
            del(id){
    
    
                if(confirm('确认删除？')){
    
    
                    var url = `http://localhost:8080/e/del/`+id
                    axios.delete(url)
                    .then(res => {
    
    
                        alert("删除成功")
                    })
                    .catch(err => {
    
    
                        console.error(err); 
                    })
                    this.condition(1)
                }
            },
            condition(pageNum) {
    
    
                if(pageNum) {
    
    
                    this.pageInfo.pageNum = pageNum
                }
                var url = `http://localhost:8080/e/select/${
    
    this.pageInfo.pageSize}/${
    
    this.pageInfo.pageNum}`
                axios.post(url,this.EmpVo)
                .then(res => {
    
    
                    // 处理数据
                    var baseResult = res.data
                    // 判断
                    if(baseResult.code == 1) {
    
    
                        // 成功
                        this.pageInfo = baseResult.data
                        this.dlist = baseResult.dd

                    } else {
    
    
                        // 失败
                        alert(baseResult.message)
                    }
                })
                .catch(err => {
    
    
                    console.error(err); 
                })

            }
        },
        created() {
    
    

            // 条件所有  
            this.condition()
        },
    })
</script>

add.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    员工姓名：<input type="text" v-model="emp.name" ><br/>
    员工密码：<input type="text" v-model="emp.password" ><br/>
    员工年龄：<input type="text" v-model="emp.age" ><br/>
    员工性别：
    <input type="radio" v-model="emp.sex" value="1" id="man">
    <label for="man">男</label>
    <input type="radio" v-model="emp.sex" value="0" id="woman"/>
    <label for="woman">女</label><br/>
    员工生日：<input type="date" v-model="emp.birthday" ><br/>
    员工邮箱：<input type="text" v-model="emp.email" ><br/>
    员工电话：<input type="text" v-model="emp.phone" ><br/>
    部门： -<select v-model="emp.did" @change="changeProduct($event)">
                <option value="">所有部门</option>
                <option v-for="(emp,index) in dlist" :value="emp.id">{
    
    {
    
    emp.dname}}</option>
           </select> 
     <input type="button" value="添加" @click="add">
     <a style="text-decoration: none;" href="select.html">返回主页</a>
</div>
</body>
</html>
<script>
    new Vue({
    
    
         el:"#app",
         data:{
    
    
             emp:{
    
    
                 id:'',
                 name:'',
                 password:'',
                 age:'',
                 sex:'',
                 birthday:'',
                 email:'',
                 phone:'',
                 did:'',
             },
             dlist:[
             ]
         },
         methods: {
    
    
             add(){
    
    
                var url = `http://localhost:8080/e/insert/`
                axios.post(url,this.emp)
                .then(res => {
    
    
                    // 处理数据
                    var baseResult = res.data
                    // 判断
                    if(baseResult.code == 1) {
    
    
                        // 添加成功
                        alert(baseResult.message)
                        // 返回查询主页
                        location.href = 'select.html'
                    } else {
    
    
                        // 失败
                        alert(baseResult.message)
                    }
                })
                .catch(err => {
    
    
                    console.error(err); 
                })
             },
            changeProduct(event) {
    
    
                //
                this.emp.did = event.target.value; 
            },
            init(){
    
    
                    var url = `http://localhost:8080/e`
                    axios.get(url)
                    .then(res => {
    
    
                        var baseResult = res.data
                    // 判断
                    if(baseResult.code == 1) {
    
    
                        // 成功
                        this.dlist = baseResult.data
                    } 
                    })
                    .catch(err => {
    
    
                        console.error(err); 
                    })
                    this.condition(1)
             }
         },
         created() {
    
    
             this.init()
},
    })
</script>