引入vuex环境

README.md

@@ -62,6 +62,25 @@
 
 若成功，返回所有用户的结果集（节省时间不搞分页了）
 
+### 用户添加
+
+需要管理员权限
+
+前端提供的数据
+
+```json
+{
+   "user":{
+      "username": "user2",
+      "password": "123456",
+      "other": "更多需要提供的数据请写在接口文档里"
+   }
+}
+```
+
+后端返回状态码，哪个码表示什么意思记得写一下
+
+
 # 开发进度
 
 ## 登录界面

package-lock.json

@@ -13,7 +13,8 @@
         "unplugin-icons": "^0.19.0",
         "vite-plugin-inspect": "^0.8.4",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.2"
+        "vue-router": "^4.3.2",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -2387,6 +2388,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -14,7 +14,8 @@
     "unplugin-icons": "^0.19.0",
     "vite-plugin-inspect": "^0.8.4",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/App.vue

@@ -1,6 +1,5 @@
 <script setup>
-// import HelloWorld from './components/HelloWorld.vue'
+
-// import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>

src/components/ZooAside.vue

@@ -1,62 +1,61 @@
 <script>
+
 export default {
-  name: "ZooAside"
+  name: "ZooAside",
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    toPath(path) {
+      this.$router.push(path)
+    }
+  },
+  watch: {
+
+  }
+
 }
 </script>
 
 <template>
-  <div id="aside">
+  <div class="aside">
     <el-col>
       <h5 class="mb-2">用户功能</h5>
       <el-menu
-          default-active="2"
+          :default-active="$route.path"
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          @close="handleClose"
       >
         <el-sub-menu index="1">
           <template #title>
-            <el-icon><location /></el-icon>
+            <el-icon>
+              <location/>
+            </el-icon>
             <span>管理员</span>
           </template>
-          <el-menu-item-group title="Group One">
+          <el-menu-item index="/panel/home" @click="toPath('/panel/home')">首页</el-menu-item>
-            <el-menu-item index="1-1">用户管理</el-menu-item>
+          <el-menu-item index="/panel/user" @click="toPath('/panel/user')">用户管理</el-menu-item>
-            <el-menu-item index="1-2">动物基本数据</el-menu-item>
+          <el-menu-item index="1-3">动物基本数据</el-menu-item>
-          </el-menu-item-group>
         </el-sub-menu>
-      </el-menu>
-      <el-menu
-          default-active="2"
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          @close="handleClose"
-      >
         <el-sub-menu index="2">
           <template #title>
-            <el-icon><location /></el-icon>
+            <el-icon>
+              <location/>
+            </el-icon>
             <span>饲养员</span>
           </template>
-          <el-menu-item-group title="Group One">
+          <!--            <el-menu-item index="2-1">动物档案</el-menu-item>-->
-<!--            <el-menu-item index="1-1">动物档案</el-menu-item>-->
+          <el-menu-item index="2-2">饲养管理</el-menu-item>
-            <el-menu-item index="1-2">饲养管理</el-menu-item>
-          </el-menu-item-group>
         </el-sub-menu>
-      </el-menu>
-      <el-menu
-          default-active="2"
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          @close="handleClose"
-      >
         <el-sub-menu index="3">
           <template #title>
-            <el-icon><location /></el-icon>
+            <el-icon>
+              <location/>
+            </el-icon>
             <span>兽医</span>
           </template>
-          <el-menu-item-group title="Group One">
+          <el-menu-item index="3-1">动物档案</el-menu-item>
-            <el-menu-item index="1-1">动物档案</el-menu-item>
+          <el-menu-item index="3-2">健康检测</el-menu-item>
-            <el-menu-item index="1-2">健康检测</el-menu-item>
-          </el-menu-item-group>
         </el-sub-menu>
       </el-menu>
     </el-col>

src/components/ZooFooter.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div id="footer">
+  <div class="footer">
     <slot>我是底栏插槽</slot>
   </div>
 </template>

src/components/ZooHeader.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <template>
-  <div id="header">
+  <div class="header">
     <div class="to-home left">
       <el-button :icon="HomeFilled" size="large" @click="$router.push('/panel/home')">返回首页</el-button>
     </div>
@@ -51,7 +51,7 @@ export default {
 </template>
 
 <style scoped>
-#header {
+.header {
   text-align: center;
   font-size: 32px;
   line-height: 60px;

src/components/ZooMain.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div id="main">
+  <div class="main">
     <slot>我是主内容插槽</slot>
   </div>
 </template>

src/main.js

@@ -3,6 +3,7 @@ import './assets/common.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
@@ -13,4 +14,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 
 app.use(router)
+app.use(store)
 app.mount('#app')
+

src/pages/ZooLogin.vue

@@ -1,20 +1,22 @@
 <script>
 
+import {mapMutations} from "vuex";
+
 export default {
   name: "ZooContainer",
   data() {
     return {
-      tip: '',
+      user: {
-      form: {
+        username:'',
-        name: 'admin',
+        password:'123456',
-        password: '123456'
       }
     }
   },
   methods: {
+    ...mapMutations(['updateUserName']),
     onSubmit() {
       console.log('点击了登录按钮')
-      if (!this.form.name || !this.form.password) {
+      if (!this.user.username || !this.user.password) {
         //返回提示
         return ElMessage({
           message: '用户名和密码不能为空',
@@ -22,15 +24,23 @@ export default {
         })
       } else {
         //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
-        sessionStorage.setItem('isLogin', 'isLogin');
+        sessionStorage.setItem('isLogin', 'isLogin');//登录状态
+        localStorage.setItem('userName', this.user.username);//本地存储登录用户名
+        this.updateUserName(this.user.username);//存储登录用户名
         this.$router.push('/panel/home')
-
       }
     },
     reset() {
-      this.form = {}
+      this.user = {}
     },
   },
+  computed: {
+
+  },
+  mounted() {
+    this.updateUserName('');//清空登录用户名
+    this.user.username = localStorage.getItem('userName');//自动填充上次登录的用户
+  }
 
 }
 </script>
@@ -39,13 +49,13 @@ export default {
   <div class="root">
     <div class="center">
       <el-card style="width: 480px" shadow="always" header="登录">
-        <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form :model="user" label-width="auto" style="max-width: 600px">
           <el-form-item label="用户名">
-            <el-input v-model="form.name" style="width: 240px" placeholder="请输入用户名"/>
+            <el-input v-model="user.username" style="width: 240px" placeholder="请输入用户名"/>
           </el-form-item>
           <el-form-item label="密码">
             <el-input
-                v-model="form.password"
+                v-model="user.password"
                 style="width: 240px"
                 type="password"
                 placeholder="请输入密码"

src/pages/ZooPanel.vue

@@ -17,6 +17,11 @@ export default {
 
     }
   },
+  methods: {
+    // touser() {
+    //   $router.push('/panel/user')
+    // }
+  },
   components: {
     ZooHeader,
     ZooAside,

src/pages/ZooUser.vue

@@ -1,11 +1,27 @@
 <script>
 export default {
-  name: "ZooUser"
+  name: "ZooUser",
+  data() {
+    return {
+      users:[
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+        {username:'user10',password:'password'},
+      ]
+    }
+  }
 }
 </script>
 
 <template>
+  <div id="root">
     
+  </div>
 </template>
 
 <style scoped>

src/router/index.js

@@ -4,6 +4,7 @@ import { createWebHashHistory } from "vue-router";
 import ZooLogin from '../pages/ZooLogin.vue'
 import ZooPanel from "@/pages/ZooPanel.vue";
 import ZooHome from '../pages/ZooHome.vue'
+import ZooUser from "@/pages/ZooUser.vue";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -31,6 +32,11 @@ const router = createRouter({
                     component: ZooHome,
                     meta:{isAuth: true},//需要权限
                 },
+                {
+                    path:'user',
+                    component:ZooUser,
+                    meta:{isAuth: true},//需要权限
+                }
             ]
         },
 

src/store/index.js

@@ -0,0 +1,25 @@
+import {createStore} from "vuex";
+
+const actions = {
+
+}
+
+const mutations = {
+    //更新已登录用户名
+    updateUserName(state, value) {
+        state.user.username = value
+    }
+}
+
+const state = {
+    //登录用户数据
+    user: {
+        username: 'user1',
+    }
+}
+
+export default createStore({
+    actions,
+    mutations,
+    state
+})