--添加登录页面

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="container">
+  <div id="container" v-if="!isLogin">
     <nav-top />
     <div style="display: flex">
       <nav-left />
@@ -14,9 +14,12 @@
       </div>
     </div>
   </div>
+  <div id="container" v-if="isLogin">
+    <router-view/>
+  </div>
 </template>
 <script>
-import { computed, defineComponent } from "vue";
+import {computed, defineComponent, ref, watch} from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import NavLeft from "@/components/NavLeft";
@@ -36,11 +39,16 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const store = useStore();
+    const isLogin = ref(false)
     // console.log("router", router.getRoutes(), route);
     const routes = computed(() => {
       return router.getRoutes().filter((e) => e.meta?.isLink);
     });
 
+    watch(() => route.path, () => {
+      route.path === '/login' && (isLogin.value = true)
+    })
+
     const currentRouteName = computed(() => route.name);
 
     //获取组织树
@@ -68,6 +76,7 @@ export default defineComponent({
     getOrgTree();
 
     return {
+      isLogin,
       routes,
       name: currentRouteName,
       zhCN,

src/api/index.js

@@ -75,3 +75,5 @@ export const getTemplateDetail = (obj) => http.get('/admin/project/template/deta
 //获取项目统计
 export const getProjectCount = (projectId) => http.get('/admin/project/projectCount', { params: { projectId: projectId } })
 
+export const login = (obj) => http.post('/admin/CheckUser/userLogin', obj)
+

src/api/method.js

@@ -169,7 +169,7 @@ const setCookie = (name, value, perpetual) => {
   console.log('存储token到cookie')
   let exdate = new Date()
   exdate.setDate(perpetual * 24 * 60 * 60 * 1000)  //exdate.setDate(exdate.getDate() + 365)
-  document.cookie = name + '=' + value + ';expires=' + exdate.toGMTString()
+  document.cookie = `${name}=${value};expires=${exdate.toGMTString()};path=/`
   //永久有效
   //document.cookie = name + '=' + value + ';expires=' + 'Fri, 31 Dec 9999 23:59:59 GMT'    
 }

src/views/login.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :style="{
+       margin: 'auto',
+  background: 'url(http://img.gz2c.com/FoTcLY8ww-ISCFlwyCoYuLim1BMt) no-repeat',
+  backgroundSize: '100% 100%',
+  width: '100%',
+  height: '100vh',
+  display:'flex'
+  }">
+    <div
+        :style="{width:'300px', height: '300px', margin:'10% auto',padding:'20px 30px',textAlign:'center', borderRadius:'10px', background:'#e0e0e0',boxShadow:'20px 20px 60px #bebebe,-20px -20px 60px #ffffff'}">
+      <div :style="{fontSize:'24px',paddingBottom:'30px'}">用户登录</div>
+      <div>
+        <a-input placeholder='用户名' v-model:value="form.account"/>
+        <a-input placeholder='密码' v-model:value="form.password" :style="{marginTop: '30px'}" type='password'/>
+        <a-button :style="{marginTop:'30px'}" @click="loginUser">登录</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {reactive, toRefs} from "vue";
+import * as api from "@/api";
+import {setCookie} from "@/api/method";
+import {useRouter} from "vue-router";
+
+export default {
+  name: "loginPage",
+  setup() {
+    const router = useRouter()
+    const state = reactive({
+      form: {
+        account: '10181461',
+        password: '1234567890Aa'
+      }
+    })
+
+    async function loginUser() {
+      const {data: {data: token}} = await api.login(state.form)
+      setCookie("token", token, 10)
+      await router.push({path: '/learningpath'})
+      location.reload()
+    }
+
+    return {
+      ...toRefs(state),
+      loginUser
+    }
+  }
+}
+</script>