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', 'zhangsan@126.com', '15151770550', 1);
INSERT INTO `emp` VALUES (2, 'lisi', '123', 24, '0', '2000-03-15', 'lisi@126.com', '15151770551', 2);
INSERT INTO `emp` VALUES (3, 'wangming', '123', 22, '1', '2000-02-24', 'wangming@163.com', '15151772552', 2);
INSERT INTO `emp` VALUES (4, 'dignqian', '123', 23, '0', '2000-12-06', 'dingxi@163.com', '15151772553', 3);
INSERT INTO `emp` VALUES (5, 'zhaodong', '123', 25, '1', '2000-08-09', 'zhaodong@126.com', '15151772554', 4);
INSERT INTO `emp` VALUES (6, 'liguang', '123', 24, '1', '2000-07-07', 'liguang@126.com', '15151772555', 5);
INSERT INTO `emp` VALUES (7, 'liuyan', '123', 24, '0', '2001-11-17', 'liuyan@126.com', '15151772556', 2);
INSERT INTO `emp` VALUES (8, 'wangxia', '123', 22, '0', '2000-10-27', 'wangxia@126.com', '15151772557', 3);
INSERT INTO `emp` VALUES (9, 'liugang', '123', 22, '1', '2000-03-11', 'liugang@126.com', '15151772558', 2);
INSERT INTO `emp` VALUES (11, 'ow', '123', 11, '1', '1992-01-01', '111@qq.com', '123456', 7);
INSERT INTO `emp` VALUES (12, 'tt', '123', 12, '0', '2000-01-01', '11@qq.com', '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 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 {

}

empMapper

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

}

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 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 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 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 select(Integer pageSize, Integer pageNum, EmpVo empVo);
    Boolean del(Integer id);
    List dlist();
    Boolean insert(Emp emp);
}

baseResult

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

package items.vo;

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

public class baseResult {

    //成功状态码
    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 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;
    }

    
    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);
    }

    
    public static baseResult error(String message){
        return new baseResult(baseResult.ERROR , message);
    }

    
    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 getOther() {
        return other;
    }
}

EmpVo

这个类是为查询条件字段

package items.vo;



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;


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



    4.0.0

    day20211022_try
    day20211022_try
    1.0-SNAPSHOT


    
    
        org.springframework.boot
        spring-boot-starter-parent
        2.2.5.RELEASE
    

    
    
        UTF-8
        1.8
        Hoxton.SR3
        1.1.0
        2.2.1.RELEASE
        1.3.2
        2.0.2
        1.2.5
        5.1.32
        1.1.10
        3.4.0
        2.7.0
        0.9.0
        2.9.7
        1.9.3
    

    
    
        
            
            
                org.springframework.cloud
                spring-cloud-dependencies
                ${spring-cloud-release.version}
                pom
                import
            
            
            
                com.alibaba.nacos
                nacos-client
                ${nacos.version}
            

            
            
                com.alibaba.cloud
                spring-cloud-starter-alibaba-nacos-discovery
                ${alibaba.cloud.version}
            

            
            
                com.alibaba.cloud
                spring-cloud-starter-alibaba-nacos-config
                ${alibaba.cloud.version}
            

            
            
                com.alibaba.cloud
                spring-cloud-starter-alibaba-sentinel
                ${alibaba.cloud.version}
            

            
            
                org.mybatis.spring.boot
                mybatis-spring-boot-starter
                ${mybatis.starter.version}
            
            
            
                tk.mybatis
                mapper-spring-boot-starter
                ${mapper.starter.version}
            
            
            
                com.github.pagehelper
                pagehelper-spring-boot-starter
                ${pageHelper.starter.version}
            

            
            
                com.baomidou
                mybatis-plus-boot-starter
                ${mybatis.plus.version}
            
            
                com.baomidou
                mybatis-plus-annotation
                ${mybatis.plus.version}
            

            
            
                mysql
                mysql-connector-java
                ${mysql.version}
            

            
            
                com.alibaba
                druid-spring-boot-starter
                ${durid.starter.version}
            

            
            
                io.springfox
                springfox-swagger2
                ${swagger.version}
            
            
                io.springfox
                springfox-swagger-ui
                ${swagger.version}
            

            
            
            
                commons-beanutils
                commons-beanutils
                ${beanutils.version}
            

            
            
                io.jsonwebtoken
                jjwt
                ${jwt.jjwt.version}
            

            
            
                joda-time
                joda-time
                ${jwt.joda.version}
            

        

    

    
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
        
        
        
            tk.mybatis
            mapper-spring-boot-starter
        
        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
        
        
        
            mysql
            mysql-connector-java
        
        
        
            com.alibaba
            druid-spring-boot-starter
        
        
        
            io.springfox
            springfox-swagger2
        
        
            io.springfox
            springfox-swagger-ui

2. VUE

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

需要引入这两个js文件

select.html



    
    
    
    document
    
    


    "app">
        
        
                部门-   

            姓名：  
            最小年龄： --
            最大年龄：
            
        
        
        

          -->
            
            
                员工ID  
                员工姓名
                员工密码
                员工年龄
                员工性别
                员工生日
                员工邮箱
                员工电话
                部门
                操作
            
            
                {{emp.id}}
                {{emp.name}}
                {{emp.password}}
                {{emp.age}}
                {{emp.sex == 0?"男":"女"}}
                {{emp.birthday}}
                {{emp.email}}
                {{emp.phone}}
                {{emp.dept != null ? emp.dept.dname:''}}
                  
                    "" @click.prevent="update(emp.id)">修改
                    "" @click.prevent="del(emp.id)">删除
        
        
        当前第{{pageInfo.pageNum}}页，共{{pageInfo.pages}}页
        "text-decoration: none;"
           href="" v-for="(num,index) in pageInfo.pages" @click.prevent="condition(num)" >   {{num}}

add.html



    
    
    
    document
    
    


"app">
    员工姓名：

    员工密码：

    员工年龄：

    员工性别：
    
    男
    
    女

    员工生日：

    员工邮箱：

    员工电话：

    部门： - 
     
     text-decoration: none;" href="select.html">返回主页

员工ID	员工姓名	员工密码	员工年龄	员工性别	员工生日	员工邮箱	员工电话	部门	操作
{{emp.id}}	{{emp.name}}	{{emp.password}}	{{emp.age}}	{{emp.sex == 0?"男":"女"}}	{{emp.birthday}}	{{emp.email}}	{{emp.phone}}	{{emp.dept != null ? emp.dept.dname:''}}	"" @click.prevent="update(emp.id)">修改 "" @click.prevent="del(emp.id)">删除

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

Java相关栏目本月热门文章