22.封装axios和调用管理员列表接口

src/utils/AxiosDr.js

@@ -0,0 +1,51 @@
+/*
+    作者: 邓瑞
+    版本: 1.0
+    网站: www.dengruicode.com
+    日期: 2024-04-21
+*/
+
+import axios from 'axios'
+
+const axiosInstance = axios.create({  // axios 实例
+    //baseURL: "http://127.0.0.1:8008",
+    baseURL: import.meta.env.VITE_API_URL,
+    timeout: 5000
+})
+
+const get = (url, data = {}) => {
+    return axiosInstance.get(url, { params: data }).then(response => response.data)
+}
+
+const post = (url, data = null) => {
+    return axiosInstance.post(url, data).then(response => response.data)
+}
+
+const postForm = (url, data = null) => {
+    return axiosInstance.post(url, data, {
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    })
+        .then(response => response.data)
+}
+
+const postFile = (url, data = null) => {
+    return axiosInstance.post(url, data, {
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        }
+    })
+        .then(response => response.data)
+}
+
+const postToken = (url, token, data = null) => {
+    return axiosInstance.post(url, data, {
+        headers: {
+            'Authorization': `Bearer ${token}`
+        }
+    })
+        .then(response => response.data)
+}
+
+export default { get, post, postForm, postFile, postToken }

src/views/admin/administrator/list.vue

@@ -15,13 +15,37 @@
 </template>
 
 <script setup>
+
+//模拟数据
+
     import { reactive } from "vue";
+    import AxiosDR from "@/utils/AxiosDr.js";
+    import {ElMessage} from "element-plus";
+
     const data = reactive({
       list:[
         {id: '1', name: '李龙龙', email:'lilonglong@koteladt.com', remark:'lll'},
         {id: '2', name: '张三', email:'zhangsan@koteladt.com', remark:'zs'},
       ]
     })
+    AxiosDR.get('/api/adm/list').then(res => {
+      console.log(res)
+      //错误提示
+      if ( !res.status ) {
+        ElMessage.error(res.msg)
+        return
+      }
+
+      data.list = res.data.list
+    }) .catch (err => {
+      console.log("err:",err)
+    })
+
+
+
+
+
+
 
 </script>