创建用户信息表
CREATE TABLE `user` (
`id` int(10) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '账号',
`password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
`name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '姓名',
`avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
`role` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
`phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '电话',
`email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户信息表';
Entity
public class User extends Account {
private Integer id;
private String username;
private String password;
private String name;
private String avatar;
private String role;
private String phone;
private String email;
}
Mapper
public interface UserMapper {
int insert(User user);
void updateById(User user);
void deleteById(Integer id);
@Select("select * from `user` where id = #{id}")
User selectById(Integer id);
@Select("select * from `user` where username = #{username}")
User selectByUsername(String username);
List<User> selectAll(User user);
}
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.UserMapper">
<select id="selectAll" resultType="com.example.entity.User">
select * from `user`
<where>
<if test="name != null"> and name like concat('%', #{name}, '%')</if>
</where>
</select>
<delete id="deleteById">
delete from `user`
where id = #{id}
</delete>
<!-- insert into user (username, password, ...) values ('user', 'user', ...) -->
<insert id="insert" parameterType="com.example.entity.User" useGeneratedKeys="true">
insert into `user`
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">id,</if>
<if test="username != null">username,</if>
<if test="password != null">password,</if>
<if test="name != null">name,</if>
<if test="phone != null">phone,</if>
<if test="email != null">email,</if>
<if test="avatar != null">avatar,</if>
<if test="role != null">role,</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null">#{id},</if>
<if test="username != null">#{username},</if>
<if test="password != null">#{password},</if>
<if test="name != null">#{name},</if>
<if test="phone != null">#{phone},</if>
<if test="email != null">#{email},</if>
<if test="avatar != null">#{avatar},</if>
<if test="role != null">#{role},</if>
</trim>
</insert>
<update id="updateById" parameterType="com.example.entity.User">
update `user`
<set>
<if test="username != null">
username = #{username},
</if>
<if test="password != null">
password = #{password},
</if>
<if test="name != null">
name = #{name},
</if>
<if test="phone != null">
phone = #{phone},
</if>
<if test="email != null">
email = #{email},
</if>
<if test="avatar != null">
avatar = #{avatar},
</if>
<if test="role != null">
role = #{role},
</if>
</set>
where id = #{id}
</update>
</mapper>
Service
@Service
public class UserService {
@Resource
private UserMapper userMapper;
public void add(User user) {
User dbUser = userMapper.selectByUsername(user.getUsername());
if (ObjectUtil.isNotNull(dbUser)) {
throw new CustomException(ResultCodeEnum.USER_EXIST_ERROR);
}
if (ObjectUtil.isEmpty(user.getPassword())) {
user.setPassword(Constants.USER_DEFAULT_PASSWORD);
}
if (ObjectUtil.isEmpty(user.getName())) {
user.setName(user.getUsername());
}
user.setRole(RoleEnum.USER.name());
userMapper.insert(user);
}
public void updateById(User user) {
userMapper.updateById(user);
}
public void deleteById(Integer id) {
userMapper.deleteById(id);
}
public void deleteBatch(List<Integer> ids) {
for (Integer id : ids) {
userMapper.deleteById(id);
}
}
public User selectById(Integer id) {
return userMapper.selectById(id);
}
public List<User> selectAll(User user) {
return userMapper.selectAll(user);
}
public PageInfo<User> selectPage(User user, Integer pageNum, Integer pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<User> list = userMapper.selectAll(user);
return PageInfo.of(list);
}
public User login(Account account) {
User dbUser = userMapper.selectByUsername(account.getUsername());
if (ObjectUtil.isNull(dbUser)) {
throw new CustomException(ResultCodeEnum.USER_NOT_EXIST_ERROR);
}
if (!dbUser.getPassword().equals(account.getPassword())) {
throw new CustomException(ResultCodeEnum.USER_ACCOUNT_ERROR);
}
String token = TokenUtils.createToken(dbUser.getId() + "-" + dbUser.getRole(), dbUser.getPassword());
dbUser.setToken(token);
return dbUser;
}
public void updatePassword(Account account) {
User dbUser = userMapper.selectByUsername(account.getUsername());
if (ObjectUtil.isNull(dbUser)) {
throw new CustomException(ResultCodeEnum.USER_NOT_EXIST_ERROR);
}
if (!account.getPassword().equals(dbUser.getPassword())) {
throw new CustomException(ResultCodeEnum.PARAM_PASSWORD_ERROR);
}
dbUser.setPassword(account.getNewPassword());
userMapper.updateById(dbUser);
}
}
Controller
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
@PostMapping("/add")
public Result add(@RequestBody User user) {
userService.add(user);
return Result.success();
}
@PutMapping("/update")
public Result update(@RequestBody User user) {
userService.updateById(user);
return Result.success();
}
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable Integer id) {
userService.deleteById(id);
return Result.success();
}
@DeleteMapping("/delete/batch")
public Result delete(@RequestBody List<Integer> ids) {
userService.deleteBatch(ids);
return Result.success();
}
@GetMapping("/selectById/{id}")
public Result selectById(@PathVariable Integer id) {
User user = userService.selectById(id);
return Result.success(user);
}
@GetMapping("/selectAll")
public Result selectAll(User user) {
List<User> list = userService.selectAll(user);
return Result.success(list);
}
@GetMapping("/selectPage")
public Result selectPage(User user,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
PageInfo<User> pageInfo = userService.selectPage(user, pageNum, pageSize);
return Result.success(pageInfo);
}
}
页面
<template>
<div>
<div class="card" style="margin-bottom: 5px">
<el-input v-model="data.name" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入名称查询"></el-input>
<el-button type="info" plain @click="load">查询</el-button>
<el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-button type="primary" plain @click="handleAdd">新增</el-button>
<el-button type="danger" plain @click="delBatch">批量删除</el-button>
</div>
<div class="card" style="margin-bottom: 5px">
<el-table stripe :data="data.tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="username" label="账号" />
<el-table-column prop="avatar" label="头像">
<template v-slot="scope">
<el-image style="width: 40px; height: 40px; border-radius: 50%; display: block" v-if="scope.row.avatar"
:src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" preview-teleported></el-image>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="role" label="角色" />
<el-table-column prop="phone" label="电话" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作" width="100" fixed="right">
<template v-slot="scope">
<el-button type="primary" circle :icon="Edit" @click="handleEdit(scope.row)"></el-button>
<el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="card" v-if="data.total">
<el-pagination @current-change="load" background layout="prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
</div>
<el-dialog title="管理员信息" v-model="data.formVisible" width="40%" destroy-on-close>
<el-form ref="form" :model="data.form" label-width="70px" style="padding: 20px">
<el-form-item prop="username" label="用户名">
<el-input v-model="data.form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="avatar" label="头像">
<el-upload
:action="baseUrl + '/files/upload'"
:on-success="handleFileUpload"
list-type="picture"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item prop="name" label="姓名">
<el-input v-model="data.form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item prop="phone" label="电话">
<el-input v-model="data.form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input v-model="data.form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="data.formVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL
const data = reactive({
formVisible: false,
form: {},
tableData: [],
pageNum: 1,
pageSize: 10,
total: 0,
name: null,
ids: []
})
const load = () => {
request.get('/user/selectPage', {
params: {
pageNum: data.pageNum,
pageSize: data.pageSize,
name: data.name
}
}).then(res => {
if (res.code === '200') {
data.tableData = res.data?.list || []
data.total = res.data?.total
}
})
}
const handleAdd = () => {
data.form = {}
data.formVisible = true
}
const handleEdit = (row) => {
data.form = JSON.parse(JSON.stringify(row))
data.formVisible = true
}
const add = () => {
request.post('/user/add', data.form).then(res => {
if (res.code === '200') {
ElMessage.success('操作成功')
data.formVisible = false
load()
} else {
ElMessage.error(res.msg)
}
})
}
const update = () => {
request.put('/user/update', data.form).then(res => {
if (res.code === '200') {
ElMessage.success('操作成功')
data.formVisible = false
load()
}
})
}
const save = () => {
data.form.id ? update() : add()
}
const del = (id) => {
ElMessageBox.confirm('删除后数据无法恢复,您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {
request.delete('/user/delete/' + id).then(res => {
if (res.code === '200') {
ElMessage.success("删除成功")
load()
} else {
ElMessage.error(res.msg)
}
})
}).catch(err => {
console.error(err)
})
}
const delBatch = () => {
if (!data.ids.length) {
ElMessage.warning("请选择数据")
return
}
ElMessageBox.confirm('删除后数据无法恢复,您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {
request.delete("/user/delete/batch", {data: data.ids}).then(res => {
if (res.code === '200') {
ElMessage.success('操作成功')
load()
} else {
ElMessage.error(res.msg)
}
})
}).catch(err => {
console.error(err)
})
}
const handleSelectionChange = (rows) => {
data.ids = rows.map(v => v.id)
}
const handleFileUpload = (res) => {
data.form.avatar = res.data
}
const reset = () => {
data.name = null
load()
}
load()
</script>