添加登录页面和基本操作

src/App.vue

@@ -3,19 +3,26 @@ import TopHeader from "@/components/TopHeader.vue";
 import IndexHeader from "@/components/IndexHeader.vue";
 import IndexFooter from "@/components/IndexFooter.vue";
 import BackToTop from "@/components/BackToTop.vue";
+import {computed} from "vue";
+import {useRoute} from "vue-router";
+
+const route = useRoute()
+
+const isAuthPage = computed(
+    () => route.name === 'login' || route.name === 'register')
 </script>
 
 <template>
   <div>
-    <top-header/>
+    <top-header v-if="!isAuthPage"/>
-    <index-header/>
+    <index-header v-if="!isAuthPage"/>
     <div class="smooth-body">
       <div class="smooth-content">
         <router-view/>
-        <index-footer/>
+        <index-footer v-if="!isAuthPage"/>
       </div>
     </div>
-    <back-to-top/>
+    <back-to-top v-if="!isAuthPage"/>
   </div>
 </template>
 

src/router/index.js

@@ -25,6 +25,10 @@ const router = createRouter({
           component: () => import('@/views/course/CourseDetail.vue')
         }
       ]
+    }, {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/auth/Login.vue'),
     }
   ],
 })

src/views/auth/Login.vue

@@ -0,0 +1,100 @@
+<script setup>
+import {onMounted, reactive} from "vue";
+import request from "@/net/index.js";
+
+const verify = reactive({
+  img: '',
+  uuid: ''
+})
+
+const form = reactive({
+  username: '',
+  password: '',
+  code: ''
+})
+
+function login() {
+  request.post('/login', {
+    username: form.username,
+    password: form.password,
+    code: form.code,
+    uuid: verify.uuid
+  }).then(({ data }) => {
+    if(data.code !== 200) {
+      refreshImage()
+      console.info('登录失败')
+    } else {
+      console.info('登录成功', data)
+    }
+  })
+}
+
+function refreshImage() {
+  request.get('/captchaImage').then(({ data }) => {
+    verify.img = data.img
+    verify.uuid = data.uuid
+  })
+}
+
+onMounted(refreshImage)
+</script>
+
+<template>
+  <div>
+    <div class="log-regi-area" style="height: 100vh;padding: 0">
+      <div class="container" style="height: 100%;display: flex;align-items: center;justify-content: center">
+        <div class="row">
+          <div style="width: 500px">
+            <div class="log-area">
+              <h2>登录</h2>
+              <div class="form-floating mb-3">
+                <input type="email" class="form-control" id="floatingInput1"
+                       v-model="form.username"
+                       placeholder="Username Or Email address *">
+                <label class="lable-text" for="floatingInput1">用户名
+                  *</label>
+              </div>
+              <div class="form-floating relative mb-4">
+                <input type="password" class="form-control relative" id="floatingPassword2"
+                       v-model="form.password"
+                       placeholder="Password *">
+                <label class="lable-text" for="floatingPassword2">密码 *</label>
+
+                <div class="password-key">
+                  <i class="icon-eye"></i>
+                </div>
+              </div>
+              <div class="row">
+                <div class="form-floating mb-5 col-8">
+                  <input type="email" class="form-control" id="floatingInput1"
+                         v-model="form.code"
+                         placeholder="Username Or Email address *">
+                  <label class="lable-text" for="floatingInput1">验证码
+                    *</label>
+                </div>
+                <div class="col-4">
+                  <img data-v-d0e06bca="" :src="`data:image/gif;base64,${verify.img}`" class="login-code-img">
+                </div>
+              </div>
+
+              <div class="rem-forgot-btn">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" value="" id="rememberMe1" checked="">
+                  <label class="form-check-label" for="rememberMe1">
+                    记住我
+                  </label>
+                </div>
+              </div>
+
+              <button type="submit" class="auth-btn w-100 mt-5" @click="login">立即登录</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>