md功能实现

src/api/user.ts

@@ -0,0 +1,10 @@
+import request from '../utils/request'
+const authorize = (params: any) => {
+  return request({
+    url: '/api/vi/authorize',
+    method: 'post',
+    data: {}
+  })
+}
+
+export { authorize }

src/components/layout/NavBar.vue

@@ -12,13 +12,13 @@
         <el-dropdown-item>删除</el-dropdown-item>
       </el-dropdown-menu>-->
     </el-dropdown>
-    <span>小管</span>
-  </div>
+    <span @click="doLogin">登录</span>  </div>
 </template>
 
 <script setup lang='ts'>
 import $moment from "moment";
 import { ref } from "vue";
+import router from '../../router'
 
 const getTime = () => {
   return $moment().format("YYYY年MM月DD日　HH:mm:ss");
@@ -30,6 +30,12 @@ const timeChange = () => {
   time.value = getTime();
 };
 setInterval(timeChange, 1000);
+
+const doLogin = () => {
+  router.push({
+    path: '/login'
+  })
+}
 </script>
 
 <style>
@@ -37,6 +43,7 @@ setInterval(timeChange, 1000);
   background: url("../../assets/logo.png") center no-repeat;
   background-size: cover;
 }
+
 .nav-main {
   float: right;
 }

src/components/login/login.vue

@@ -1,14 +1,76 @@
 <template>
-  <div class="login">
-    login
+  <div class="yuliu"></div>
+  <el-card class="box-card">
+    <el-form ref="ruleFormRef" :model="userForm" status-icon label-width="120px" class="demo-ruleForm">
+      <el-form-item label="用户名" prop="pass">
+        <el-input v-model="userForm.user_id" type="password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="用户凭证" prop="checkPass">
+        <el-input v-model="userForm.password" type="password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="dologin">login</el-button>
+      </el-form-item>
+    </el-form>
+    ------------------------------------------------------------
+    <div>
+      微信/支付宝
     </div>
+    </el-card>
+
 </template>
 
-<script setup lang="ts">
-</script>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { authorize } from '../../api/user';
 
-<style>
-.login {
-  background-color: beige;
+const userForm = reactive({
+  user_id: '',
+  password: ''
+})
+
+
+const dologin = (form: FormInstance | undefined) => {
+
+  if (!form) return
+  form.validate((valid) => {
+    if (valid) {
+      let validForm = {
+      }
+      authorize(validForm).then(response => {
+
+      })
+    } else {
+      return false
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
+<style scoped>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  padding: 18px 0;
+}
+
+.box-card {
+  width: 480px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.yuliu {
+  width: 600px;
+  height: 600px;
+  background-color: antiquewhite;
 }
 </style>

src/main.ts

@@ -15,13 +15,13 @@ app.use(router)
 app.use(ElementPlus)
 app.use(store)
 
-
+import { getToken } from './utils/auth'
 const whiteList = ['/', '/blog']
 let url = window.location.href
 console.log(url)
 if (url != 'http://localhost:3000/' && url.search("blog=") != -1) {
   let blog = {
-    blog_id: 1
+    blog_id: url.split("=")[1]
   }
   router.push({
     path: '/feedback',
@@ -30,6 +30,10 @@ if (url != 'http://localhost:3000/' && url.search("blog=") != -1) {
 }
 router.beforeEach((to, from, next) => {
   console.log(to.path, from.path)
+  if (to.path === '/login') {
+    next()
+  }
+
 
 
   if (whiteList.includes(to.path)) {

src/router/index.ts

@@ -73,7 +73,11 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/feedback",
     component: () => import('../view/blog/mdview.vue')
-  }
+  },
+  {
+    path: "/login",
+    component: () => import('../components/login/login.vue')
+  },
 ]
 
 

src/view/blog/mdview.vue

@@ -4,13 +4,14 @@
 
 <script setup lang="ts">
 import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
 import { ref } from 'vue';
 import { useRoute } from 'vue-router'
 import { get_blog } from '../../api/blog'
 let text = ref<string>('')
 const route = useRoute()
 get_blog(route.query).then(response => {
-  console.log(response.data)
+  text.value = response.data.blog_text
 })
 
 </script>