src/api/myAxios.ts

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

src/layout/components/Header.vue

@@ -83,83 +83,79 @@
 
 <!--</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">
+        <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>
-        <Expand />
+        <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>
-      </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="store.loginUser.userAvatar" alt="">
+            <img src="../../assets/admin.jpg" 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>{{ store.loginUser.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
+              <span>用户名称</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 logout = async () => {
+    const res: any = await myAxios.post("/user/logout",{})
-  const res: any = await myAxios.post("/user/logout", {})
+    console.log(res)
-  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 = () => {
-const changeState = () => {
+    showLog.value = !showLog.value
-  showLog.value = !showLog.value
+    emitter.emit('Aside', showLog.value)
-  emitter.emit('Aside', showLog.value)
+    if(showLog.value){
-  if (showLog.value) {
+        offset.value = -116
-    offset.value = -116
+    }else{
-  } else {
+        offset.value = 20
-    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,10 +6,8 @@ export const userStore = defineStore( 'user' , {
     state: () => {
         return {
             loginUser: {
-                id: 0,
-                phone: '',
-                userAvatar: '',
                 userName: '未登录',
+                userAvatar: '',
                 userRole: 'notLogin'
             }
         }
@@ -17,11 +15,13 @@ export const userStore = defineStore( 'user' , {
     //actions是用于定义和处理状态更改的方法。它们可以包含任意的逻辑，如异步请求、数据处理和状态更新。
     actions: {
         //获取登录用户信息
-        async getLoginUser(res:any) {
+        async getLoginUser() {
             //请求登录信息
-            // const res = await myAxios.get('/user/get')
+            const res = await myAxios.get('/user/get')
-            console.log(res,121212312312)
+            // console.log(res.data)
-            this.updateUser( res )
+            if( res.data.code === 1 && res ?.data ) {
+                this.updateUser( res.data )
+            }
         },
         //更新用户信息
         //更新state

src/utils/request.js

@@ -0,0 +1,34 @@
+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,6 +247,7 @@
 </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="cancel" >取消</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="dialogVisible = false">
           提交
         </el-button>
@@ -78,13 +78,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref , reactive} from 'vue'
-import { userStore } from '../../store/userStore';
+import { ElMessageBox } from 'element-plus'
-
+import { ElMessage } from 'element-plus'
-const store = userStore()
+import type { UploadFile } from 'element-plus';
 
 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)
@@ -93,37 +95,26 @@ 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('确定不添加商品类别吗?')
@@ -134,9 +125,6 @@ const resetForm = () => {
 //       // 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(res.data.data)
+      await store.getLoginUser()
-      //跳转个人中心
+      //存储角色
       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="onSearch(username)" style="height: 25px;">搜索</el-button>
+      <el-button class="ml-5" type="primary" @click="load" 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="userAvatar" label="头像"></el-table-column>
+      <el-table-column prop="avatar" label="头像"></el-table-column>
-      <el-table-column prop="userRole" label="身份"></el-table-column>
+      <el-table-column prop="identity" 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="detail(scope.row)">详情 <i class="el-icon-edit"></i></el-button>
+          <el-button type="success" @click="handleEdit(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
-          :current-page="searchParams.current"
-          :page-size="searchParams.pageSize"
-          :page-sizes="[2, 5, 10, 20]"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-size="pageSize"
+          :page-sizes="[2, 5, 10, 20]"
           :small="null"
-          background
+          :disabled="null"
+          :background="null"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
       />
@@ -69,68 +69,29 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage } from 'element-plus';
+
-import myAxios from '@/api/myAxios';
+import instance from '@/utils/request';
 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(() => {
-  getUserList()
+  load()
 })
 const username = ref('')
 const reset =()=>{
   username.value = ''
-  onSearch(username.value)
-  getUserList()
 }
-//用户信息列表
+const load = async () => {
-const getUserList = async () => {
+  await instance.get('/admin/findAllUsers').then(res => {
-  //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
+    console.log(res.data.data)
-  const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
+    res.data.data.foreach((item:any) => {
-    if(res.data.code === 1) {
+      console.log(item)
-      //给前端表格赋值   字段名一定要对应
+    })
-      tableData.value = res.data.data.records
+    tableData.value = res.data.data
-      //筛选条数
+  })
-      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>