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

src/assets/admin/css/home.css

@@ -111,3 +111,15 @@ li {
     flex: 1;
     overflow-y: auto;
 }
+
+/* 重写 ElementPlus 默认样式 */
+/* 表格 */
+.el-table {
+    margin-top: 7px;
+    width: 1000px;
+}
+
+/* 面包屑 */
+.el-breadcrumb {
+    margin-bottom: 7px;
+}

src/router/index.js

@@ -1,5 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router"
-import {useAdminStore} from "@/stores/admin/admin.js";
+import { useAdminStore } from "@/stores/admin/admin.js";
+import { ElMessage } from "element-plus";
+import TimeDR from "@/utils/TimeDR.js"
+import LocalDR from "@/utils/LocalDR.js"
+
 const routes= [
     {
         path: "/",  //http://localhost:5173/
@@ -50,10 +54,25 @@ router.beforeEach((to, from, next) => {
             console.log("未登录")
             router.push("/login")
         }
-    }else{
+
-        console.log("不需要身份验证")
+        let startTime = TimeDR.now()
+        let endTime = adminStore.data.exporeDate
+        let timeSubResult = TimeDR.timeSub(startTime,endTime)
+        console.log("timeSubResult:",timeSubResult)
+        if (timeSubResult.expire){
+            ElMessage.error("登录已过期，请重新登录")
+
+            LocalDR.remove("admin")
+            router.push("/login")
+
         }
         next()
+
+    }else{
+        console.log("不需要身份验证")
+        next()
+    }
+
 })
 
 

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/utils/TimeDR.js

@@ -0,0 +1,58 @@
+/*
+    作者: 邓瑞
+    版本: 1.0
+    网站: www.dengruicode.com
+    日期: 2024-04-21
+*/
+
+const TimeDR = {
+    now() {
+        let date = new Date()
+
+        let yyyy = date.getFullYear()
+        let MM = String(date.getMonth() + 1).padStart(2, '0')
+        let dd = String(date.getDate()).padStart(2, '0')
+        let HH = String(date.getHours()).padStart(2, '0')
+        let mm = String(date.getMinutes()).padStart(2, '0')
+        let ss = String(date.getSeconds()).padStart(2, '0')
+
+        return `${yyyy}-${MM}-${dd} ${HH}:${mm}:${ss}`
+    },
+
+    // 时间相减
+    // let startTime = "2024-04-20 11:30:00"
+    // let endTime = "2024-04-22 12:00:00"
+    // let timeSubResult = TimeDR.timeSub(startTime,endTime)
+    timeSub(startTime, endTime) {
+        let startDate = new Date(startTime)
+        let endDate = new Date(endTime)
+
+        let expire = false
+        let expireText = '距离过期还差'
+        let duration = endDate - startDate
+        if (duration < 0) {
+            expire = true
+            expireText = '已过期'
+            duration = -duration // 取负数时间差的绝对值
+        }
+
+        // 天数、小时数、分钟数、秒数
+        let day = Math.floor(duration / (24 * 60 * 60 * 1000))
+        let hour = Math.floor((duration / (60 * 60 * 1000)) % 24)
+        let minute = Math.floor((duration / (60 * 1000)) % 60)
+        let second = Math.floor(duration / 1000) % 60
+
+        return {
+            expire,
+            startDate,
+            endDate,
+            day,
+            hour,
+            minute,
+            second,
+            remark: `${expireText} ${day} 天 ${hour} 小时 ${minute} 分钟 ${second} 秒`,
+        }
+    }
+}
+
+export default TimeDR

src/views/admin/administrator/list.vue

@@ -1,18 +1,52 @@
 <template>
-  <div>
+  <el-table :data="data.list" border>
-    管理员列表
+    <el-table-column prop="id" label="ID" width="60" />
+    <el-table-column prop="name" label="名称" />
+    <el-table-column prop="email" label="邮箱" />
+    <el-table-column prop="remark" label="备注" />
 
-  </div>
+    <el-table-column label="操作" width="150">
+      <template #default="scope">
+        <el-button size="small" type="primary">编辑</el-button>
+        <el-button size="small">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 
-<script>
+<script setup>
-export default {
-  setup() {
 
+//模拟数据
 
-    return {}
+    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>
 
 <style lang="scss" scoped>