前端搭建：
<template>
<div>
<div>
<el-input style="width: 200px" placeholder="请输入用户名" suffix-icon="el-icon-search"
v-model="username"></el-input>
<el-input style="width: 200px;margin-left: 5px" placeholder="请输入昵称" suffix-icon="el-icon-search"
v-model="nickname"></el-input>
<el-input style="width: 200px;margin-left: 5px" placeholder="请输入电话" suffix-icon="el-icon-search"
v-model="phone"></el-input>
<el-button style="margin: 5px; color: cadetblue" @click="load">搜索</el-button>
<el-button style="margin-left: 0px; color: #c5b8a5" @click="reset">重置</el-button>
</div>
<div style="margin: 10px 0">
<el-button style="color: cadetblue" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
<el-popconfirm
style="margin-left: 10px"
confirm-button-text='确定'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="#a27e7e"
title="您确定批量删除这些数据吗？"
@confirm="handleDeleteBatch"
>
<el-button style="color: #cd5c5c" slot="reference" >批量删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
<!-- <el-button style="color: cadetblue; margin-left: 10px">导入<i class="el-icon-bottom"></i></el-button>-->
<!-- <el-button style="color: cadetblue; margin-left: 10px">导出<i class="el-icon-top"></i></el-button>-->
</div>
<el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="65px"></el-table-column>
<el-table-column prop="username" label="用户名"width="150px"></el-table-column>
<el-table-column prop="role" label="角色">
<template slot-scope="scope">
<el-tag type="primary" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
<el-tag type="warning" v-if="scope.row.role === 'ROLE_USER'">普通用户</el-tag>
</template>
</el-table-column>
<el-table-column prop="password" label="密码"></el-table-column>
<el-table-column prop="nickname" label="昵称" width="120px"></el-table-column>
<el-table-column prop="phone" label="电话" width="100px"></el-table-column>
<el-table-column prop="sex" label="性别" width="50px"></el-table-column>
<el-table-column prop="profilepic" label="头像"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="操作" width="170px">
<template slot-scope="scope">
<el-button style="color: cornflowerblue" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
<el-popconfirm
style="margin-left: 8px"
confirm-button-text='确定'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="#a27e7e"
title="您确定删除吗？"
@confirm="handleDelete(scope.row.id)"
>
<el-button style="color: indianred" slot="reference">删除 <i class = "el-icon-delete"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="padding: 10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
<el-form label-width="60px" size="small">
<el-form-item label="用户名:">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
<el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="昵称:">
<el-input v-model="form.nickname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电话:">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别:">
<el-input v-model="form.sex" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="头像:">
<el-input v-model="form.profilepic" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button style="color: lightcoral" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import request from "../utils/request";
export default {
name: "User",
data(){
return{
username: "",
nickname: "",
phone: "",
tableData: [],
total: 0,
pageNum: 1,
pageSize: 5,
dialogFormVisible: false,
multipleSelection: [],
form: {},
roles: [],
}
},
created() {
this.load()
},
methods:{
handleSizeChange(pageSize) {
console.log(`每页 ${pageSize} 条`);
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
console.log(`当前页: ${pageNum}`);
this.pageNum = pageNum
this.load()
},
load() {
// 请求分页查询
request.get("/user/findPageByUsername", {
params: {
PageNum: this.pageNum,
PageSize: this.pageSize,
username: this.username,
nickname: this.nickname,
phone: this.phone
}
}).then(res => {
console.log(res)
if (res.data !== null) {
this.tableData = res.data.list
this.total = res.data.total
} else {
this.$message.warning("没有搜索结果！")
}
})
request.get("/role").then(res => {
this.roles = res.data
})
},
save() {
request.post("/user", this.form).then(res => {
if (res) {
this.$message.success("保存成功!")
this.dialogFormVisible = false
this.load()
} else {
this.$message.error("保存失败!")
}
})
},
handleAdd() {
this.dialogFormVisible = true
this.form = {}
this.load()
},
handleEdit(row){
this.form = row
this.dialogFormVisible = true
},
handleDelete(id){
request.delete("/user/" + id).then(res => {
if (res) {
this.$message.success("删除成功!")
this.load()
} else {
this.$message.error("删除失败!")
}
})
},
handleSelectionChange(val){
this.multipleSelection = val
},
handleDeleteBatch(){
let ids = this.multipleSelection.map(v => v.id)
if(ids.length === 0){
this.$message.error("请选择要删除的数据!")
}else {
request.post("/user//del/batch", ids).then(res => {
if (res) {
this.$message.success("批量删除成功!")
this.load()
} else {
this.$message.error("批量删除失败!")
}
})
}
},
reset() {
this.username = ""
this.nickname = ""
this.phone = ""
this.load()
},
}
}
</script>
<style scoped>
.v-application ul, .v-application ol {
padding-left: 0 !important;
}
</style>
后端实现：
UserController:
package com.example.springboot.controller;
import com.example.springboot.common.Constants;
import com.example.springboot.common.Page;
import com.example.springboot.entity.Follow;
import org.springframework.web.bind.annotation.*;
import com.example.springboot.common.Result;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.springboot.service.IUserService;
import com.example.springboot.entity.User;
import org.springframework.web.bind.annotation.RestController;
/**
* <p>
* 前端控制器
* </p>
*
* @author author
* @since 2022-03-28
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private IUserService userService;
// 新增或者更新
@PostMapping
public Result save(@RequestBody User user) {
return Result.success(userService.saveOrUpdate(user));
}
//根据id删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
return Result.success(userService.removeById(id));
}
//根据id批量删除
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids) {
return Result.success(userService.removeByIds(ids));
}
//查找所有
@GetMapping
public Result findAll() {
return Result.success(userService.list());
}
//根据id查找
@GetMapping("/{id}")
public Result findOne(@PathVariable Integer id) {
return Result.success(userService.getById(id));
}
//根据用户名、昵称、电话分页查询
@GetMapping("/findPageByUsername")
public Result findPageByUsername(@RequestParam(defaultValue = "1") int PageNum,
@RequestParam(defaultValue = "5") int PageSize,
@RequestParam(defaultValue = "") String username,
@RequestParam(defaultValue = "") String nickname,
@RequestParam(defaultValue = "") String phone) {
Page page = new Page();
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.like("username",username);
queryWrapper.like("nickname",nickname);
queryWrapper.like("phone",phone);
List<User> list = userService.list(queryWrapper);
if(list.isEmpty()) {
return Result.error(Constants.CODE_600,null);
}
return Result.success(page.startPageUser(list,PageNum,PageSize));
}
}
