预对接后端

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "axios": "^1.7.2",
         "element-plus": "^2.7.3",
         "unplugin-icons": "^0.19.0",
         "vite-plugin-inspect": "^0.8.4",
@@ -991,6 +992,21 @@
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1070,6 +1086,17 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
@@ -1151,6 +1178,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.7.3.tgz",
@@ -1327,6 +1362,38 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -1625,6 +1692,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -1857,6 +1943,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.7.2",
     "element-plus": "^2.7.3",
     "unplugin-icons": "^0.19.0",
     "vite-plugin-inspect": "^0.8.4",

src/pages/ZooAnimal.vue

@@ -4,6 +4,7 @@ import {Delete, Document, DocumentAdd, Edit, Search, Tickets} from "@element-plu
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
 import {mapActions, mapMutations, mapState} from "vuex";
 import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
+import request, {frontendAnimals} from "@/utils/request.js";
 
 export default {
   name: "ZooAnimal",
@@ -67,13 +68,23 @@ export default {
   },
   methods: {
     ...mapActions(["getAnimals"]),
-    ...mapMutations(['updateAnimalsTableData']),
+    ...mapMutations(['updateAnimals','updateAnimalsTableData']),
 
     // 显示详情弹窗
     showDetail(data) {
       console.log('显示详情', data)
 
       //从后端获取需要查询的数据，防止数据前后不一致
+      request.queryAnimalRequest(data.id).then(response => {
+        console.log(response.data)
+        if (response.data.data===null){
+          this.refresh();
+          return ElMessage({
+            message: '该动物不存在，请刷新',
+            type: 'warning',
+          })
+        }
+      })
       //这里先用假数据代替一下
       this.dialog.dialogData = this.animals.find(e => e.id === data.id)
 
@@ -165,32 +176,38 @@ export default {
       console.log('添加', data)
 
       //验证是否为空
-      return this.isEmpty(data);
+      if (this.isEmpty(data)) {
+        return ElMessage({
+          message: '请输入动物名称',
+          type: 'warning',
+        })
+      }
 
-      //先查询用户是否存在
+      //先查询动物是否存在
-
+      request.queryAnimalRequest(data.id).then(response => {
-      //添加失败
+        if (response.data.data!==null){
-      if (false) {
           return ElMessage({
             message: '该动物已存在',
             type: 'warning',
           })
         }
-      //添加成功
-      if (false) {
-        return ElMessage({
-          message: '添加成功',
-          type: 'success',
       })
-      }
+
-      // //从后端重新拉取数据
+      request.addAnimalRequest(data).then(response => {
-      // this.getAnimals()
+        if (response.data.code===1){
-      // this.search()
+          //添加成功
 
           // 刷新数据
           this.refresh()
 
           this.dialog.addDialogVisible = false//添加成功关闭窗口
+
+          return ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+        }
+      })
     },
 
     //以时间线的形式查看该动物的所有档案记录
@@ -217,11 +234,7 @@ export default {
     // 判断表单是否为空
     isEmpty(form) {
       if (!form.name) {
-        //返回提示
+        return true
-        return ElMessage({
-          message: '动物名不能为空',
-          type: 'warning',
-        })
       }
     },
 
@@ -278,18 +291,24 @@ export default {
       console.log('刷新数据')
 
       //先拉取一遍数据
-      this.getAnimals()
+      request.queryAnimalRequest().then(response => {
-
+        if (response.data.code === 1) {
+          this.updateAnimals(frontendAnimals(response.data.data))
+        }
         //可能输入了搜索关键字，故执行一次搜索
         this.search()
 
         //获取结果的分页
         this.getPagesData()
+      })
     },
   },
   mounted() {
     // 加载完成后拉取数据
     this.refresh()
+    // request.queryAnimalRequest(0).then(response => {
+    //   console.log(response.data,"11111111111111111111111111111")
+    // })
   }
 }
 </script>
@@ -375,7 +394,7 @@ export default {
   </div>
 
   <!--  添加动物对话框-->
-  <el-dialog v-model="dialog.addDialogVisible" title="添加动物" width="500" align-center draggable overflow>
+  <el-dialog v-model="dialog.addDialogVisible" title="添加动物" width="500" align-center draggable overflow destroy-on-close>
     <ZooAnimalFormDialog>
       <template #default="scope">
         <el-button @click="dialog.addDialogVisible = false">

src/pages/ZooLogin.vue

@@ -1,6 +1,6 @@
 <script>
-
+import {mapMutations, mapState} from "vuex";
-import {mapMutations, mapState, mapActions} from "vuex";
+import request, {frontendLoginUser} from "@/utils/request.js";
 
 export default {
   name: "ZooContainer",
@@ -8,8 +8,8 @@ export default {
     return {
       // 登录表单数据
       form: {
-        username: '',
+        username: 'admin',
-        password: '123456',
+        password: '123',
       },
       picture: [
         'https://www4.bing.com//th?id=OHR.BambooPanda_ZH-CN8455481760_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
@@ -23,7 +23,6 @@ export default {
     ...mapState(['loginUser'])
   },
   methods: {
-    ...mapActions(['getLoginUser']),
     ...mapMutations(['updateLoginUser']),
     // 登录
     login() {
@@ -37,16 +36,25 @@ export default {
         })
       }
 
-      //此处接入后端登录接口
+      //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
-      this.getLoginUser(this.form)//通过表单获取登录的用户
+      request.login(this.form).then(response => {
-
+        if (response.data.code === 1) {
-      //能获取到登录后的数据，说明登录成功
+          // 登录成功
-      if (this.loginUser) {
+          this.updateLoginUser(frontendLoginUser(response.data.data, this.form.username))
-        localStorage.setItem('username', this.loginUser.username);//本地存储登录用户名
+          localStorage.setItem('username', this.form.username);//本地存储登录用户名
-
           // 跳转到面板首页
           this.$router.push('/panel/home')
+          return ElMessage({
+            message: '登录成功',
+            type: 'success',
+          })
+        } else {
+          return ElMessage({
+            message: '用户名不存在或密码错误',
+            type: 'error',
+          })
         }
+      })
     },
     //重置表单
     reset() {
@@ -67,7 +75,6 @@ export default {
 <template>
   <div id="login-root">
     <!--    背景图片-->
-<!--    <img src="https://www4.bing.com//th?id=OHR.BambooPanda_ZH-CN8455481760_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" width="90%" height="auto" class="center"/>-->
     <div>
       <el-carousel motion-blur height="700px" style="width: auto;">
         <el-carousel-item v-for="(item,index) in picture" :key="index" style="text-align: center">

src/pages/ZooPanel.vue

@@ -3,6 +3,7 @@ import ZooHeader from "@/components/ZooHeader.vue";
 import ZooAside from "@/components/ZooAside.vue";
 import ZooMain from "@/components/ZooMain.vue";
 import ZooFooter from "@/components/ZooFooter.vue";
+import {mapActions} from "vuex";
 
 export default {
   name: "ZooPanel",
@@ -14,15 +15,17 @@ export default {
     }
   },
   methods: {
-
+    ...mapActions(['getUsers','getAnimals','getArchives','getBreedingPlans','getHealths'])
   },
   components: {
     ZooHeader,
     ZooAside,
     ZooMain,
     ZooFooter
+  },
+  mounted() {
+    this.getAnimals();
   }
-
 }
 </script>
 

src/pages/ZooUser.vue

@@ -27,7 +27,7 @@ export default {
         addDialogVisible: false,//添加弹窗
         editDialogVisible: false,//编辑弹窗
         detailDialogVisible: false,//详情弹窗
-      }
+      },
     }
   },
   computed: {
@@ -57,7 +57,6 @@ export default {
     searchInput: {
       deep: true,
       handler(val) {
-        // this.search()
         this.refresh();
       }
     }

src/pages/data.vue

@@ -46,7 +46,7 @@ export default {
         message: '成功',
         type: 'success',
       })
-    }
+    },
   }
 }
 </script>

src/store/index.js

@@ -1,26 +1,19 @@
 import {createStore} from "vuex";
 import {copy, generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
+import request, {frontendAnimals, frontendLoginUser} from "@/utils/request.js";
+import router from "@/router/index.js";
 
 const actions = {
-    //获取登录用户
-    getLoginUser(context, value) {
-        //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
-        //密码错误
-        if (false) {
-            return ElMessage({
-                message: '用户名不存在或密码错误',
-                type: 'error',
-            })
-        }
-        const user = context.state.users.find(user => user.username === value.username)
-        user.auth = 0
-        //登录成功
-        context.commit('updateLoginUser', user);//存储登录用户,这里拉取远程登录的用户作为参数
-    },
     //获取用户数据
     getUsers(context) {
         console.log('getUsers')
         //通过后端获取数据
+        // request.queryUserRequest().then(response => {
+        //     if (response.data.code === 1) {
+        //         context.commit('updateUsers', response.data.data);
+        //         console.log(response.data.data);
+        //     }
+        // })
         // context.commit('updateUsers', generateUsers())
         context.commit('updateUsers', context.state.users);
     },
@@ -28,8 +21,13 @@ const actions = {
     getAnimals(context) {
         console.log('getAnimals')
         // 通过后端获取数据
+        request.queryAnimalRequest().then(response => {
+            if (response.data.code === 1) {
+                context.commit('updateAnimals', frontendAnimals(response.data.data));
+            }
+        })
         // context.commit('updateAnimals', generateAnimals())
-        context.commit('updateAnimals', context.state.animals);
+        // context.commit('updateAnimals', context.state.animals);
     },
     //获取饲养计划
     getBreedingPlans(context) {
@@ -120,7 +118,7 @@ const state = {
     //登录用户数据
     loginUser: {
         id:0,
-        username: 'user1',
+        username: '',
         auth: 0
     },
     // //用户数据

src/utils/request.js

@@ -1,7 +1,180 @@
-import store from "@/store/index.js";
+import axios from "axios";
+import {id} from "element-plus/es/locale/index";
 
-export function getUserById(id) {
+const instance = axios.create({
-    const data = store.state.users.find(e => e.id === id);
+    baseURL: 'http://localhost:8888',
+})
 
-    return data;
+export default {
+    login(form) {
+        const formData = new FormData();
+        formData.append('username', form.username);
+        formData.append('password', form.password);
+        return instance.post("/zoo/login/login", formData);
+    },
+    // queryUserRequest(id) {
+    //     return instance.get("/zoo/admin/info", id)
+    // },
+    // addUserRequest(user) {
+    //     return instance.post("/zoo/admin/add", user);
+    // },
+    //动物请求
+    addAnimalRequest(animal) {
+        return instance.post("/zoo/animal/add", backendAnimal(animal));
+    },
+    deleteAnimalRequest(aid) {
+        return instance.get("/zoo/animal/delete", {params: {aid}});
+    },
+    updateAnimalRequest(animal) {
+        return instance.post("/zoo/animal/update", backendAnimal(animal));
+    },
+    queryAnimalRequest(aid) {
+        return instance.get("/zoo/animal/info", {params: {aid}})
+    },
+
+    //饲养计划请求
+    addBreedingPlanRequest(breedingPlan) {
+        return instance.post("/zoo/plan/add", backendBreeding(breedingPlan));
+    },
+    deleteBreedingPlanRequest(id) {
+        return instance.get("/zoo/plan/delete", {params: {id}})
+    },
+    updateBreedingPlanRequest(breedingPlan) {
+        return instance.post("/zoo/plan/update", backendBreeding(breedingPlan));
+    },
+    queryBreedingPlanRequest(id) {
+        return instance.get("/zoo/plan/info", {params: {id}})
+    },
+
+    //档案请求
+    addArchiveRequest(archive) {
+        return instance.post("/com/zoo/archive/add", backendArchive(archive));
+    },
+    deleteArchiveRequest(id) {
+        return instance.get("/com/zoo/archive/delete", {params: {id}})
+    },
+    updateArchiveRequest(archive) {
+        return instance.post("/com/zoo/archive/update", backendArchive(archive));
+    },
+    queryArchiveRequest(id) {
+        return instance.get("/com/zoo/archive/info", {params: {id}})
+    },
+
+    //健康记录请求
+    addHealthRequest(health) {
+        return instance.post("/com/zoo/health/add", backendHealth(health));
+    },
+    deleteHealthRequest(id) {
+        return instance.get("/com/zoo/health/delete", {params: {id}})
+    },
+    updateHealthRequest(health) {
+        return instance.post("/com/zoo/health/update", backendHealth(health));
+    },
+    queryHealthRequest(id) {
+        return instance.get("/com/zoo/health/info", {params: {id}})
+    }
+}
+
+// export function getUserById(id) {
+//     const data = store.state.users.find(e => e.id === id);
+//
+//     return data;
+// }
+
+// 将后端对象转化为符合前端需求的对象
+export function frontendLoginUser(data, username) {
+    return {
+        id: data.roleid,
+        username: username,
+        auth: data.permissions
+    };
+}
+
+export function frontendAnimals(animals) {
+    const newAnimals = []
+    animals.forEach((element) => {
+        newAnimals.push(frontendAnimal(element))
+    })
+    return newAnimals
+}
+
+export function frontendAnimal(animal) {
+    return {
+        id: animal.aId,
+        name: animal.name,
+        sex: animal.sex === 0 ? '雄性' : '雌性',
+        species: animal.species,//种类
+        weight: animal.weight,
+        height: animal.height,
+        state: animal.state,//状态（0正常 1异常）
+        roleId: animal.roleid,//饲养员id
+        color: animal.color,//颜色
+        features: animal.features,//特征
+        phase: animal.phase//生长阶段
+    }
+}
+
+// 将前端对象的属性转为能和后端对应上属性的对象
+export function backendUser(user) {
+    return {}
+}
+
+export function backendAnimal(animal) {
+    return {
+        aId: animal.id,
+        name: animal.name,
+        sex: animal.sex,
+        species: animal.species,
+        weight: animal.weight,
+        height: animal.height,
+        state: animal.state,
+        roleid: animal.roleId,
+        color: animal.color,
+        features: animal.features,
+        phase: animal.phase
+    }
+}
+
+export function backendBreeding(breeding) {
+    return {
+        id: breeding.id,
+        name: breeding.name,
+        species: breeding.species,
+        sex: breeding.sex,
+        phase: breeding.phase,
+        state: breeding.state,
+        roleid: breeding.roleId,
+        description: breeding.description,
+    }
+}
+
+export function backendArchive(archive) {
+    return {
+        id: archive.id,
+        animallId: archive.animalId,
+        animalName: archive.animalName,
+        phase: archive.phase,
+        state: archive.state,
+        type: archive.type,
+        date: archive.date,
+        time: archive.time,
+        roleId: archive.roleId,
+        description: archive.description,
+    }
+}
+
+export function backendHealth(health) {
+    return {
+        id: health.id,
+        animalId: health.animalId,
+        animalName: health.animalName,
+        state: health.state,
+        temperature: health.temperature,
+        breathRate: health.breathRate,
+        heartRate: health.heartRate,
+        bloodPressure: health.bloodPressure,
+        date: health.date,
+        time: health.time,
+        description: health.description
+    }
 }

vite.config.js

@@ -22,5 +22,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server:{
+    port:5000
   }
 })