用户列表分页渲染

src/api/myAxios.ts

@@ -2,7 +2,7 @@
 import axios from "axios";
 const myAxios = axios.create({
     withCredentials:true,
-    baseURL: 'http://127.0.0.1:8888/api'//测试服务器
+    baseURL: 'http://localhost:8888/api'//测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

src/layout/components/Header.vue

@@ -83,79 +83,83 @@
 
 <!--</style>-->
 <template>
-   <div style=" height: 70px; width: 1248px; display: flex;
+  <div style=" height: 70px; width: 1248px; display: flex;
       justify-content: space-between; align-items: center;">
-        <div style=" display: flex; justify-content: center;
+    <div style=" display: flex; justify-content: center;
         align-items: center; margin-left: 10px">
-        <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>
+      <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px">
-        <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>
+        <Expand />
+      </el-icon>
+      <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px">
+        <Fold />
+      </el-icon>
 
 
-          <el-breadcrumb separator="/">
+      <el-breadcrumb separator="/">
-            <a-breadcrumb-item>{{route.name}}</a-breadcrumb-item>
+        <a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
-          </el-breadcrumb>
+      </el-breadcrumb>
-        </div>
+    </div>
 
-        <div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">
+    <div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
-          <el-avatar style="margin-right: 10px">
+      <el-avatar style="margin-right: 10px">
-            <img src="../../assets/admin.jpg" alt="">
+        <img :src="store.loginUser.userAvatar" alt="">
-          </el-avatar>
+      </el-avatar>
 
-            <el-dropdown style="cursor: pointer;" size="default">
+      <el-dropdown style="cursor: pointer;" size="default">
-            <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
+        <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
-              <span>用户名称</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
+          <span>{{ store.loginUser.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
-            </span>
+        </span>
-            <template #dropdown>
+        <template #dropdown>
-              <el-dropdown-menu>
+          <el-dropdown-menu>
-                <el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
+            <el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
-                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
-              </el-dropdown-menu>
+          </el-dropdown-menu>
-            </template>
+        </template>
-          </el-dropdown>
+      </el-dropdown>
-        </div>
+    </div>
-      </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import {ref} from 'vue'
+import { ref } from 'vue'
-  import emitter from '@/utils/emitter'
+import emitter from '@/utils/emitter'
-  import {useRoute, useRouter} from "vue-router";
+import { useRoute, useRouter } from "vue-router";
-  import myAxios from '@/api/myAxios';
+import myAxios from '@/api/myAxios';
-  import { userStore } from '@/store/userStore';
+import { userStore } from '@/store/userStore';
-  import { ElMessage } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-  const router = useRouter();
+const router = useRouter();
-  const route = useRoute();
+const route = useRoute();
-  const offset = ref(20)
+const offset = ref(20)
-  const showLog = ref(false)
+const showLog = ref(false)
-  const store = userStore()
+const store = userStore()
 
-  const logout = async () => {
+
-    const res: any = await myAxios.post("/user/logout",{})
+const logout = async () => {
-    console.log(res)
+  const res: any = await myAxios.post("/user/logout", {})
-    if(res.data.code == 1 && res.data) {
+  if (res.data.code == 1 && res.data) {
-      store.$reset()
+    store.$reset()
-      await router.replace('/')
+    await router.replace('/')
-      ElMessage({
+    ElMessage({
-        type: 'info',
+      type: 'info',
-        message: '登出成功',
+      message: '登出成功',
-      })
+    })
-    }
   }
-  const changeState = () => {
+}
-    showLog.value = !showLog.value
+const changeState = () => {
-    emitter.emit('Aside', showLog.value)
+  showLog.value = !showLog.value
-    if(showLog.value){
+  emitter.emit('Aside', showLog.value)
-        offset.value = -116
+  if (showLog.value) {
-    }else{
+    offset.value = -116
-        offset.value = 20
+  } else {
-    }
+    offset.value = 20
   }
+}
 
 </script>
 
 <style scoped>
-    :deep(.el-tooltip__trigger:focus-visible) {
+:deep(.el-tooltip__trigger:focus-visible) {
-      outline: unset;
+  outline: unset;
-    }
+}
 </style>

src/store/userStore.ts

@@ -6,8 +6,10 @@ export const userStore = defineStore( 'user' , {
     state: () => {
         return {
             loginUser: {
-                userName: '未登录',
+                id: 0,
+                phone: '',
                 userAvatar: '',
+                userName: '未登录',
                 userRole: 'notLogin'
             }
         }
@@ -15,13 +17,11 @@ export const userStore = defineStore( 'user' , {
     //actions是用于定义和处理状态更改的方法。它们可以包含任意的逻辑，如异步请求、数据处理和状态更新。
     actions: {
         //获取登录用户信息
-        async getLoginUser() {
+        async getLoginUser(res:any) {
             //请求登录信息
-            const res = await myAxios.get('/user/get')
+            // const res = await myAxios.get('/user/get')
-            // console.log(res.data)
+            console.log(res,121212312312)
-            if( res.data.code === 1 && res ?.data ) {
+            this.updateUser( res )
-                this.updateUser( res.data )
-            }
         },
         //更新用户信息
         //更新state

src/utils/request.js

@@ -1,34 +0,0 @@
-import axios from 'axios'
-
-const instance = axios.create({
-    baseURL: 'http://localhost:9090'
-})
-instance.interceptors.request.use(
-    config =>{  // 拦截器成功函数
-        if(config.methods == "post"){
-            config.data = querystring.stringify(config.data)
-        }
-
-        // config:包含着网络请求的所有信息
-        return config;
-    },
-    error =>{  // 拦截器失败函数
-
-        // 返回错误信息
-        return Promise.reject(error)
-    }
-)
-
-// 拦截器----获取数据之前
-instance.interceptors.response.use(
-    response =>{  // 拦截器成功函数
-        return response.status == 200 ? Promise.resolve(response):Promise.reject(response)
-    },
-    error =>{  // 拦截器失败函数
-        const { response } = error;
-        errorHandle(response.status,response.info)
-    }
-)
-
-
-export default instance

src/views/Commodity/MerchandiseCenter.vue

@@ -247,7 +247,6 @@
 </template>
 
 <script setup lang="ts">
-import instance from '@/utils/request';
 import { ElMessage } from 'element-plus';
 import { ref, onMounted } from 'vue';
 const pageNum = ref(0);

src/views/Commodity/TypeManagement.vue

@@ -51,7 +51,7 @@
   
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button @click="cancel" >取消</el-button>
         <el-button type="primary" @click="dialogVisible = false">
           提交
         </el-button>
@@ -78,15 +78,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref , reactive} from 'vue'
+import { ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { userStore } from '../../store/userStore';
-import { ElMessage } from 'element-plus'
+
-import type { UploadFile } from 'element-plus';
+const store = userStore()
 
 const dialogImageUrl = ref('');
 const disabled = ref(false);
-const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
-const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const imageUrl = ref('')
 const selectedItems = ref([])
 const dialogVisible = ref(false)
@@ -95,26 +93,37 @@ const form = ref({
   type_name: '',
   tips: ''
 })
-
+const tableData = ref([
-const handleSelectionChange = (row: any) => {
-  selectedItems.value = JSON.parse(JSON.stringify(row))
-}
-
-const Add_type =()=>{
-    dialogVisible.value = true;
-    form.value = {
-      img: '',
-      type_name: '',
-      tips: ''
-    }
-}
-const tableData = [
   {
     img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
     type_name: '材料包',
     tips: '提供用户自定义DIY',
   }
-]
+])
+
+const Add_type =()=>{
+    dialogVisible.value = true;
+    if(form.value.type_name) {
+      form.value = {
+        img: '',
+        type_name: '',
+        tips: ''
+      }
+    }
+    tableData.value.push(form.value)
+}
+const cancel = () => {
+  dialogVisible.value = false
+  resetForm();
+}
+
+const resetForm = () => {
+  form.value = {
+        img: '',
+        type_name: '',
+        tips: ''
+      }
+};
 
 // const handleClose = (done: () => void) => {
 //   ElMessageBox.confirm('确定不添加商品类别吗?')
@@ -125,6 +134,9 @@ const tableData = [
 //       // catch error
 //     })
 // }
+const handleSelectionChange = (row: any) => {
+  selectedItems.value = JSON.parse(JSON.stringify(row))
+}
 
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement;

src/views/Login.vue

@@ -54,11 +54,11 @@
       userAccount: username.value,
       userPassword: password.value
     })
-    // console.log(res.data.code)
+    console.log(res.data.code)
     if(res.data.code === 1 && res ?.data) {
       //将用户信息放入pinia
-      await store.getLoginUser()
+      await store.getLoginUser(res.data.data)
-      //存储角色
+      //跳转个人中心
       await router.replace('/PersonalCenter')
     }
   }

src/views/User/UserManagement.vue

@@ -3,7 +3,7 @@
 
     <div style="margin: 10px 0">
       <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
-      <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
+      <el-button class="ml-5" type="primary" @click="onSearch(username)" style="height: 25px;">搜索</el-button>
       <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
     </div>
 <!--    <div style="margin: 15px 0">-->
@@ -28,13 +28,13 @@
               @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="id" label="序号" width="50"></el-table-column>
-      <el-table-column prop="username" label="用户昵称" ></el-table-column>
+      <el-table-column prop="userName" label="用户昵称" ></el-table-column>
-      <el-table-column prop="avatar" label="头像"></el-table-column>
+      <el-table-column prop="userAvatar" label="头像"></el-table-column>
-      <el-table-column prop="identity" label="身份"></el-table-column>
+      <el-table-column prop="userRole" label="身份"></el-table-column>
       <el-table-column prop="phone" label="手机号"></el-table-column>
       <el-table-column label="操作">
-        <template slot-scope="scope">
+        <!-- <template slot-scope="scope">
-          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
+          <el-button type="success" @click="detail(scope.row)">详情 <i class="el-icon-edit"></i></el-button>
 
           <el-popconfirm
               class="ml-5"
@@ -45,22 +45,22 @@
               title="您确定删除吗？"
               @confirm="del(scope.row.id)"
           >
-            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
+            <el-button type="danger" slot="reference">封禁 <i class="el-icon-remove-outline"></i></el-button>
           </el-popconfirm>
 
-        </template>
+        </template> -->
       </el-table-column>
     </el-table>
+    <!-- 分页查询 -->
     <div style="padding: 10px 0">
       <el-pagination
-          @size-change="handleSizeChange"
+          :current-page="searchParams.current"
-          @current-change="handleCurrentChange"
+          :page-size="searchParams.pageSize"
-          :current-page="pageNum"
-          :page-size="pageSize"
           :page-sizes="[2, 5, 10, 20]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"          
           :small="null"
-          :disabled="null"
+          background
-          :background="null"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
       />
@@ -69,29 +69,68 @@
 </template>
 
 <script setup lang="ts">
-
+import { ElMessage } from 'element-plus';
-import instance from '@/utils/request';
+import myAxios from '@/api/myAxios';
 import {ref, onMounted} from 'vue'
+import { da } from 'element-plus/es/locales.mjs';
+//获取的所有数据
 const tableData = ref([])
-const pageNum = ref(0)
+//筛选条数
-const pageSize = ref(0)
 const total = ref(0)
+//请求参数
+const searchParams: any = ref({
+  //当前页码
+  current: 1,
+  //每页显示条数
+  pageSize: 5
+})
 
 onMounted(() => {
-  load()
+  getUserList()
 })
 const username = ref('')
 const reset =()=>{
   username.value = ''
+  onSearch(username.value)
+  getUserList()
 }
-const load = async () => {
+//用户信息列表
-  await instance.get('/admin/findAllUsers').then(res => {
+const getUserList = async () => {
-    console.log(res.data.data)
+  //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
-    res.data.data.foreach((item:any) => {
+  const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
-      console.log(item)
+    if(res.data.code === 1) {
-    })
+      //给前端表格赋值   字段名一定要对应
-    tableData.value = res.data.data
+      tableData.value = res.data.data.records
-  })
+      //筛选条数
+      total.value = parseInt(res.data.data.total)
+    }else {
+      ElMessage({
+        type: 'info',
+        message: '查询失败',
+      })
+    }
+}
+const handleSelectionChange  = (val:any)=>{
+  console.log(val)
+}
+// 处理页大小变化
+const handleSizeChange = (newSize:any) => {
+  searchParams.value.pageSize = newSize //新的页面条数
+  getUserList() //重新发起请求
+};
+
+// 处理当前页变化
+const handleCurrentChange = (Current:any) => {
+  searchParams.value.current = Current //新的当前页面
+  getUserList() //重新发起请求
+};
+
+//搜索按钮方法
+const onSearch = (data : String)=>{
+  console.log(data)
+  searchParams.value.userName = data
+  searchParams.value.current = 1
+  getUserList()
 }
 
 </script>