11. 顾客信息管理
user表
CREATE TABLE `user` (
`id` int(11) 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 '角色',
`sex` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '性别',
`phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机号',
`account` decimal(10,2) DEFAULT '0.00' COMMENT '账户余额',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户信息';
404问题?
接口写错了
没重启后台
后台
UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.UserMapper">
<insert id="insert">
insert into user (username, password, name, avatar, role, sex, phone)
values (#{username}, #{password}, #{name}, #{avatar}, #{role}, #{sex}, #{phone})
</insert>
<update id="updateById">
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="avatar != null"> avatar = #{avatar}, </if>
<if test="role != null"> role = #{role}, </if>
<if test="sex != null"> sex = #{sex}, </if>
<if test="phone != null"> phone = #{phone}, </if>
<if test="account != null"> account = #{account}, </if>
</set>
where id = #{id}
</update>
<delete id="deleteById">
delete from user where id = #{id}
</delete>
<select id="selectAll" resultType="com.example.entity.User">
select * from user
<where>
<if test="name != null">
name like concat('%', #{name}, '%')
</if>
</where>
order by id desc
</select>
</mapper>
UserMapper
package com.example.mapper;
import com.example.entity.User;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface UserMapper {
@Select("select * from user where username = #{username}")
User selectByUsername(String username);
void insert(User user);
void deleteById(Integer id);
void updateById(User user);
@Select("select * from user where id = #{id}")
User selectById(Integer id);
List<User> selectAll(String name);
}
UserService
package com.example.service;
import cn.hutool.core.util.ObjectUtil;
import com.example.common.RoleEnum;
import com.example.entity.Account;
import com.example.entity.User;
import com.example.exception.CustomException;
import com.example.mapper.UserMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserService {
@Resource
UserMapper userMapper;
public Account login(Account account) {
String username = account.getUsername();
// 根据账号查询数据
User dbUser = userMapper.selectByUsername(username);
if (dbUser == null) {
throw new CustomException("账号不存在");
}
// 校验密码
if (!dbUser.getPassword().equals(account.getPassword())) {
throw new CustomException("账号或者密码错误");
}
return dbUser;
}
/**
* 注册
*/
public void register(User user) {
// 1. 校验用户账号是否存在
User dbUser = userMapper.selectByUsername(user.getUsername());
if (dbUser != null) {
throw new CustomException("账号已存在");
}
// 校验密码是否为空
if (ObjectUtil.isEmpty(user.getPassword())) {
throw new CustomException("密码不能为空");
}
if (ObjectUtil.isEmpty(user.getName())) {
user.setName(user.getUsername()); // 设置用户的名称为账号名称
}
user.setRole(RoleEnum.USER.name());
userMapper.insert(user);
}
public void add(User user) {
User dbUser = userMapper.selectByUsername(user.getUsername());
if (dbUser != null) {
throw new CustomException("账号已存在");
}
if (ObjectUtil.isEmpty(user.getPassword())) {
user.setPassword("123"); // 默认密码
}
if (ObjectUtil.isEmpty(user.getName())) {
user.setName(user.getUsername());
}
user.setRole(RoleEnum.USER.name());
userMapper.insert(user);
}
public void deleteById(Integer id) {
userMapper.deleteById(id);
}
public void deleteBatch(List<Integer> ids) {
for (Integer id : ids) {
this.deleteById(id);
}
}
public void updateById(User user) {
userMapper.updateById(user);
}
public User selectById(Integer id) {
return userMapper.selectById(id);
}
public List<User> selectAll(String name) {
return userMapper.selectAll(name);
}
public PageInfo<User> selectPage(String name, Integer pageNum, Integer pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<User> list = this.selectAll(name);
return PageInfo.of(list);
}
}
UserController
package com.example.controller;
import com.example.common.Result;
import com.example.entity.User;
import com.example.service.UserService;
import com.github.pagehelper.PageInfo;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
UserService userService;
/**
* 新增
*/
@PostMapping("/add")
public Result add(@RequestBody User user) {
userService.add(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();
}
/**
* 新增
*/
@PutMapping("/update")
public Result update(@RequestBody User user) {
userService.updateById(user);
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(String name) {
List<User> list = userService.selectAll(name);
return Result.success(list);
}
/**
* 查询所有
*/
@GetMapping("/selectPage")
public Result selectPage(
String name,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
PageInfo<User> pageInfo = userService.selectPage(name, pageNum, pageSize);
return Result.success(pageInfo);
}
}
前台Vue页面
<template>
<div>
<div class="card" style="margin-bottom: 10px;">
<el-input prefix-icon="Search" style="width: 300px; margin-right: 10px" placeholder="请输入名称查询" v-model="data.name"></el-input>
<el-button type="primary" @click="load">查询</el-button>
<el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
</div>
<div class="card" style="margin-bottom: 10px">
<div style="margin-bottom: 10px">
<el-button type="primary" @click="handleAdd">新增</el-button>
</div>
<el-table :data="data.tableData" style="width: 100%">
<el-table-column prop="id" label="序号" width="70"/>
<el-table-column prop="username" label="账号"/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="avatar" label="头像">
<template v-slot="scope">
<img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
</template>
</el-table-column>
<el-table-column prop="role" label="角色"/>
<el-table-column prop="sex" label="性别"/>
<el-table-column prop="phone" label="手机号"/>
<el-table-column prop="account" label="账号余额"/>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="card" v-if="data.total">
<el-pagination background layout="prev, pager, next" @current-change="load" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
</div>
<el-dialog v-model="data.formVisible" title="信息" width="40%" destroy-on-close>
<el-form :model="data.form" label-width="100px" style="padding-right: 50px">
<el-form-item label="账号">
<el-input v-model="data.form.username" autocomplete="off" :disabled="!!data.form.id" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="data.form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="头像">
<el-upload action="http://localhost:9090/files/upload" :on-success="handleFileUpload">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="data.form.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="data.form.phone" autocomplete="off" />
</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";
import {ElMessage, ElMessageBox} from "element-plus";
const data = reactive({
tableData: [],
total: 0,
pageNum: 1, // 当前的页码
pageSize: 5, // 每页的个数
formVisible: false,
form: {},
name: '',
})
const load = () => {
request.get('/user/selectPage', {
params: {
pageNum: data.pageNum,
pageSize: data.pageSize,
name: data.name
}
}).then(res => {
data.tableData = res.data?.list || []
data.total = res.data.total
})
}
load()
const reset = () => {
data.name = null
load()
}
const handleAdd = () => {
data.form = {} // 初始化表单
data.formVisible = true // 打开弹窗
}
// 保存数据
const save = () => {
request.request({
method: data.form.id ? 'PUT' : 'POST',
url: data.form.id ? '/user/update' : '/user/add',
data: data.form
}).then(res => {
if (res.code === '200') { //成功
ElMessage.success('操作成功')
data.formVisible = false // 关闭弹窗
load() // 重新加载表格数据
} else {
ElMessage.error(res.msg)
}
})
}
const handleEdit = (row) => {
data.form = JSON.parse(JSON.stringify(row))
data.formVisible = true
}
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.log(err)
})
}
const handleFileUpload = (file) => {
data.form.avatar = file.data
}
</script>