xiaoxiuqing_bo
/
RoleManage_Sys
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'登录完善'

Browse Source
main
fwb 3 months ago
parent e3289e6b5b
commit f7ef90558a
8 changed files with 141 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 3
      src/api/user/index.ts
  3. 3
      src/api/user/type.ts
  4. 4
      src/store/modules/types/types.ts
  5. 32
      src/store/modules/user.ts
  6. 15
      src/utils/time.ts
  7. 10
      src/utils/token.ts
  8. 91
      src/views/login/index.vue

2
index.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小得盈满，爱逢其时</title> <title>Control is Power</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3
src/api/user/index.ts
Unescape View File

@ -5,7 +5,6 @@ import type { loginForm, loginResponseDate, userReponseData } from './type'
enum API { enum API {
LOGIN_URL = '/user/login', LOGIN_URL = '/user/login',
USERINFO_URL = '/user/info', USERINFO_URL = '/user/info',
// LOGOUT_URL = '/admin/acl/index/logout',
} }
//登录接口 //登录接口
export const reqLogin = (data: loginForm) => export const reqLogin = (data: loginForm) =>
@ -13,5 +12,3 @@ export const reqLogin = (data: loginForm) =>
//获取用户信息 //获取用户信息
export const reqUserInfo = () => export const reqUserInfo = () =>
request.get<any, userReponseData>(API.USERINFO_URL) request.get<any, userReponseData>(API.USERINFO_URL)
//退出登录
// export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

3
src/api/user/type.ts
Unescape View File

@ -5,7 +5,8 @@ export interface loginForm {
} }
interface dataType { interface dataType {
token: string token?: string
message?: string
} }
//登录接口返回数据类型 //登录接口返回数据类型
export interface loginResponseDate { export interface loginResponseDate {

4
src/store/modules/types/types.ts
Unescape View File

@ -0,0 +1,4 @@
//定义小仓库数据state类型
export interface UserState {
token: string | null
}

32
src/store/modules/user.ts
Unescape View File

@ -3,23 +3,41 @@ import { defineStore } from 'pinia'
//引入登录接口 //引入登录接口
import { reqLogin } from '@/api/user' import { reqLogin } from '@/api/user'
//引入数据类型 //引入数据类型
import type { loginForm } from '@/api/user/type' import type { loginForm, loginResponseDate } from '@/api/user/type'
import type { UserState } from '@/store/modules/types/types'
//引入操作本地存储的工具方法
import { SET_TOKEN, GET_TOKEN } from '@/utils/token'
//创建小仓库 //创建小仓库
let useUserStore = defineStore('User', { let useUserStore = defineStore('User', {
//小仓库存储数据的地方 //小仓库存储数据的地方
state: () => {}, state: (): UserState => {
return {
token: GET_TOKEN(),
// token: localStorage.getItem('TOKEN'), //用户唯一标识token
}
},
//异步|逻辑的地方 //异步|逻辑的地方
actions: { actions: {
//用户登录方法 //用户登录方法
//括号内data收集参数(实参) //括号内data收集参数(实参)
async userLogin(data: loginForm) { async userLogin(data: loginForm) {
//登录请求 //登录请求
let result = await reqLogin(data) let result: loginResponseDate = await reqLogin(data)
console.log(result) // console.log(result)
}, if (result.code == 200) {
//pinia仓库存储token
//由于pinia|vuex存储数据其实利用js对象
this.token = result.data.token as string
//本地存储持久化存储一份
// localStorage.setItem('TOKEN', (result.data.token as string))
SET_TOKEN(result.data.token as string)
//能保证当前async函数返回一个成功的promise
return 'OK'
} else {
return Promise.reject(new Error(result.data.message))
}
}, },
getters: {
}, },
getters: {},
}) })
export default useUserStore export default useUserStore

15
src/utils/time.ts
Unescape View File

@ -0,0 +1,15 @@
//封装一个函数判断时间
export const getTime = () => {
let message = ''
let hours = new Date().getHours()
if (hours <= 9) {
message = '早上'
} else if (hours <= 12) {
message = '上午'
} else if (hours <= 18) {
message = '下午'
} else {
message = '晚上'
}
return message
}

10
src/utils/token.ts
Unescape View File

@ -0,0 +1,10 @@
//封装本地存储数据与读取数据方法
//存储数据
export const SET_TOKEN = (token: string) => {
localStorage.setItem('TOKEN', token)
}
//本地存储获取数据
export const GET_TOKEN = () => {
return localStorage.getItem('TOKEN')
}

91
src/views/login/index.vue
Unescape View File

@ -3,20 +3,26 @@
<el-row> <el-row>
<el-col :span="12" :xs="0"></el-col> <el-col :span="12" :xs="0"></el-col>
<el-col :span="12" :xs="24"> <el-col :span="12" :xs="24">
<el-form class="login_form"> <el-form
class="login_form"
:model="loginForm"
:rules="rules"
ref="loginforms"
>
<h1>Hello</h1> <h1>Hello</h1>
<h2>欢迎登录</h2> <h2>欢迎登录</h2>
<el-form-item> <el-form-item prop="username">
<el-input <el-input
:prefix-icon="User" :prefix-icon="User"
v-model="loginForm.username" v-model="loginForm.username"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item prop="password">
<el-input <el-input
:prefix-icon="Lock" :prefix-icon="Lock"
type="password" type="password"
v-model="loginForm.password" v-model="loginForm.password"
show-password
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -25,6 +31,7 @@
type="primary" type="primary"
size="large" size="large"
@click="loginHandle" @click="loginHandle"
:loading="loading"
> >
登录 登录
</el-button> </el-button>
@ -37,21 +44,88 @@
<script setup lang="ts"> <script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue' import { User, Lock } from '@element-plus/icons-vue'
import { reactive } from 'vue' import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const $router = useRouter()
import { ElNotification } from 'element-plus'
//引入用户相关的小仓库 //引入用户相关的小仓库
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { getTime } from '@/utils/time'
let useStore = useUserStore() let useStore = useUserStore()
let loading = ref(false)
//获取el-form组件
let loginforms = ref()
//收集账号和密码的数据 //收集账号和密码的数据
const loginForm = reactive({ const loginForm = reactive({
username: 'admin', username: 'admin',
password: '111111', password: '111111',
}) })
const loginHandle = () => { const loginHandle = async () => {
//保证全部表单项校验通过
await loginforms.value.validate()
//开始加载
loading.value = true
//通知仓库发登录请求 //通知仓库发登录请求
//请求成功后跳转到首页（展示数据的home页面） //请求成功后跳转到首页（展示数据的home页面）
//登录失败弹出登录失败信息 //登录失败弹出登录失败信息
useStore.userLogin(loginForm) //传形参loginForm try {
await useStore.userLogin(loginForm) //传形参loginForm
ElNotification({
type: 'success',
message: '登陆成功',
title: `Hi!${getTime()}好！`,
})
// 登录成功后设置一个2秒的延迟来跳转页面
setTimeout(() => {
// 跳转到首页
$router.push('/home')
// 结束加载效果
loading.value = false
}, 1000) // 2000 毫秒 = 2 秒
} catch (error) {
loading.value = false
ElNotification({
type: 'error',
message: (error as Error).message,
})
}
}
//自定义表单校正规则
const validatorUserName = (rule: any, value: any, callback: any) => {
//rule:即为校验规则对象
// value:即为表单元素文本内容
// 函数:如果符合条件callBack放行通过即可
// 如果不符合条件callBack方法,注入错误提示信息
if (value.length >= 5) {
callback()
} else {
callback(new Error('账号长度至少五位！'))
}
}
const validatorUserPassword = (rule: any, value: any, callback: any) => {
//rule:即为校验规则对象
// value:即为表单元素文本内容
// 函数:如果符合条件callBack放行通过即可
// 如果不符合条件callBack方法,注入错误提示信息
if (value.length >= 6) {
callback()
} else {
callback(new Error('账号长度至少六位！'))
}
}
//表单校验配置
const rules = {
username: [
// { required: true, message: '用户名不能为空！', trigger: 'change' },
// { min: 1, max: 5, message: '用户名长度不大于5位', trigger: 'change' },
{ trigger: 'change', validator: validatorUserName }, //表单自定义写法
],
password: [
// { required: true, message: '密码不能为空！', trigger: 'change' },
// { min: 1, max: 6, message: '密码长度不大于6位', trigger: 'change' },
{ trigger: 'change', validator: validatorUserPassword }, //表单自定义写法
],
} }
</script> </script>
@ -68,7 +142,10 @@ const loginHandle = () => {
position: relative; //相对 position: relative; //相对
background: url('@/assets/images/login_form.png') no-repeat; background: url('@/assets/images/login_form.png') no-repeat;
background-size: cover; background-size: cover;
padding: 40px; padding-right: 150px;
padding-left: 150px;
padding-top: 50px;
padding-bottom: 20px;
h1 { h1 {
color: white; color: white;
font-size: 40px; font-size: 40px;

Write Preview
Loading…
Cancel
Save