硅谷甄选二(登录)

一、登录路由静态组件

src\views\login\index.vue

<template>
  <div class="login_container">
    <!-- Layout 布局 -->
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item>
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
              ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password
              ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login_btn" type="primary" size="default">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { User, Lock } from '@element-plus/icons-vue'
  import { reactive } from 'vue'
  //收集账号与密码数据
  let loginForm = reactive({ username: 'admin', password: '111111' })
</script>

<style lang="scss" scoped>
  .login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
    .login_form {
      position: relative;
      width: 80%;
      top: 30vh;
      background: url('@/assets/images/login_form.png') no-repeat;
      background-size: cover;
      padding: 40px;
      h1 {
        color: white;
        font-size: 40px;
      }
      h2 {
        color: white;
        font-size: 20px;
        margin: 20px 0px;
      }
      .login_btn {
        width: 100%;
      }
    }
  }
</style>

注意:el-col是24份的,在此左右分为了12份。我们在右边放置我们的结构。:xs="0"是为了响应式。el-form下的element-plus元素都用el-form-item包裹起来。

二、登陆业务实现 

1)安装大仓库(笔记只写一次)

安装pinia:pnpm i pinia@2.0.34

src\store\index.ts

//仓库大仓库
import { createPinia } from 'pinia'
//创建大仓库
const pinia = createPinia()
//对外暴露:入口文件需要安装仓库
export default pinia

main.ts引入

//引入仓库
import pinia from './store'
app.use(pinia);

2)用户相关的小仓库

src\store\modules\user.ts

//创建用户相关的小仓库
import { defineStore } from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User', {
  //小仓库存储数据地方
  state: () => {},
  //处理异步|逻辑地方
  actions: {},
  getters: {},
})
//对外暴露小仓库
export default useUserStore

使用

//引入用户相关的小仓库
    import useUserStore from '@/store/moudles/user'
    let useUserStore2 = useUserStore()

3)按钮回调

//引入路由
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
//引入ElNotification
import { ElNotification } from 'element-plus'
let $router = useRouter();
//登录按钮的回调
const login = async () => {
  //按钮加载效果
  loading.value = true
  //点击登录按钮以后干什么
  //通知仓库发起请求
  //请求成功->路由跳转
  //请求失败->弹出登陆失败信息
  try {
    //也可以书写.then语法
    await useStore.userLogin(loginForm)
    //编程式导航跳转到展示数据的首页
    $router.push('/')
    //登录成功的提示信息
    ElNotification({
      type: 'success',
      message: '登录成功!',
    })
    //登录成功,加载效果也消失
    loading.value = false
  } catch (error) {
    //登陆失败加载效果消失
    loading.value = false
    //登录失败的提示信息
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

4)用户仓库

//创建用户相关的小仓库
import { defineStore } from 'pinia'
//引入接口
import { reqLogin } from '@/api/user'
//引入数据类型
import type { loginForm } from '@/api/user/type'
//创建用户小仓库
const useUserStore = defineStore('User', {
  //小仓库存储数据地方
  state: () => {
    return {
      token: localStorage.getItem('TOKEN'), //用户唯一标识token
    }
  },
  //处理异步|逻辑地方
  actions: {
    //用户登录的方法
    async userLogin(data: loginForm) { //返回一个promise对象
      //登录请求
      const result: any = await reqLogin(data)
      if (result.code == 200) {
        //pinia仓库存储token
        //由于pinia|vuex存储数据其实利用js对象
        this.token = result.data.token
        //本地存储持久化存储一份
        localStorage.setItem('TOKEN', result.data.token)
        //保证当前async函数返回一个成功的promise函数
        return 'ok'
      } else {
        return Promise.reject(new Error(result.data.message))
      }
    },
  },
  getters: {},
})
//对外暴露小仓库
export default useUserStore

5)小结

Element-plus中ElNotification用法(弹窗):

引入:import { ElNotification } from 'element-plus'

使用:

//登录失败的提示信息
    ElNotification({
      type: 'error',
      message: (error as Error).message//类型断言,Error是ts内置类型
    })
//登录成功的提示信息
ElNotification({
  type: 'success',
  message: '登录成功!'
})
  1. Element-plus中el-buttonloading属性。
  2. pinia使用actions、state的方式和vuex不同:需要引入函数创建实例
  3. $router的使用:也需要引入函数创建实例
  4. 在actions中使用state的token数据:this.token
  5. 类型定义需要注意。
  6. promise的使用和vue2现在看来是一样的。

三、模板封装登陆业务

1)result返回类型封装

//src\api\user\type.ts
interface dataType {
  token?: string
  message?: string
}

//登录接口返回的数据类型
export interface loginResponseData {
  code: number
  data: dataType
}

2)State仓库类型封装 

//src\store\modules\types\type.ts
//定义小仓库数据state类型
export interface UserState {
  token: string | null
}

3)本地存储封装

将本地存储的方法封装到一起 

//src\utils\token.ts
//封装本地存储存储数据与读取数据方法
export const SET_TOKEN = (token: string) => {
  localStorage.setItem('TOKEN', token)
}

export const GET_TOKEN = () => {
  return localStorage.getItem('TOKEN')
}

 4)登录时间的判断

//src\utils\time.ts
//封装函数:获取当前时间段
export const getTime = () => {
  let message = ''
  //通过内置构造函数Date
  const hour = new Date().getHours()
  if (hour <= 9) {
    message = '早上'
  } else if (hour <= 14) {
    message = '上午'
  } else if (hour <= 18) {
    message = '下午'
  } else {
    message = '晚上'
  }
  return message
}

使用

ElNotification({
                 type: 'success',
                 message: '欢迎回来',
                 title: `HI,${getTime()}好`
            })

五、表单校验规则

1)表单校验

表单绑定项

<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms"> 
</el-form>

Form 组件提供了表单验证的功能,只需为 rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可

 

定义

//收集账号与密码数据
    let loginForm = reactive({ username: 'admin', password: '111111' })
    //定义表单校验需要的配置对象
    const rules = {
      username: [
        //规则对象属性:
        {
          required: true, // required,代表这个字段务必要校验的
          min: 5, //min:文本长度至少多少位
          max: 10, // max:文本长度最多多少位
          message: '长度应为6-10位', // message:错误的提示信息
          trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则
        }, 
        
      ],
      password: [
      {
          required: true,
          min: 6,
          max: 10,
          message: '长度应为6-15位',
          trigger: 'change',
        }, 
      ],
    }
    //获取表单元素
    let loginForms = ref()

校验规则通过后运行

const login = async () => {
  //保证全部表单项校验通过
  await loginForms.value.validate()
	。。。。。。
}

2)自定义表单校验

//自定义校验规则函数
    const validatorUserName = (rule: any, value: any, callback: any) => {
      //rule:校验规则对象
      //value:表单元素文本内容
      //callback:符合条件,callback放行通过,不符合:注入错误提示信息
      if (value.length >= 5) {
        callback()
      } else {
        callback(new Error('账号长度至少5位'))
      }
    }

    const validatorPassword = (rule: any, value: any, callback: any) => {
      if (value.length >= 6) {
        callback()
      } else {
        callback(new Error('密码长度至少6位'))
      }
    }
    //定义表单校验需要的配置对象
    const rules = {
      username: [
        //规则对象属性:
        /* {
          required: true, // required,代表这个字段务必要校验的
          min: 5, //min:文本长度至少多少位
          max: 10, // max:文本长度最多多少位
          message: '长度应为6-10位', // message:错误的提示信息
          trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则
        }, */
        { trigger: 'change', validator: validatorUserName },
      ],
      password: [
        { trigger: 'change', validator: validatorPassword },
      ],
    }

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/790126.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【总线】AXI第九课时:介绍AXI响应信号 (Response Signaling):RRESP和 BRESP

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

Web测试方法与技术

HTML概述&#xff08;Hyper Text Markup Language&#xff09; HTML基本结构 1、网页骨架 用HTML编写的网页中有一些结果是默认且必须存在的&#xff0c;这些结构就叫做网页骨架。 <!DOCTYPE html> <html lang"en"> <head><meta charset&qu…

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》&#xff08;俄语&#xff1a;Тетрис&#xff0c;英语&#xff1a;Tetris&#xff09;&#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏&#xff0c;是落下型益智游戏的始祖&#xff0c;电子游戏领域的代表作之一&a…

结束休刊博客真·vlog | 顺便说一下500粉的事

啊&#xff0c;首先是信 ♥亲爱的读者们&#xff0c; 在这个充满数字韵律与代码奇迹的时空里&#xff0c;我满怀激动与感激的心情&#xff0c;提笔写下这封信&#xff0c;宣布一个令人振奋的消息——经过一段时间的休整与充电&#xff0c;我终于要结束这段宝贵的休刊时光&…

【堆 优先队列】1354. 多次求和构造目标数组

本文涉及知识点 堆 优先队列 LeetCode1354. 多次求和构造目标数组 给你一个整数数组 target 。一开始&#xff0c;你有一个数组 A &#xff0c;它的所有元素均为 1 &#xff0c;你可以执行以下操作&#xff1a; 令 x 为你数组里所有元素的和 选择满足 0 < i < target.…

JDBC编程的学习——MYsql版本

目录 前言 什么是JDBC ??? 前置准备 使用JDBC的五个关键步骤 1.建立与数据库的连接 2.创建具体的sql语句和Statement 3.执行SQL语句 4.处理结果集 5.释放资源 完整流程展示 前言 笔者在先前的博客就提过会写关于JDBC的内容 [Mysql] 的基础知识和sql 语句.教你速成…

Security认证要点速记

登录校验流程 springSecurity已经为我们默认实现了一个用不着的登录功能&#xff0c;我们需要自己实现个符合我们需求的登录功能&#xff0c;所以我们需要去了解默认登录功能的流程&#xff0c;对其中的部分进行替换 SpringSecurity底层就是过滤器链&#xff0c;包含实现了各种…

(自用)多进程与信号

程序和进程 程序≠进程 产生进程 创建进程——fork函数 函数原型 #include <unistd.h> pid_t fork(void); 函数功能: fork函数的功能是创建一个与当前进程几乎完全相同的子进程。这个“几乎完全相同”指的是子进程会复制父进程的代码段、数据段、BSS段、堆、栈等所…

dledger原理源码分析(四)-日志

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的日志&#xff0c;包括写入&#xff0c;复制…

esp32硬件电路设计

ESP-IDF 入门指南 | 乐鑫科技 (espressif.com) ESP32-DevKitC V4 入门指南 - ESP32 - — ESP-IDF 编程指南 v5.1 文档 (espressif.com)

看惯了黑黝黝的大屏风格再来看浅色系的大屏,很漂亮很个性

**看惯了黑黝黝的大屏风格&#xff0c;再来看浅色系的大屏&#xff0c;很漂亮很个性** 在科技产品的世界里&#xff0c;大屏设计一直以其沉浸感和视觉冲击力占据着一席之地。然而&#xff0c;当我们长时间沉浸在那些深邃、沉稳的黑黝黝大屏中时&#xff0c;是否曾想过换一种风…

VBA即用型代码手册:根据预定义的文本条件删除行

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…

uni-app三部曲之三: 路由拦截

1.引言 路由拦截&#xff0c;个人理解就是在页面跳转的时候&#xff0c;增加一级拦截器&#xff0c;实现一些自定义的功能&#xff0c;其中最重要的就是判断跳转的页面是否需要登录后查看&#xff0c;如果需要登录后查看且此时系统并未登录&#xff0c;就需要跳转到登录页&…

电子电气架构 --- 智能座舱万物互联

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

windows防火墙端口设置

PS&#xff1a;本文实例为Windows Server 2019&#xff0c;其他Windows版本大同小异。 1、首先打开windows防火墙&#xff0c;点击“高级设置” 2、 高级设置界面 3、假设需要开放一个端口为3306应该怎么做 光标对准“入站规则”右键新建规则&#xff0c;选择“端口” 协议这…

【UE5.1 角色练习】16-枪械射击——瞄准

目录 效果 步骤 一、瞄准时拉近摄像机位置 二、瞄准偏移 三、向指定方向射击 四、连发 效果 步骤 一、瞄准时拉近摄像机位置 打开角色蓝图&#xff0c;在事件图表中添加如下节点&#xff0c;当进入射击状态时设置目标臂长度为300&#xff0c;从而拉近视角。 但是这样切…

Android 通知访问权限

问题背景 客户反馈手机扫描三方运动手表&#xff0c;下载app安装后&#xff0c;通知访问权限打不开。 点击提示“受限设置” “出于安全考虑&#xff0c;此设置目前不可用”。 问题分析 1、setting界面搜“授予通知访问权限”&#xff0c;此按钮灰色不可点击&#xff0c;点…

C++基础篇(1)

目录 前言 1.第一个C程序 2.命名空间 2.1概念理解 2.2namespace 的价值 2.3 namespace的定义 3.命名空间的使用 4.C的输入输出 结束语 前言 本节我们将正式进入C基础的学习&#xff0c;话不多说&#xff0c;直接上货&#xff01;&#xff01;&#xff01; 1.第一个C程…

JAVA分布式事务详情分布式事务的解决方案Java中的分布式事务实现

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

关于Python中的字典你所不知道的七个技巧

01 引言 Python是我最喜欢的编程语言之一&#xff0c;它向来以其简单性、多功能性和可读性而闻名。 字典作为Python中最常使用的数据类型&#xff0c;大家几乎每个人都或多或少在项目中使用过字典&#xff0c;但是字典里有一些潜在的技巧可能并不是每个同学都会用到。 在本文…