src/components/CustomCard.vue

@@ -28,4 +28,39 @@ defineProps({
   </a-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+.card {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  box-sizing: border-box;
+
+  .avatar {
+    width: 50%;
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  .name {
+    width: 50%;
+  }
+
+  .content {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .card {
+    width: 160px;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  .card {
+    width: 200px;
+  }
+}
+</style>

src/components/CustomLogin.vue

@@ -2,7 +2,6 @@
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import { computed, reactive } from 'vue'
 import router from '@/router/index.js'
-import { setToken } from '@/utils/auth.js'
 
 const formState = reactive({
   account: '',
@@ -23,8 +22,8 @@ const onfinish = async () => {
     })
 
     if (response.ok) {
-      console.log(`formState.account:${formState.account}`)
+      const data = await response.json()
-      setToken(formState.account)
+      console.log(data)
       await router.push('/')
     } else {
       console.error('Login failed', response.statusText)

src/components/TestApi.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 
 <template>
   <button @click="testapi">测试接口调用</button>
-  <p v-if="this.test !== ''">
+  <p v-if="this.test != ''">
     {{ this.test[0].name }}<br />
     {{ this.test[0].birth }}<br />
     {{ this.test[0].gender }}<br />

src/layouts/DefaultLayout.vue

@@ -3,8 +3,6 @@ import CustomCard from '@/components/CustomCard.vue'
 import { RouterView } from 'vue-router'
 import { h, ref } from 'vue'
 import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
-import router from '@/router/index.js'
-import { removeToken } from '@/utils/auth.js'
 
 const current = ref(['mail'])
 const items = ref([
@@ -27,24 +25,6 @@ const items = ref([
     title: '工具'
   }
 ])
-
-const logout = async () => {
-  const response = await fetch('http://localhost:3000/logout', {
-    method: 'POST',
-    cache: 'default',
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8'
-    },
-    credentials: 'include'
-  })
-
-  if (response.ok) {
-    removeToken()
-    await router.push('/login')
-  } else {
-    console.error('Logout failed', response.statusText)
-  }
-}
 </script>
 
 <template>
@@ -72,7 +52,6 @@ const logout = async () => {
         :defaultCollapsed="true"
       >
         <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
-        <a-button @click="logout">退出登录</a-button>
       </a-layout-sider>
     </a-layout>
     <a-layout-footer>footer</a-layout-footer>

src/router/index.js

@@ -6,7 +6,6 @@ import DefaultLayout from '../layouts/DefaultLayout.vue'
 import LoginLayout from '@/layouts/LoginLayout.vue'
 import LoginView from '@/views/LoginView.vue'
 import HomeView from '@/views/HomeView.vue'
-import { getToken } from '@/utils/auth.js'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,25 +43,11 @@ const router = createRouter({
         {
           path: '',
           name: 'Login',
-          component: LoginView,
+          component: LoginView
-          meta: {
-            requiresAuth: true
-          }
         }
       ]
     }
   ]
 })
 
-router.beforeEach((to, from, next) => {
-  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
-
-  if (!requiresAuth && !getToken()) {
-    next({ path: '/login' })
-  } else {
-    console.log('next')
-    next()
-  }
-})
-
 export default router

src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'account'
+const TokenKey = 'Admin-Token'
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/utils/time.js

@@ -21,7 +21,7 @@ function dateTimeToTimestamp(pattern, datetime) {
 }
 
 Date.prototype.Format = function (fmt) {
-  const o = {
+  var o = {
     'M+': this.getMonth() + 1, //月份
     'd+': this.getDate(), //日
     'h+': this.getHours(), //小时
@@ -32,7 +32,7 @@ Date.prototype.Format = function (fmt) {
   }
   if (/(y+)/.test(fmt))
     fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
-  for (const k in o)
+  for (var k in o)
     if (new RegExp('(' + k + ')').test(fmt))
       fmt = fmt.replace(
         RegExp.$1,

src/views/AboutView.vue

@@ -5,4 +5,11 @@ import CustomNews from '@/components/CustomNews.vue'
   <CustomNews />
 </template>
 
-<style></style>
+<style>
+@media (min-width: 1024px) {
+  .about {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/UserListView.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>