simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user login

Browse Source
This commit is contained in:
simple321vip
2022-04-12 23:36:57 +08:00
parent 1c8c8264c2
commit 18da3c57b7
7 changed files with 137 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/user.ts
+1 -1
View File
@@ -3,7 +3,7 @@ const authorize = (params: any) => {
return request({
url: '/api/vi/authorize',
method: 'post',
data: {}
data: params
})
}
src/components/layout/NavBar.vue
+4 -1
View File
@@ -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
+47 -13
View File
@@ -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 dologin = (form: FormInstance | undefined) => {
if (!form) return
form.validate((valid) => {
if (valid) {
let validForm = {
const validateUserName = (rule: any, value: string, callback: Function) => {
if (!value) {
callback(new Error("请输入的用户名"))
} else {
callback()
}
authorize(validForm).then(response => {
}
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) => {
if (!form)
return
form.validate((valid: any) => {
if (valid) {
user.login(loginForm.user_id, loginForm.password).then(res => {
console.log(1)
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
+65
View File
@@ -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
+5 -1
View File
@@ -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
+4 -9
View File
@@ -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>
<span style="font-size: 12px;">{{ item.blog_prex }}</span>
</div>
<!-- <md-editor v-model="text" previewOnly /> -->
<h3 style="cursor: pointer;" @click="openBlog">{{ item.blog_title }}</h3>
<span style="font-size: 12px;">{{ item.blog_prex }}</span> </div>
</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_type_id: number,
blog_id: String,
blog_type_id: String,
blog_type_name: string,
blog_title: string,
blog_prex: string
src/view/bookmark/index.vue
+12 -25
View File
@@ -12,24 +12,15 @@
</el-col>
</el-row>
<div class="tag_list">
<el-tag
class="ml-2 click-icon"
:type="item.clicked ? 'danger' : 'info'"
v-for="(item) in bookmark_types"
@click="handleTags(item)"
>{{ item.bk_type_name }}</el-tag>
<el-tag class="ml-2 click-icon" :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
ref="multipleTableRef"
:data="tableData"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table 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
:dialog_form="currentDialogData"
:operate_code="operate"
:types="bookmark_types"
@on-concel="closeDialog"
@on-submit="doSubmit"
></bookmark_dialog>
<bookmark_dialog :dialog_form="currentDialogData" :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>
</div>
</el-dialog> </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;
}