user login

src/api/user.ts

@@ -3,7 +3,7 @@ const authorize = (params: any) => {
   return request({
     url: '/api/vi/authorize',
     method: 'post',
-    data: {}
+    data: params
   })
 }
 

src/components/layout/NavBar.vue

@@ -2,6 +2,7 @@
   <div class="nav-main">
     当前时间：{{ time }}
     <span>论一个程序员的寂寞与忧伤</span>
+    <span>{{ user.name }}</span>
 
     <el-button icon="open_side" circle></el-button>
     <el-dropdown>
@@ -12,19 +13,21 @@
         <el-dropdown-item>删除</el-dropdown-item>
       </el-dropdown-menu>-->
     </el-dropdown>
-    <span @click="doLogin">登录</span>  </div>
+    <span @click="doLogin" v-show="!user.name">登录</span>  </div>
 </template>
 
 <script setup lang='ts'>
 import $moment from "moment";
 import { ref } from "vue";
 import router from '../../router'
+import { useUserStore } from '../../store/user'
 
 const getTime = () => {
   return $moment().format("YYYY年MM月DD日　HH:mm:ss");
 };
 
 let time = ref<String>(getTime());
+const user = useUserStore()
 
 const timeChange = () => {
   time.value = getTime();

src/components/login/login.vue

@@ -1,15 +1,19 @@
 <template>
   <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 ref="ruleFormRef" :model="loginForm" :rules="loginRules" status-icon label-width="120px"
+      class="demo-ruleForm">
+      <div class="title-container">
+        <h3>私人空间</h3>
+      </div>
       <el-form-item label="用户名" prop="pass">
-        <el-input v-model="userForm.user_id" type="password" autocomplete="off" />
+        <el-input v-model="loginForm.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-input v-model="loginForm.password" type="password" autocomplete="off" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="dologin">login</el-button>
+        <el-button type="primary" @click="dologin(ruleFormRef)">login</el-button>
       </el-form-item>
     </el-form>
     ------------------------------------------------------------
@@ -24,23 +28,49 @@
 import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { authorize } from '../../api/user';
+import { useUserStore } from '../../store/user'
+import router from '../../router'
+const user = useUserStore()
 
-const userForm = reactive({
+const ruleFormRef = ref<FormInstance>()
+const loginForm = reactive({
   user_id: '',
   password: ''
 })
 
+const validateUserName = (rule: any, value: string, callback: Function) => {
+  if (!value) {
+    callback(new Error("请输入的用户名"))
+  } else {
+    callback()
+  }
+}
+const validatePassword = (rule: any, value: string, callback: Function) => {
+  if (!value) {
+    callback(new Error("请输入密码"))
+  } else {
+    callback()
+  }
+}
+const loginRules = reactive({
+  user_id: [{ validator: validateUserName, trigger: 'blur' }],
+  password: [{ validator: validatePassword, trigger: 'blur' }]
+})
 
-const dologin = (form: FormInstance | undefined) => {
 
-  if (!form) return
+const dologin = (form: FormInstance) => {
-  form.validate((valid) => {
+
+  if (!form)
+    return
+  form.validate((valid: any) => {
     if (valid) {
-      let validForm = {
+      user.login(loginForm.user_id, loginForm.password).then(res => {
-      }
+        console.log(1)
-      authorize(validForm).then(response => {
+        router.push({
-
+          path: '/home'
+        })
       })
+
     } else {
       return false
     }
@@ -51,6 +81,10 @@ const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
 }
+
+
+
+
 </script>
 <style scoped>
 .text {

src/store/user.ts

@@ -0,0 +1,65 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { authorize } from '../api/user'
+import { getToken, setToken, resetToken, setUserInfo } from '../utils/auth'
+
+/**
+ * Simulate a login
+ * @param {string} a
+ * @param {string} p
+ */
+// function apiLogin(a, p) {
+//   if (a === 'ed' && p === 'ed') return Promise.resolve({ isAdmin: true })
+//   if (p === 'ed') return Promise.resolve({ isAdmin: false })
+//   return Promise.reject(new Error('invalid credentials'))
+// }
+
+export const useUserStore = defineStore({
+  id: 'user',
+  state: () => ({
+    name: '',
+    token: '',
+  }),
+
+  getters: {
+
+  },
+  actions: {
+    logout() {
+      this.$patch({
+        name: '',
+        token: '',
+      })
+
+      // we could do other stuff like redirecting the user
+    },
+
+    /**
+     * Attempt to login a user
+     * @param {string} user_id
+     * @param {string} user_password
+     */
+    async login(user_id: string, user_password: string) {
+      const userData = await authorize({ user_id, user_password })
+      if (userData.data.token) {
+        this.$patch({
+          name: user_id,
+          ...userData.data,
+        })
+        setToken(userData.data.token)
+        setUserInfo(userData)
+        console.log('authorize success!')
+      }
+      return new Promise((resolve, reject) => {
+        if (userData.data.message) {
+          reject(userData.data.message)
+        } else {
+          resolve(userData.data)
+        }
+      })
+    },
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
+}

src/utils/auth.ts

@@ -9,8 +9,12 @@ const setToken = (token: String) => {
   Cookies.set('token', token)
 }
 
+const setUserInfo = (userinfo: any) => {
+  Cookies.set('userinfo', userinfo)
+}
+
 const resetToken = (token: String) => {
   Cookies.set('token', "")
 }
 
-export { getToken, setToken, resetToken }
+export { getToken, setToken, resetToken, setUserInfo }

src/view/blog/index.vue

@@ -1,22 +1,17 @@
 <template>
   <div class="blog_list" v-for="item in data_list">
-    <span style="cursor: pointer;" @click="openBlog">{{ item.blog_title }}</span>
+    <h3 style="cursor: pointer;" @click="openBlog">{{ item.blog_title }}</h3>
-    <span style="font-size: 12px;">{{ item.blog_prex }}</span>
+    <span style="font-size: 12px;">{{ item.blog_prex }}</span>  </div>
-  </div>
-  <!-- <md-editor v-model="text" previewOnly /> -->
 </template>
 
 <script setup lang="ts">
-import MdEditor from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
 import { reactive, ref } from 'vue';
 import { get_blogs } from '../../api/blog'
 import router from '../../router/index'
 
-
 type Blog = {
-  blog_id: number,
+  blog_id: String,
-  blog_type_id: number,
+  blog_type_id: String,
   blog_type_name: string,
   blog_title: string,
   blog_prex: string

src/view/bookmark/index.vue

@@ -12,24 +12,15 @@
         </el-col>
       </el-row>
       <div class="tag_list">
-        <el-tag
+        <el-tag class="ml-2 click-icon" :type="item.clicked ? 'danger' : 'info'" v-for="(item) in bookmark_types"
-          class="ml-2 click-icon"
+          @click="handleTags(item)">{{ item.bk_type_name }}</el-tag>
-          :type="item.clicked ? 'danger' : 'info'"
-          v-for="(item) in bookmark_types"
-          @click="handleTags(item)"
-        >{{ item.bk_type_name }}</el-tag>
       </div>
     </el-form>
     <div class="create_dialog">
       <el-button type="primary" @click="handleInsert">新建</el-button>
     </div>
 
-    <el-table
+    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
-      ref="multipleTableRef"
-      :data="tableData"
-      @selection-change="handleSelectionChange"
-      style="width: 100%"
-    >
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="index" width="180" />
       <el-table-column prop="bk_type_name" label="分类" width="180" />
@@ -55,19 +46,13 @@
     </div>
 
     <el-dialog v-model="dialogFormVisible" title="添加书签">
-      <bookmark_dialog
+      <bookmark_dialog :dialog_form="currentDialogData" :operate_code="operate" :types="bookmark_types"
-        :dialog_form="currentDialogData"
+        @on-concel="closeDialog" @on-submit="doSubmit"></bookmark_dialog>
-        :operate_code="operate"
-        :types="bookmark_types"
-        @on-concel="closeDialog"
-        @on-submit="doSubmit"
-      ></bookmark_dialog>
     </el-dialog>
 
     <el-dialog v-model="dialogVisible">
       <delete_dialog :delete_id="currentDialogData.bk_id" @on-submit="doDelete"></delete_dialog>
-    </el-dialog>
+    </el-dialog>  </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -99,7 +84,7 @@ bookmark_type().then(response => {
 
 // 定义书签格式
 type Bookmark = {
-  bk_id: number,
+  bk_id: string,
   bk_type_id: number,
   bk_type_name: String,
   comment: String,
@@ -121,7 +106,7 @@ const search_form = reactive<Searchform>({
 const tableData = reactive<Bookmark[]>([])
 // 响应式dialog数据
 const currentDialogData = reactive<Bookmark>({
-  bk_id: -1,
+  bk_id: "-1",
   bk_type_id: 1,
   bk_type_name: '未分类',
   comment: '',
@@ -150,7 +135,7 @@ let dialogVisible = ref(false)
 // 操作-》添加
 const handleInsert = () => {
   operate.value = '0'
-  currentDialogData.bk_id = -1
+  currentDialogData.bk_id = "-1"
   currentDialogData.bk_type_id = 1
   currentDialogData.bk_type_name = '未分类'
   currentDialogData.comment = ''
@@ -190,7 +175,7 @@ const handleSelectionChange = (val: Bookmark[]) => {
 }
 
 const openUrl = (url: string) => {
-  window.open("https://www.runoob.com");
+  window.open(url);
 }
 
 const doSearch = () => {
@@ -243,11 +228,13 @@ const copyNumber = (record: Bookmark) => {
   border-top: 1px solid rgba(151, 151, 151, 0.3);
   border-bottom: 1px solid rgba(151, 151, 151, 0.3);
 }
+
 .click-icon {
   width: 40px;
   margin: 10px;
   cursor: pointer;
 }
+
 .create_dialog {
   margin: 10px;
 }