SpringBoot+mybatisPlus+Vue项目演示（班级和学生为例）

直接展示成品（数据库就不写了，后端实体里面有对应的）

后端代码

目录展示

代码展示

springboot配置文件：

#配置数据源
spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.druid.url=jdbc:mysql://localhost:3306/mabitsplus?serverTimezone=Asia/Shanghai
spring.datasource.druid.username=root
spring.datasource.druid.password=root

#指定映射文件所在的路径
# mybatis-plus.config-location=classpath:mapper/*.xml

#mybatis日志文件
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

pom依赖：

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.yaokui</groupId>
    <artifactId>springbootswagger</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springbootswagger</name>
    <description>springbootswagger</description>
    <properties>
        <java.version>8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--swagger2依赖-->
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.7.8</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.20</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.21</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.12</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

config配置类：

package com.yaokui.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Software：IntelliJ IDEA 2021.1.1 x64
 * Author: https://www.mobaijun.com
 * Date: 2021/7/7 10:55
 * ClassName:CorsConfig
 * 类描述： cors配置类
 */
@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            // 重写父类提供的跨域请求处理的接口
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 添加映射路径
                registry.addMapping("/**")
                        // 放行哪些原始域
                        .allowedOrigins("*")
                        //.allowedOriginPatterns("*")
                        // 是否发送Cookie信息
                        .allowCredentials(true)
                        // 放行哪些原始域(请求方式)
                        .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS", "PATCH")
                        // 放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2")
                        // 预请求的结果有效期，默认1800分钟,3600是一小时
                        .maxAge(3600);
            }
        };
    }
}

package com.yaokui.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MybatisPlusConfig {

    /**
     * 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }

}

package com.yaokui.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.service.VendorExtension;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

import java.util.ArrayList;

/**
 *
 * @Return
 * @Author: 19649
 * @Date: 2023/4/12 19:08
 */

@Configuration
@EnableSwagger2
//@EnableWebMvc
public class SwaggerConfig {
   @Bean
    public Docket productApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .groupName("FIVEGROUP")
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.yaokui.controller"))  //只为com.yaokui.controller包下的controller生生接口文档
                .build();
    }

    private ApiInfo apiInfo(){
        Contact DEFAULT_CONTACT = new Contact("FIVEGROUP"
                , "https://gitee.com/seventeens/springbootswagger.git"
                , "1964994963@qq.com");

        return new ApiInfo("FIVEGROUP学生系统系统API"
                , "FIVEGROUP学生系统系统API"
                , "3.1.1"
                , "https://www.nowcoder.com/exam/intelligent?questionJobId=10&tagId=21000",
                DEFAULT_CONTACT
                , "AAA网络科技有限公司"
                , "https://blog.csdn.net/weixin_52962125/article/details/130097963"
                , new ArrayList<VendorExtension>());
    }

   /* private ApiInfo apiInfo() {
        //Contact DEFAULT_CONTACT = new Contact("five","www.google.com","1964994963@qq.com");
        return new ApiInfoBuilder()
                .title("swagger和springBoot整合")
                .description("swagger的API文档")
                .version("2.0")
                .termsOfServiceUrl("www.baidu.com")
                .build();
    }*/

}

controller层的代码

package com.yaokui.controller;

import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.yaokui.domain.entry.User;
import com.yaokui.domain.vo.UserVo;
import com.yaokui.mapper.UserMapper;
import com.yaokui.service.ClassesService;
import com.yaokui.service.UserService;
import com.yaokui.utils.ReturnData;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 *@ClassName UserController
 *@Description TODO
 *@Author 19649
 *@Date 2023/4/12 18:15
 */
@RestController
@Api(tags = "学生接口类")
@CrossOrigin
public class UserController {

    @Autowired
    private UserService userService;

    @Autowired
    private UserMapper userMapper;
    @Autowired
    private ClassesService classesService;
    //分页查询

    @ApiOperation(value = "查询所有学生信息")
    @PostMapping("getAll")
    public ReturnData getAll(
          //@ApiParam(name ="page" ,value = "当前页面",required = true,defaultValue = "1")
         // @PathVariable  Integer page,
          //@ApiParam(name ="pageSize" ,value = "每页条数",required = true,defaultValue = "6")
         // @PathVariable Integer pageSize,
          @RequestBody UserVo userVo
            ){
        //System.out.println(userVo);
        return userService.selectUserByPage(userVo);
    }
    //根据id进行查询
    @GetMapping("selectUserById/{id}")
    @ApiOperation(value = "根据id查询学生信息")
    public ReturnData selectUserById(@PathVariable Integer id){

        return userService.selectOne(id);
        //return new ReturnData(200,"根据id查询成功",this.userMapper.selectById(id));
    }
    //新增学生信息
    @PostMapping("insertUser")
    @ApiOperation(value = "新增学生信息")
    public ReturnData insertUser(@RequestBody User user){
        /*User user1=new User();
        user1.setUsername(user.getUsername());
        user1.setName(user.getName());
        user1.setAge(user.getAge());
        user1.setEmail(user.getEmail());
        user1.setPassword(user.getPassword());
        user1.setCid(user.getCid());*/
        return new ReturnData(200,"新增成功",this.userMapper.insert(user));
    }
    //修改学生信息
    @PostMapping("/updateUser")
    @ApiOperation(value = "修改学生信息")
    public ReturnData updateUser(@RequestBody User user){
        /*User user1=new User();
        user1.setUsername(user.getUsername());
        user1.setName(user.getName());
        user1.setAge(user.getAge());
        user1.setEmail(user.getEmail());
        user1.setPassword(user.getPassword());
        user1.setCid(user.getCid());*/
        UpdateWrapper<User> query =new UpdateWrapper<>();
        query.eq("id",user.getId());
        return new ReturnData(200,"修改成功",this.userMapper.update(user,query));
    }
    //删除学生信息
    @DeleteMapping("deleteUser/{id}")
    @ApiOperation(value = "删除学生信息")
    public ReturnData deleteUser(@PathVariable Integer id){

        return new ReturnData(200,"删除成功",this.userMapper.deleteById(id));
    }


    @ApiOperation(value = "查询班级下拉")
    @GetMapping("selectClassesName")
    public ReturnData selectClassesName(){
        return classesService.queryAllClasses();
    }
    //批量删除
    @ApiOperation(value = "批量删除")
    @PostMapping("deleteMatch")
    public ReturnData deleteMatch(@RequestBody List<User> user){
        return userService.deleteMatch(user);
    }

}

domain层类分为后端实体类（entry）和前端参数类（vo）

entry

package com.yaokui.domain.entry;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;

/**
 *
 * @Return
 * @Author: 19649
 * @Date: 2023/4/12 19:08
 */

@ApiModel("班级实体")
public class Classes {

  @ApiModelProperty("班级号")
  @TableId(type = IdType.AUTO)
  private long cid;
  @ApiModelProperty("班级名称")
  private String cname;
  @ApiModelProperty("容纳人数")
  private long capacity;


  public long getCid() {
    return cid;
  }

  public void setCid(long cid) {
    this.cid = cid;
  }


  public String getCname() {
    return cname;
  }

  public void setCname(String cname) {
    this.cname = cname;
  }


  public long getCapacity() {
    return capacity;
  }

  public void setCapacity(long capacity) {
    this.capacity = capacity;
  }

}

package com.yaokui.domain.entry;

import com.baomidou.mybatisplus.annotation.*;
import com.yaokui.domain.vo.PageEntity;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.ToString;
/**
 *
 * @Return
 * @Author: yaokui
 * @Date: 2023/4/12 19:29
 */
@ToString
@Data
@ApiModel("学生实体")
public class User {

  @ApiModelProperty("学生编号")
  @TableId(type = IdType.AUTO)
  private Integer id;
  @ApiModelProperty("用户名")
  private String username;

  @TableField(select = false,fill = FieldFill.INSERT)//插入数据时进行填充
  private String password;
  @ApiModelProperty("姓名")
  private String name;

  @ApiModelProperty("年龄")
  private Integer age;
  @ApiModelProperty("邮箱")
  private String email;

  @ApiModelProperty("修改版本号")
  @Version
  private String version;

  @ApiModelProperty("逻辑删除")
  @TableLogic//逻辑删除 0表示未删除  1表示已删除
  private long deleted;

  @ApiModelProperty("班级编号")
  private Integer cid;

  @TableField(exist = false)
  private Classes classes;


}

vo

package com.yaokui.domain.vo;/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/12  22:20
 */

import lombok.Data;

/**
 *@ClassName PageEntity
 *@Description TODO
 *@Author 19649
 *@Date 2023/4/12 22:20
 */
@Data
public class PageEntity {
    private int pageSize;
    private int pageIndex;

    public int getPageSize() {
        if(pageSize==0){
            pageSize = 5;
        }
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        if(pageSize==0){
            this.pageSize = 5;
            return;
        }
        this.pageSize = pageSize;
    }

    public int getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
        this.pageIndex = pageIndex;
    }
}

package com.yaokui.domain.vo;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

/**
 *@ClassName UserVo
 *@Description  前端参数接口
 *@Author 19649
 *@Date 2023/4/12 18:26
 */
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor

@ApiModel(value = "接受学生的请求参数")
public class UserVo extends PageEntity  {

    @ApiModelProperty("用户名")
    private String username;

    @ApiModelProperty("姓名")
    private String name;

    /*@ApiModelProperty("年龄")
    private Integer age;*/
    @ApiModelProperty("邮箱")
    private String email;

}

mapper接口层

package com.yaokui.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.yaokui.domain.entry.Classes;

/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/14  21:06
 */
public interface ClaaaesMapper extends BaseMapper<Classes> {
}

package com.yaokui.mapper;


import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.yaokui.domain.entry.User;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import org.apache.ibatis.annotations.Param;

/**
 *@ClassName UserMapper
 *@Description TODO
 *@Author 19649
 *@Date 2023/4/12 19:24
 */
public interface UserMapper extends BaseMapper<User> {
    IPage<User> selectUserByPage(IPage<User> iPage,@Param("ew") Wrapper<User> wrapper);
}

service层分为接口和接口的实现类

接口

package com.yaokui.service;

import com.yaokui.utils.ReturnData;

/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/14  21:15
 */
public interface ClassesService {
    ReturnData queryAllClasses();
}

package com.yaokui.service;

import com.yaokui.domain.entry.User;
import com.yaokui.domain.vo.PageEntity;
import com.yaokui.domain.vo.UserVo;
import com.yaokui.utils.ReturnData;

import java.util.List;

/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/12  18:13
 */
public interface UserService {

    ReturnData selectUserByPage(UserVo userVo);

    ReturnData selectOne(Integer id);

    //批量删除
    ReturnData deleteMatch(List<User> user);

}

实现类

package com.yaokui.service.impl;/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/14  21:16
 */

import com.yaokui.domain.entry.Classes;
import com.yaokui.mapper.ClaaaesMapper;
import com.yaokui.service.ClassesService;
import com.yaokui.utils.ReturnData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 *@ClassName ClassesServiceImpl
 *@Description TODO
 *@Author 19649
 *@Date 2023/4/14 21:16
 */
@Service
public class ClassesServiceImpl implements ClassesService {
    @Autowired
    private ClaaaesMapper claaaesMapper;
    @Override
    public ReturnData queryAllClasses() {
        List<Classes> classes = claaaesMapper.selectList(null);

        return new ReturnData(200,"查询全部班级成功",classes);
    }
}

package com.yaokui.service.impl;

import cn.hutool.core.convert.Convert;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.google.common.base.Converter;
import com.yaokui.domain.entry.User;
import com.yaokui.domain.vo.UserVo;
import com.yaokui.mapper.UserMapper;
import com.yaokui.service.UserService;
import com.yaokui.utils.ReturnData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;

import java.util.List;
import java.util.stream.Collectors;

/**
 *@ClassName UserServiceImpl
 *@Description
 *@Author 19649
 *@Date 2023/4/12 18:09
 */

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public ReturnData selectOne(Integer id) {
        User user = userMapper.selectOne(new QueryWrapper<User>().lambda().eq(User::getId, id));
        return new ReturnData(200,"success",user);
    }
    /**
     * 批量删除
     * @Param user
     * @Return
     * @Author: 19649
     * @Date: 2023/4/15 16:10
     */
    @Override
    public ReturnData deleteMatch(List<User> user) {
        //User::getId
        List<Integer> collect = user.stream().map(a ->a.getId()).collect(Collectors.toList());
        int i = userMapper.deleteBatchIds(collect);
        System.out.println(i);
        if(i>0){
            return new ReturnData(200,"批量删除成功",null);
        }else {
            return new ReturnData(500,"批量删除失败",null);
        }

    }





    //多表分页查询
    @Override
    public ReturnData selectUserByPage(UserVo userVo) {

        IPage<User> iPage=new Page<>(userVo.getPageIndex(),userVo.getPageSize());
        LambdaQueryWrapper<User> queryWrapper = new QueryWrapper<User>().lambda();

        //判断用户名是否为空
        if(StringUtils.hasText(userVo.getUsername())){
            //wrapper.like("username",userVo.getUsername());
            queryWrapper.like(User::getUsername,userVo.getUsername());
        }
        //判断用户名是否为空
        if(StringUtils.hasText(userVo.getName())){
            queryWrapper.like(User::getName,userVo.getName());
        }
       /* //判断用户名是否为空
        if(userVo.getAge()!=null){
            queryWrapper.eq(User::getAge,userVo.getAge());
        }*/
        //判断用户名是否为空
        if(StringUtils.hasText(userVo.getEmail())){
            queryWrapper.like(User::getEmail,userVo.getEmail());
        }
        this.userMapper.selectUserByPage(iPage,queryWrapper);
        //this.userMapper.selectPage(iPage,wrapper);
        return new ReturnData(200,"分页查询成功",iPage);
    }
}

工具类util

package com.yaokui.utils;/**
 * 功能描述
 *
 * @author 19649
 * @date 2023/04/12  18:25
 */

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

/**
 *@ClassName ReturnData
 *@Description json
 *@Author 19649
 *@Date 2023/4/12 18:25
 */

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class ReturnData {
    private Integer code;
    private String msg;
    private Object data;
}

启动类

package com.yaokui;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan(basePackages = "com.yaokui.mapper")
public class SpringbootswaggerApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootswaggerApplication.class, args);
    }

}

前端代码

目录展示

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="userSearch" class="demo-form-inline">

        <el-form-item label="用户名">
            <el-input v-model="userSearch.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="userSearch.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="userSearch.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
        </el-form-item>
    </el-form>
    <!--添加学生-->
    <el-form>
        <el-form-item>
            <el-button type="primary" @click="addUser">添加学生信息</el-button>
            <el-button type="danger" @click="deleteMatch">批量删除</el-button>
        </el-form-item>
    </el-form>


    <el-table
            :data="tableData"
            border

            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">

        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名"
        width="150px">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="150px">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="150px">
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱"
                width="230px">
        </el-table-column>

        <el-table-column
                prop="classes.cname"
                label="班级名称"
                width="200px">
        </el-table-column>
        <el-table-column
                prop="classes.capacity"
                label="容纳人数"
                width="150px">
        </el-table-column >


        <el-table-column
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delUser(scope.row)"></el-button>

            </template>
        </el-table-column>

    </el-table>
    <div class="block">

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <el-dialog
            :title=this.titleName
            :visible.sync="dialogVisible" :before-close="cancelUser"
            width="30%" >
        <!--修改的表单-->
        <el-form ref="form" :model="editUserForm" label-width="80px">
             <el-form-item label="编号" v-show="false">
            <el-input v-model="editUserForm.id" ></el-input>
        </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="editUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="editUserForm.password"></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="editUserForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editUserForm.age"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editUserForm.email"></el-input>
            </el-form-item>

            <el-form-item label="所在班级">
                <el-select  v-model="editUserForm.cid" placeholder="请选择">
                    <el-option v-for="item in classList"
                               :key="item.cid"
                               :label="item.cname"
                               :value="item.cid" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancelUser">取 消</el-button>
                <el-button type="primary" @click="btn(editUserForm)">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

</body>
<script>
    var app=new Vue({
        el:"#app",

        data:{
            titleName:"",
            //visible: false,
            //多选框
            multipleSelection: [],
            dialogVisible: false,//弹出层
            editUserForm:{},//修改
            classList:[],//所有班级
            tableData: [],
            userSearch:{},//查询条件
            total:0,
        },

        created(){
            this.initTable();
            this.getAllClass();
        },

        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex%2 === 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
                return '';
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.userSearch.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.userSearch.pageIndex=val;
                this.initTable();

            },

            //分页查询
            initTable(){
                axios.post("http://localhost:8080/getAll",this.userSearch).then(result=> {
                    //console.log(result)
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                });
            },

            //查询班级下拉
            getAllClass(){
                axios.get("http://localhost:8080/selectClassesName").then(res=> {
                    //console.log(res)
                    this.classList=res.data.data;
                    //console.log(this.classList)
                });
            },


            //删除
            delUser(row){
                //console.log(row);
                var id=row.id;
                axios.delete("http://localhost:8080/deleteUser/"+id).then(result=> {
                    if(result.data.code===200){
                        this.$message.success("删除成功")
                        this.initTable();
                    }else {
                        this.$message.error("删除失败")
                        this.initTable();
                    }
                });
            },

            //修改学生信息
            editUser(row){
                this.titleName= "修改"
             this.dialogVisible=true;
             this.editUserForm=row;
            },

            btn(editUserForm){
                console.log(editUserForm)
                var url = "";
                var message = "";
                if(editUserForm.id !=undefined){
                    url = "http://localhost:8080/updateUser"
                    message = "修改成功"
                }else {
                    url = "http://localhost:8080/insertUser"
                    message = "添加成功"
                }
                axios.post(url,this.editUserForm).then(result=> {
                    if(result.data.code===200){
                        this.dialogVisible=false;
                        this.$message.success(message)

                        this.initTable();
                    }else {
                        this.$message.error("操作失败")
                        this.initTable();
                    }
                });
                this.editUserForm = {}
            },


            //批量删除
            deleteMatch(){
                axios.post("http://localhost:8080/deleteMatch",this.multipleSelection).then(res=>{
                    console.log(res)
                    if(res.data.code===200){
                        this.$message.success("批量删除成功")
                        this.initTable();
                    }else {
                        this.$message.error("删除失败")
                        this.initTable();
                    }
                });
            },
            //获取表格被选中的项
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //添加学生信息
            addUser(){
                this.titleName= "添加"
                this.dialogVisible=true;
            },

            //取消事件
            cancelUser(){
                this.editUserForm = {}
                this.dialogVisible=false;
            },



        }


    })
</script>
</html>