效果图1：
效果图2：
后端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>
<groupId>com.fh</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<spring-boot.version>2.3.7.RELEASE</spring-boot.version>
</properties>
<dependencies>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity-engine-core</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.31</version>
</dependency>
<dependency>
<groupId>com.ibeetl</groupId>
<artifactId>beetl</artifactId>
<version>3.3.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
<version>2.3.4.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.3.4.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--pageHelper分页-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.13</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.3.7.RELEASE</version>
<configuration>
<mainClass>com.fh.DemoApplication</mainClass>
</configuration>
<executions>
<execution>
<id>repackage</id>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
在Controller控制器代码
package com.dd.controller;
import com.dd.entity.Drug;
import com.dd.service.DrugService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/drug")
@CrossOrigin
public class DrugController {
@Autowired
private DrugService drugService;
//查询数据
@RequestMapping("queryDrug")
public PageInfo queryDrug(Integer currentPage, Integer pageSize) {
//调用PageHelper.startPage()
PageHelper.startPage(currentPage,pageSize);
//查询数据
List<Drug>drugList=drugService.queryDrug();
//将数据返回前端
PageInfo pageInfo=new PageInfo(drugList);
return pageInfo;
// return drugService.queryDrug();
}
//新增
@RequestMapping("addDrug")
public void addDrug(Drug drug) {
drugService.addDrug(drug);
}
//删除
@RequestMapping("deleteDrug")
public void deleteDrug(Integer id) {
drugService.deleteDrug(id);
}
//回显
@RequestMapping("queryDurgById")
public Drug queryDurgById(Drug drug) {
return drugService.queryDurgById(drug);
}
//修改
@RequestMapping("updateDrug")
public void updateDrug(Drug drug) {
drugService.updateDrug(drug);
}
}
在ServiceImpl中代码：修改复选框是分割一下
@Override
public void updateDrug(Drug drug) {
if(StringUtils.isNotBlank(drug.getPerson())){
String[] split = drug.getPerson().split(",");
for (String arr : split) {
drug.setPerson(arr);
}
}
drugMapper.updateById(drug);
}
App.Vue代码：
<template>
<div id="app">
<!--操作按钮-->
<el-button type="primary" round @click="openAdd('form')" icon="el-icon-circle-plus-outline"> 新增</el-button>
<el-button type="danger" round icon="el-icon-delete" @click="openAelete(multipleSelection)" :disabled="this.multipleSelection.length === 0">批量删除</el-button>
<!--
查询数据列表
-->
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" v-show="tableData.length>0">
<el-table-column type="selection" width="55" fixed label="#"></el-table-column>
<el-table-column fixed prop="id" label="序号" >
<!--如果想要对当前字段进行转换，需要用到template-->
<template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>
<el-table-column prop="username" label="用户名称" width="120"><template slot-scope="scope">{{ scope.row.username }}</template></el-table-column>
<el-table-column prop="realName" label="真实姓名" width="120"><template slot-scope="scope">{{ scope.row.userPrice }}</template></el-table-column>
<el-table-column prop="sex" label="性别" show-overflow-tooltip width="100">
<template slot-scope="scope">{{scope.row.sex == null ? "" : scope.row.sex == 1?"男":"女"}}</template>
</el-table-column>
<el-table-column prop="hobby" label="爱好" show-overflow-tooltip width="210">
<template slot-scope="scope">{{scope.row.hobby == null?"":scope.row.hobby.toString().replace("1","唱歌").replace("2","吃饭").replace("3","游泳").replace("4","健身").replace("5","跑步").replace("6","玩手机")}}</template>
</el-table-column>
<el-table-column prop="areaName" label="地区" width="120"></el-table-column>
<el-table-column prop="birthday" label="出生时间" width="200"><template slot-scope="scope">{{ scope.row.birthday }}</template></el-table-column>
<el-table-column prop="createtime" label="创建时间" width="200"><template slot-scope="scope">{{ scope.row.createtime }}</template></el-table-column>
<el-table-column prop="updatetime" label="修改时间" width="200" ><template slot-scope="scope">{{ scope.row.updatetime }}</template></el-table-column>
<el-table-column prop="userimg" label="图片" show-overflow-tooltip >
<template slot-scope="scope" ><img :src="scope.row.userimg" width="50" ></template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
<el-button type="text" size="small" @click="upda(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="1"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<!--新增表单-->
<el-dialog title="用户数据" :visible.sync="dialogFormVisible" @close="close1('form')">
<el-form ref="form" :rules="rules" :model="form" label-width="80px" >
<el-form-item label="用户名称" prop="username" style="width: 400px"><el-input v-model="form.username"></el-input></el-form-item>
<el-form-item label="真实姓名" prop="realName" style="width: 400px"><el-input v-model="form.realName"></el-input></el-form-item>
<el-form-item label="性别" prop="sex" style="width: 200px"><el-radio-group v-model="form.sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好" prop="hobby" style="width: 560px">
<el-checkbox-group v-model="form.hobby">
<el-checkbox label="1" name="hobby">唱歌</el-checkbox>
<el-checkbox label="2" name="hobby">吃饭</el-checkbox>
<el-checkbox label="3" name="hobby">游泳</el-checkbox>
<el-checkbox label="4" name="hobby">健身</el-checkbox>
<el-checkbox label="5" name="hobby">跑步</el-checkbox>
<el-checkbox label="6" name="hobby">玩手机</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="出生地区" prop="areaId" style="width: 300px">
<el-select v-model="form.areaId" placeholder="请选择地区">
<el-option :label="area.areaName" :value="area.areaId" v-for="area in areaList"></el-option>
</el-select>
</el-form-item>
<el-form-item label="生产日期" prop="birthday" style="width: 300px">
<el-date-picker
v-model="form.birthday" value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="用户图片" prop="imageUrl" style="width: 300px">
<el-upload
ref="upload"
:on-success="handleAvatarSuccess"
class="avatar-uploader"
action="http://localhost:8080/file/uploadPhoto"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button v-if="aaa" type="primary" @click="add('form')">新增</el-button>
<el-button v-if="bbb" type="primary" @click="update1('form')">修改</el-button>
<el-button @click="cancel('form')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
name:'App',
created(){
//初始化方法
this.queryUser();
this.queryArea();
},
data(){
return {
// token:localStorage.setItem("token"),
fileList: [], //文件列表
imageUrl:"",
tableData:[],
areaList:null,
currentPage: 1, // 当前页数
total:0, // 总页数
pageSize:5, // 每页显示多少条
brandList:null,
//复选框默认
multipleSelection: [],
dialogFormVisible: false,
form:{
areaId:null,
imageUrl:"",
username:"",
realName:"",
sex:null,
hobby:[],
birthday:"",
userimg:"",
img:"" //用于删除老图片
},
aaa:true,
bbb:false,
rules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
realName: [
{ required: true, message: '请输入真实名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
birthday: [
{validator: this.birthday, required: true, message: '请选择日期', trigger: 'change' }
],
hobby: [
{type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
],
sex: [
{ required: true, message: '请选择', trigger: 'change' }
]
}
}
},
methods:{
//查询列表
queryUser:function () {
var _this = this;
this.$axios.get("http://localhost:8080/user/users?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (result) {
_this.tableData = result.data.data.list;
_this.total=result.data.data.total;
})
},
//查询地区列表
queryArea(){
var _this = this;
this.$axios.get("http://localhost:8080/area/areas").then(function (result) {
_this.areaList = result.data.data;
})
},
//新增
add(form){
var _this = this;
_this.aaa=true;
_this.bbb=false;
this.$refs[form].validate((valid) => {
if (valid) {
this.form.hobby=this.form.hobby.toString();
//this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令 nqm install qs
this.$axios.post("http://localhost:8080/user/users",this.$qs.stringify(this.form)).then(function () {
_this.$message.success("新增成功")
_this.dialogFormVisible=false;
_this.queryUser();
}).catch(function () {
_this.$message.success("新增失败")
})
} else {
return false;
}
}
)
}
,
//新增弹框
openAdd(form){
this.dialogFormVisible=true;
},
//清空表单数据
close1(form){
this.$refs[form].resetFields()
//清空图片数据
this.imageUrl = "";
this.form.username="";
this.form.realName="";
this.form.sex="";
this.form.hobby="";
this.form.birthday="";
this.form.areaId="";
},
//弹框取消
cancel: function (form) {
this.dialogFormVisible = false;
//清空图片数据
this.imageUrl = "";
},
//回显
upda(row) {
var _this = this;
_this.aaa=false;
_this.bbb=true;
//回显数据
this.form=row;
//回显复选框
let arr=row.hobby.toString().split(",");
this.form.hobby=arr;
//回显图片
this.imageUrl=row.userimg;
//回显图片删除老图片
this.form.img=row.userimg;
//打开弹框
_this.dialogFormVisible=true;
},
//修改
update1:function (form) {
var _this = this;
this.$refs[form].validate((valid) => {
if (valid) {
this.form.hobby=this.form.hobby.toString();
//this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令 nqm install qs
this.$axios.put("http://localhost:8080/user/users",this.$qs.stringify(this.form)).then(function () {
_this.$message.success("修改成功")
_this.queryUser();
_this.dialogFormVisible=false;
}).catch(function () {
_this.$message.success("修改失败")
})
} else {
return false;
}
}
)
}
,
//删除
del(row){
var _this = this;
var id=row.id;
//删除图片
var img=row.userimg;
if (confirm("您确定要删除吗？")){
this.$axios.delete("http://localhost:8080/user/users?id="+id+"&img="+img).then(function () {
_this.$message.success("删除成功")
// 删除最后一页数据跳转回上一页
const totalPage = Math.ceil((_this.total -1 ) / _this.pageSize) // 总页数
_this.currentPage = _this.currentPage > totalPage ? totalPage : _this.currentPage
_this.currentPage = _this.currentPage < 1 ? 1 : _this.currentPage
_this.queryUser();
}).catch(function () {
_this.$message.success("删除失败")
})
}
},
//批量删除
openAelete(row){
var _this = this;
var ids = [];
var userimgs=[];
row.forEach(element =>{
ids.push(element.id);
userimgs.push(element.userimg);
})
this.$confirm('确定删除这'+row.length+'条数据吗？','提示').then(() =>{
this.$axios.post("http://localhost:8080/user/deleteBachUser?ids="+ids+"&userimgs="+userimgs.toString()).then(dara =>{
_this.$message.success("删除成功")
// 批量删除最后一页数据跳转回上一页
const totalPage = Math.ceil((this.total - this.multipleSelection.length) / this.pageSize) // 剩余数据总页数
this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
_this.queryUser();
})
}).catch(()=>{
_this.$message.success("删除失败")
})
},
//文件上传服务端成功时的钩子
handleAvatarSuccess(res, file) {
//新增图片
this.form.userimg=res.filePath;
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleSelectionChange(val) {
//被选中的行组成数组
this.multipleSelection = val;
}
,
//每页条数
handleSizeChange(val){
this.pageSize=val;
this.queryUser();
},
//当前页
handleCurrentChange(val){
this.currentPage=val;
this.queryUser();
},
}
}
</script>
<style>
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
.el-table th.gutter{
display: table-cell!important;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
main.js代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引用
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import QS from 'qs'
Vue.config.productionTip = false
Vue.prototype.$axios= axios
Vue.prototype.$qs= QS
//使用
Vue.use(VueAxios,axios)
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
