vue3后台管理系统之登录界面和业务的实现

1.静态页面的搭建

2.登录业务逻辑处理

// 创建用户仓库
import { defineStore } from 'pinia'
// 引入接口
import { reqLogin } from '@/api/user'
// u引入数据类型
import type { loginForm, loginResponseData } from '@/api/user/type'
import type { UserState } from './types/type'
// 引入操作本地存储
import { SET_TOKEN, GET_TOKEN } from '@/utils/token'
const useUserStore = defineStore('User', {
    // 小仓库存储数据
    state: (): UserState => {
        return {
            token: GET_TOKEN(),
        }
    },
    // 异步逻辑
    actions: {
        async userLogin(data: loginForm) {
            // 登录请求
            const res: loginResponseData = await reqLogin(data)
            console.log(res)
            if (res.code === 200) {
                this.token = res.data.token as string
                SET_TOKEN(res.data.token as string)
                return 'ok'
            } else {
                return Promise.reject(new Error(res.data.message))
            }
        },
    },
    getters: {},
})
export default useUserStore

定义token数据类型

修改登录返回结果数据类型

封装本地存储数据和读取数据的方法

完善登录界面

封装判断时间函数

//封装一个函数:获取一个结果:当前早上|上午|下午|晚上
export const getTime = () => {
    let message = ''
    //通过内置构造函数Date
    const hours = new Date().getHours()
    //情况的判断
    if (hours <= 9) {
        message = '早上'
    } else if (hours < 12) {
        message = '上午'
    } else if (hours <= 18) {
        message = '下午'
    } else {
        message = '晚上'
    }
    return message
}