Merge pull request '完成列表查询接口的对接，包括前端列表和分页模块的搭建' (#29) from Brunch_LPQ into main

api-interface/itmk-base-parent/itmk-base-common/src/main/java/com/itmk/utils/ResultVo.java

@@ -11,5 +11,5 @@ import lombok.Data;
 public class ResultVo<T> {
     private String msg;
     private int code;
-    private T date;
+    private T data;
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java

@@ -22,18 +22,25 @@ public class SysUserController {
 
 //    新增用户
     @PostMapping//使用post请求
-    public ResultVo addUser(@RequestBody SysUser sysUser){
-//        判断用户是否重复
-        QueryWrapper<SysUser> queryWrapper = new QueryWrapper<>();
-        queryWrapper.lambda().eq(SysUser::getUsername,sysUser.getUsername()).eq(SysUser::getPhone,sysUser.getPhone());
-        SysUser user = sysUserService.getOne(queryWrapper);
-        if(user != null){
-            return ResultUtils.error("用户已存在！或该手机号已被使用！");
+    public ResultVo addUser(@RequestBody SysUser sysUser) {
+        // 1. 单独检查用户名
+        if (sysUserService.lambdaQuery()
+                .eq(SysUser::getUsername, sysUser.getUsername())
+                .exists()) {
+            return ResultUtils.error("用户名已存在！");
         }
-        if(sysUserService.save(sysUser)){
-            return ResultUtils.success("新增用户成功！");
+
+        // 2. 单独检查手机号
+        if (sysUserService.lambdaQuery()
+                .eq(SysUser::getPhone, sysUser.getPhone())
+                .exists()) {
+            return ResultUtils.error("手机号已被使用！");
         }
-        return ResultUtils.error("新增用户失败！");
+
+        // 3. 保存用户
+        return sysUserService.save(sysUser)
+                ? ResultUtils.success("新增用户成功！", sysUser)
+                : ResultUtils.error("新增用户失败！");
     }
 
 //    编辑用户

order-system/src/api/user/index.ts

@@ -1,7 +1,12 @@
 import http from "../../http";
-import type { UserModel } from "./userModel";
+import type { ListUserParm, UserModel } from "./userModel";
 
 // 新增接口
 export const addUserApi = (parm:UserModel)=>{
   return http.post("/api/user", parm)
+}
+
+// 列表查询
+export const getListApi = (parm:ListUserParm)=>{
+  return http.get("api/user/list", parm)
 }

order-system/src/api/user/userModel.ts

@@ -4,6 +4,7 @@ export type ListUserParm = {
   pageSize: number;
   name: string;
   phone: string;
+  total: number; //分页总条数
 }
 
 // 定义表单数据类型

order-system/src/compositions/user/useUserTable.ts

@@ -1,7 +1,13 @@
 // 抽离表格相关业务
 
 import type { ListUserParm } from "@/api/user/userModel";
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, nextTick } from "vue";
+
+// 引入列表查询api
+import { getListApi } from "../../api/user/index";
+
+// 设置表格高度(默认值设置为0)
+const tableHeight = ref(0)
 
 export default function useUserTable() {
   // 列表查询的参数
@@ -9,33 +15,66 @@ export default function useUserTable() {
     currentPage: 1,
     pageSize: 10,
     name: '',
-    phone: ''
-
+    phone: '',
+    total: 0
   })
-
+  // 定义tableList用来接收列表数据
+  const tableList = ref([])
   // 列表
-  const getList = () => {
-
+  const getList = async () => {
+    // 在getList方法中调用getListApi
+    let res = await getListApi(listParm)
+    console.log(res)
+    if (res && res.code == 200) {
+      tableList.value = res.data.records;
+      listParm.total = res.data.total;
+    }
   }
 
   // 获取show方法
-  const tableShowBtn = ref<{show:(title: string)=>void}>()
+  const tableShowBtn = ref<{ show: (title: string) => void }>()
 
   // 搜索按钮
   const searchBtn = () => {
-    
+
   }
 
   // 重置按钮
   const resetBtn = () => {
     tableShowBtn.value?.show("重置")
   }
+
+  // 在组件挂载时加载数据
+  onMounted(() => {
+    getList()
+
+    // 计算表格高度覆盖默认值
+    nextTick(()=>{
+      tableHeight.value = window.innerHeight - 220
+    })
+  })
+
+  // 定义页容量改变方法
+  const sizeChange = (size: number) => {
+    listParm.pageSize = size
+    getList()
+  }
+
+  // 定义当前页数改变方法
+  const currentChange = (page: number) => {
+    listParm.currentPage = page
+    getList()
+  }
   // 将表格查询的方法返回出去
   return {
     tableShowBtn,
     listParm,
     getList,
     searchBtn,
-    resetBtn
+    resetBtn,
+    tableList,
+    sizeChange,
+    currentChange,
+    tableHeight
   }
 }

order-system/src/http/index.ts

@@ -5,15 +5,22 @@ import { ElMessage } from 'element-plus'
 // axios请求配置
 const config = {
   // baseURL:'http://localhost:8089',
-  baseURL:'/api',
+  baseURL: '/api',
 
-  timeout:10000,
+  timeout: 10000,
 }
 
-class Http{
+// 返回值数据类型
+export interface Result<T = any> {
+  code: number;
+  msg: string;
+  data: T;
+}
+
+class Http {
   private instance: AxiosInstance;
   // 初始化axios
-  constructor(config: AxiosRequestConfig){
+  constructor(config: AxiosRequestConfig) {
     // 实例化，通过create方法创建axios实例
     this.instance = axios.create(config)
 
@@ -23,16 +30,16 @@ class Http{
 
 
   // 拦截器
-  private interceptors(){
+  private interceptors() {
     // 请求发送之前的拦截器，通常用来配置、携带token
-    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig)=>{
+    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
       // 设置token到请求头部
       let token = "";
-      if(token){
+      if (token) {
         config.headers!['token'] = token;
       }
       return config;
-    }, (error: any) =>{
+    }, (error: any) => {
       error.data = {}
       error.data.msg = '服务器异常，请联系管理员！'
       return error;
@@ -41,18 +48,18 @@ class Http{
     // 请求返回之后的拦截器
     this.instance.interceptors.response.use((res: AxiosResponse) => {
       // 如果返回状态码不为200，说明返回错误
-      if(res.data.code != 200){
+      if (res.data.code != 200) {
         // 如果msg不存在，返回“服务器出错！”
         ElMessage.error(res.data.msg || '服务器出错！')
         return Promise.reject(res.data.msg || '服务器出错！')
-      }else{
+      } else {
         return res.data
       }
-    },(error) => {
+    }, (error) => {
       console.log('进入错误')
       error.data = {}
-      if(error && error.response) {
-        switch(error.response.status){
+      if (error && error.response) {
+        switch (error.response.status) {
           case 400:
             error.data.msg = '错误请求'
             ElMessage.error(error.data.msg)
@@ -114,22 +121,22 @@ class Http{
   }
 
   // get请求
-  get(url:string,params?:object): Promise<any>{
-    return this.instance.get(url,{params})
+  get<T = Result> (url: string, params?: object): Promise<T> {
+    return this.instance.get(url, { params })
   }
 
   // post请求
-  post(url:string,data?:object): Promise<any>{
-    return this.instance.post(url,data)
+  post<T = Result> (url: string, data?: object): Promise<T> {
+    return this.instance.post(url, data)
   }
 
   // put请求
-  put(url:string,data?:object): Promise<any>{
-    return this.instance.put(url,data)
+  put<T = Result> (url: string, data?: object): Promise<T> {
+    return this.instance.put(url, data)
   }
 
   // delete请求
-  delete(url:string): Promise<any>{
+  delete<T = Result> (url: string): Promise<T> {
     return this.instance.delete(url)
   }
 }

order-system/src/main.ts

@@ -2,6 +2,9 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'//创建一个 pinia 实例 (根 store) 并将其传递给应用
 // import './style.css'    将默认样式注释掉，避免影响后续开发
 
+// 引入Element-plus的国际化设置
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
 import router from './router'   //将创建好的路由引入到main.ts中
 import App from './App.vue'
 
@@ -16,8 +19,11 @@ const pinia = createPinia()
 // 挂载路由
 // 导入组件
 // 导入pinia
+// 配置国际化
 const app = createApp(App)
-app.use(router).use(ElementPlus).use(pinia).mount('#app');
+app.use(router).use(ElementPlus, {
+  locale: zhCn,
+}).use(pinia).mount('#app');
 
 // 全局注册图标组件
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

order-system/src/views/user/AddUser.vue

@@ -145,6 +145,7 @@ const commit = () => {
     if(valid){
       // 调用addUserApi，将前端表单收集到的数据提交给数据库
       let res = await addUserApi(addModel)
+      console.log(res)
       if(res && res.code == 200){
         onConfirm()
       }

order-system/src/views/user/Index.vue

@@ -16,6 +16,38 @@
       </el-form-item>
     </el-form>
 
+    <!-- 用户列表 -->
+    <el-table :height="tableHeight" :data="tableList" border stripe>
+      <el-table-column label="姓名" prop="name"></el-table-column>
+      <el-table-column label="性别" prop="sex">
+        <!-- 性别默认显示数字，需要添加逻辑转换 -->
+        <template #default="scope">
+          <el-tag v-if="scope.row.sex == '1'" type="danger" size="default">女</el-tag>
+          <el-tag v-if="scope.row.sex == '0'" size="default">男</el-tag>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="电话" prop="phone"></el-table-column>
+      <el-table-column label="邮箱" prop="email"></el-table-column>
+
+      <!-- 为表格添加编辑、删除按钮 -->
+      <el-table-column label="操作" min-width="100" align="center">
+        <template #default>
+          <el-button type="primary" size="default" @click="editBtn" icon="Edit">
+            编辑
+          </el-button>
+          <el-button type="danger" size="default" @click="deleteBtn" icon="Delete">删除</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <!-- 为表格添加分页显示 -->
+    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.currentPage"
+      :page-sizes="[10, 20, 40, 80, 100]" :page-size="listParm.pageSize"
+      layout="total, sizes, prev, pager, next, jumper" :total="listParm.total" background>
+    </el-pagination>
+
   </el-main>
 
   <!-- 新增、编辑按钮弹框 -->
@@ -25,13 +57,24 @@
 
 <script setup lang="ts">
 
-import { Search, Close, Plus } from '@element-plus/icons-vue'
+import { Search, Close, Plus, Edit, Delete } from '@element-plus/icons-vue'
 // 导入useUserTable,获取表格相关业务
 // 第一次导入在vite-env.d.ts中添加路径别名支持
 import useUserTable from '@/compositions/user/useUserTable';
 
+// 导入onMounted方法
+import { onMounted } from 'vue';
+
 // 获取表格相关业务
-const { tableShowBtn, listParm, getList, searchBtn, resetBtn } = useUserTable()
+const { tableShowBtn,
+  listParm,
+  getList,
+  searchBtn,
+  resetBtn,
+  tableList,
+  sizeChange,
+  currentChange,
+  tableHeight } = useUserTable()
 
 // 导入useUser,获取增删改相关业务
 import useUser from '@/compositions/user/useUser';
@@ -40,6 +83,11 @@ const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
 
 // 导入子组件AddUser,关联新增按钮
 import AddUser from './AddUser.vue';
+
+// 在组件挂载时加载数据
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style scoped></style>

order-system/src/vite-env.d.ts

@@ -65,6 +65,7 @@ declare module '@/api/user/userModel' {
     pageSize: number;
     name: string;
     phone: string;
+    total: number;
   }
 
   export type UserModel = {