'登录完善'

3 months ago · f7ef90558a
parent e3289e6b5b
commit f7ef90558a
8 changed files with 141 additions and 19 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>小得盈满，爱逢其时</title>
+    <title>Control is Power</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@ -5,7 +5,6 @@ import type { loginForm, loginResponseDate, userReponseData } from './type'
 enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info',
-  // LOGOUT_URL = '/admin/acl/index/logout',
 }
 //登录接口
 export const reqLogin = (data: loginForm) =>
@ -13,5 +12,3 @@ export const reqLogin = (data: loginForm) =>
 //获取用户信息
 export const reqUserInfo = () =>
  request.get<any, userReponseData>(API.USERINFO_URL)
-//退出登录
-// export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)
--- a/src/api/user/type.ts
+++ b/src/api/user/type.ts
@ -5,7 +5,8 @@ export interface loginForm {
 }

 interface dataType {
-  token: string
+  token?: string
+  message?: string
 }
 //登录接口返回数据类型
 export interface loginResponseDate {
--- a/src/store/modules/types/types.ts
+++ b/src/store/modules/types/types.ts
@ -0,0 +1,4 @@
+//定义小仓库数据state类型
+export interface UserState {
+  token: string | null
+}
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@ -3,23 +3,41 @@ import { defineStore } from 'pinia'
 //引入登录接口
 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', {
  //小仓库存储数据的地方
-  state: () => {},
+  state: (): UserState => {
+    return {
+      token: GET_TOKEN(),
+      // token: localStorage.getItem('TOKEN'), //用户唯一标识token
+    }
+  },
  //异步|逻辑的地方
  actions: {
    //用户登录方法
    //括号内data收集参数(实参)
    async userLogin(data: loginForm) {
      //登录请求
-      let result = await reqLogin(data)
-      console.log(result)
-    },
+      let result: loginResponseDate = await reqLogin(data)
+      // 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
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@ -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
+}
--- a/src/utils/token.ts
+++ b/src/utils/token.ts
@ -0,0 +1,10 @@
+//封装本地存储数据与读取数据方法
+
+//存储数据
+export const SET_TOKEN = (token: string) => {
+  localStorage.setItem('TOKEN', token)
+}
+//本地存储获取数据
+export const GET_TOKEN = () => {
+  return localStorage.getItem('TOKEN')
+}
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -3,20 +3,26 @@
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <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>
          <h2>欢迎登录</h2>
-          <el-form-item>
+          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
-          <el-form-item>
+          <el-form-item prop="password">
            <el-input
              :prefix-icon="Lock"
              type="password"
              v-model="loginForm.password"
+              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
@ -25,6 +31,7 @@
              type="primary"
              size="large"
              @click="loginHandle"
+              :loading="loading"
            >
              登录
            </el-button>
@ -37,21 +44,88 @@

 <script setup lang="ts">
 import { User, Lock } from '@element-plus/icons-vue'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+const $router = useRouter()
+import { ElNotification } from 'element-plus'
 //引入用户相关的小仓库
 import useUserStore from '@/store/modules/user'
+import { getTime } from '@/utils/time'
 let useStore = useUserStore()
+let loading = ref(false)
+//获取el-form组件
+let loginforms = ref()
 //收集账号和密码的数据
 const loginForm = reactive({
  username: 'admin',
  password: '111111',
 })
-const loginHandle = () => {
+const loginHandle = async () => {
+  //保证全部表单项校验通过
+  await loginforms.value.validate()
+  //开始加载
+  loading.value = true
  //通知仓库发登录请求
  //请求成功后跳转到首页（展示数据的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>

@ -68,7 +142,10 @@ const loginHandle = () => {
  position: relative; //相对
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
-  padding: 40px;
+  padding-right: 150px;
+  padding-left: 150px;
+  padding-top: 50px;
+  padding-bottom: 20px;
  h1 {
    color: white;
    font-size: 40px;