SpringBoot+mybatisPlus+Vue项目演示(班级和学生为例)
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>
更多推荐
已为社区贡献1条内容
所有评论(0)