校园小卖部web开发项目-1（SpringBoot3+Vue3）
本章实现：用户界面，分页查询，删除用户，模糊搜索用户
User.vue
<template> <div> <div class="card" style="margin: 5px"> <el-input v-model="data.name" style="width: 300px; margin-right: 10px" placeholder="请输入名称查询"></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"> <div style="margin-bottom: 10px"> <el-button type="primary" @click="handleAdd">新增</el-button> </div> <el-table :data="data.tableData" stripe> <el-table-column label="账号" prop="username"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="头像"> <template #default="scope"> <el-image :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%"></el-image> </template> </el-table-column> <el-table-column label="角色" prop="role"></el-table-column> <el-table-column label="账户余额" prop="balance"></el-table-column> <el-table-column label="操作" align="center" width="160"> <template #default="scope"> <el-button type="danger" @click="del(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> </div> <div class="card"> <el-pagination @current-change="load" background layout="total, prev, pager, next" v-model:page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/> </div> </div> </template> <script setup> import {reactive} from "vue"; import {Search} from "@element-plus/icons-vue"; import request from "@/utils/request"; import {ElMessage, ElMessageBox} from "element-plus"; const data=reactive({ name:null, tableData:[], total:0, pageNum:1, pageSize:5 }) //分页查询 const load = () => { request.get('/user/selectPage',{ params:{//给usercontroller selectpage()传参数 pageNum:data.pageNum, pageSize:data.pageSize, name:data.name } // /user/selectPage?pageNum=1&pageSize=5&name=张三 }).then(res=>{ if(res.code==='200'){ data.tableData=res.data?.list data.total=res.data?.total } else { ElMessage.error(res.msg) } }) } //重置 const reset = () => { data.name=null load() } // /user/delete/123 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 => {}) } load() </script>User
package com.example.entity; import java.math.BigDecimal; public class User { /** ID */ private Integer id; /** 用户名 */ private String username; /** 密码 */ private String password; /** 姓名 */ private String name; /** 头像 */ // private String avatar; /** 角色标识 */ private String role; //余额 private BigDecimal balance; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getRole() { return role; } public void setRole(String role) { this.role = role; } public BigDecimal getBalance() { return balance; } public void setBalance(BigDecimal balance) { this.balance = balance; } }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.*; @RestController @RequestMapping("/user") public class UserController { @Resource private UserService userService; // http://localhost:9090 /user/selectPage?pageNum=1&pageSize=5&name=张三 @GetMapping("/selectPage") public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String name){ PageInfo<User> pageInfo=userService.selectPage(pageNum,pageSize,name); return Result.success(pageInfo); } // http://localhost:9090 /user/delete/123 @DeleteMapping("/delete/{id}") public Result delete(@PathVariable Integer id){ userService.deleteById(id); return Result.success(); } }UserService
package com.example.service; import com.example.entity.User; 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 private UserMapper userMapper; public PageInfo<User> selectPage(Integer pageNum, Integer pageSize,String name) { PageHelper.startPage(pageNum, pageSize); List<User> list = userMapper.selectAll(name); return PageInfo.of(list); } public void deleteById(Integer id) { userMapper.deleteById(id); } }UserMapper接口
package com.example.mapper; import com.example.entity.User; import org.springframework.stereotype.Repository; import java.util.List; @Repository public interface UserMapper { List<User> selectAll(String name); void deleteById(Integer id); }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"> <select id="selectAll" resultType="com.example.entity.User"> select * from `user` <where> <if test="name != null">name like concat('%',#{name},'%')</if> </where> </select> <delete id="deleteById"> delete from `user` where id =#{id} </delete> </mapper>Result
package com.example.common; public class Result { private String code; private String msg; private Object data; private Result(Object data) { this.data = data; } public Result() { } public static Result success() { Result result = new Result(); result.setCode("200"); result.setMsg("请求成功"); return result; } public static Result success(Object data) { Result result = success(); result.setData(data); return result; } public static Result error() { Result result = new Result(); result.setCode("500"); result.setMsg("请求失败"); return result; } public static Result error(String msg) { Result result = new Result(); result.setCode("500"); result.setMsg(msg); return result; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } }