【项目】Vue3+TS CMS 登录模块搭建

news2024/12/25 12:35:07

💭💭

✨:Vue3 + TS

💟:东非不开森的主页

💜: keep going💜💜

🌸: 如有错误或不足之处,希望可以指正,非常感谢😉

Vue3+TS

  • 一、搭建登录页
  • 二、账号密码框提示和校验
    • 2.1.父组件点击login调用子组件
    • 2.2.elmessage
    • 2.3.数据放在store里
    • 2.4. 保存token

一、搭建登录页

我们可以给主屏宽高用vhvw设置,这样就可以撑满整个屏幕
在这里插入图片描述

  • 使用element-plus
  • tabs进行切换
  • 可以用插槽自定义内容

当然要多看看官方文档,看看每个属性的意思

在这里插入图片描述
在这里插入图片描述

  • 然后我们可以把信息抽成一个组件

在这里插入图片描述

  • 效果如下

在这里插入图片描述

二、账号密码框提示和校验

  • 通过在form绑定规则还有账户,那么下一级通过prop绑定对应的属性,就可以进行对应验证

在这里插入图片描述

  • rules:表单验证规则
  • prop :model 的键名。 它可以是一个路径数组(例如 [‘a’, ‘b’, 0])。 在定义了 validate、resetFields 的方法时,该属性是必填的
  • required: 是否为必填项,如不设置,则会根据校验规则确认
  • trigger: 验证逻辑的触发方式
  • status-icon: 是否在输入框中显示校验结果反馈图标

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.1.父组件点击login调用子组件

父组件
给子组件绑定ref

ref
在这里插入图片描述

在这里插入图片描述

  • 调用子组件的登录操作

在这里插入图片描述

子组件
在这里插入图片描述

在这里插入图片描述

2.2.elmessage

在这里插入图片描述

三种引用方法

  • 针对ElMessage和ElLoading等组件引入样式
  1. 1.全局引入样式(所有样式全部引入)
    在main.ts里面
 import 'element-plus/dist/index.css'
  1. 组件样式引入
import 'element-plus/theme-chalk/el-message.css'
  1. 使用vite-plugin-style-import

vite-plugin-style-import: github地址
在这里插入图片描述

npm install vite-plugin-style-import consola -D
  • 在vite.config.ts中配置
    在这里插入图片描述
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from "vite-plugin-style-import"

 createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        // 如果没有你需要的resolve,可以在lib内直接写,也可以给我们提供PR
        {
          libraryName: "element-plus",
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })

在这里插入图片描述

在这里插入图片描述

2.3.数据放在store里

  • 请求数据保存在store里面
  • 网络请求也要是在store里面

在这里插入图片描述
在这里插入图片描述

添加类型
可以在使用的地方进行导入
在这里插入图片描述

2.4. 保存token

实现登录时,token如何保存的?如何保证刷新后token依然存在?
我们可以用localStorage

localStorage和sessionStorage: mdn
在这里插入图片描述
因为我们可能用localStorage,也可能用sessionStorage,所以我们可以把它们封装成一个工具,使其更具备通用性

enum CacheType {
  Local,
  Session
}

class Cache {
  storage: Storage

  constructor(type: CacheType) {
    this.storage = type === CacheType.Local ? localStorage : sessionStorage
  }

  setCache(key: string, value: any) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getCache(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }

  removeCache(key: string) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }
}

const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)

export { localCache, sessionCache }

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微服务面试题:熔断和降级有什么区别?

文章目录引言1.概念不同1.1 熔断概念1.2 降级概念2.熔断器模型3.种状态之间的转换关系4.熔断策略5.熔断和降级的关系6.降级方式6.1、熔断降级(不可用)6.2、超时降级6.3、限流降级7.题外话8.总结引言 熔断和降级都是系统自我保护的一种机制,但…

进阶C语言 第四章-------《自定义类型》 (结构体、枚举、联合)知识点+完整思维导图+深入细节+通俗易懂+基本练习题+建议收藏

绪论 书接上回,通过上章的一些函数,我们可以让我们对于一些数值的调整有很大的帮助,本章自定义类型在C语言中同样也有着非常重要的地位,相信只要认真的阅读了本章,一定会对你有很大的帮助。 所以安全带系好&#xff0c…

使用Cmake从源码编译Lua

前置要求:电脑已经设置好了Cmake能够使用 首先下载Lua源码,文件后缀是tar.gz 各版本可以从这里找到:Lua - Version history 解压下载文件至所需目录,文件内容如下图: 解压即可。 在解压的文件夹(本例是lua…

使用PyTorch-LSTM进行单变量时间序列预测的示例教程

时间序列是指在一段时间内发生的任何可量化的度量或事件。尽管这听起来微不足道,但几乎任何东西都可以被认为是时间序列。一个月里你每小时的平均心率,一年里一只股票的日收盘价,一年里某个城市每周发生的交通事故数。在任何一段时间段内记录…

Python控制本地浏览器并获取网页数据

1、前言 在自动化办公中,我们经常需要利用爬虫技能去批量获取网页的数据,但是有时候我们在利用爬虫的时候,会遇到一个问题,就是登录的时候要携带参数,不如账号、密码、其他的加密信息 就好比我现在公司,好…

JSP 质量管理系统myeclipse定制开发sqlserver数据库网页模式java编程jdbc

一、源码特点 JSP 质量管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开 发,数据库为SQLServer2008&#xff0c…

狂飙Linux平台,软件部署大全

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

图形的面积与周长计算程序-课后程序(JAVA基础案例教程-黑马程序员编著-第四章-课后作业)

【案例4-7】图形的面积与周长计算程序 欢迎点赞关注收藏 【案例介绍】 案例描述 长方形和圆形都属于几何图形,都有周长和面积,并且它们都有自己的周长和面积计算公式。使用抽象类的知识设计一个程序,可以计算不同图形的面积和周长。 运行…

Redis服务器配置

服务器基础配置服务器端设定 设置服务器以守护进程的方式运行daemonize yes|no 绑定主机地址bind 127.0.0.1 设置服务器端口号port 6379 设置数据库数量databases 16日志配置 设置服务器以指定日志记录级别loglevel debug|verbose|notice|warning开发期 debug 线上no…

【蓝桥杯PythonB组备赛】【Acwing周赛】第91场非常详细的过程思路分析理解分享Python解

好难哈哈哈我依旧只做对了第一题,第二题在比赛结束后才做出来…… 不过没关系每天努力一点啦~ 分享一下个人做的解析,供大家参考,一起努力哇! 目录 A AcWing 4861. 构造数列 1.题目描述 2.思路分析 3.代码实现 B Ac…

从每刻到金蝶云星空通过接口配置打通数据

对接源平台:每刻刻报销是每刻科技旗下的产品,是国内领先的企业差旅及费用管理云平台,为事前差旅预订,事后报销的全流程费用管控服务。每刻报销融合人工智能云计算、移动互联网大数据等先进技术,融合财务共享和信用管理的理念&…

SPDK应用框架

SPDK应用框架SPDK应用框架1)对CPU core和线程的管理2)线程间的高效通信3)I/O的处理模型及数据路径的无锁化机制SPDK用户态块设备层1.内核通用块层2.SPDK用户态通用块层SPDK架构解析3.通用块层的管理4.逻辑卷1)内核LVM2&#xff09…

企业级信息系统开发学习笔记1.2 初探Spring——利用组件注解符精简Spring配置文件

文章目录零、本讲学习目标一、课程引入二、打开项目【SpringDemo2021】三、利用组件注解符精简Spring配置文件1、创建net.hw.spring.lesson02包2、将lesson01子包的四个类拷贝到lesson02子包3、修改杀龙任务类 - SlayDragonQuest4、修改救美任务类 - RescueDamselQuest5、修改勇…

2022爱分析·事务型关系数据库市场厂商评估报告:万里数据库

目录 1. 研究范围定义 2. 事务型关系数据库市场定义 3. 厂商评估:万里数据库 4. 入选证书 1. 研究范围定义 在国内数字化转型以及信创建设持续推进的大背景下,众多厂商入局国内数据库市场,为企业提供了面向多种应用场景的数据库&am…

taobao.trade.memo.update( 修改交易备注 )

¥开放平台基础API必须用户授权 需要商家或以上权限才可调用此接口,可重复调用本接口更新交易备注,本接口同时具有添加备注的功能 公共参数 点击获取 请求示例 TaobaoClient client new DefaultTaobaoClient(url, appkey, secret); Trade…

2022年AI顶级论文 —生成模型之年(上)

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 过去十年来,人工智能技术在持续提高和飞速发展,并不断冲击着人类的认知。 2012年,在ImageNet图像识别挑战赛中,一种神经网络模型(AlexNet&…

Java程序员进阶宝典,让你学习面试无忧!

心净则明,心诚则灵如果你想要一个月速成程序员,那么这篇文章不适合,如果你仅想要在IT圈“耍酷”,那你也不需要研读,如果你执着询问“退化”成为一名程序猿有啥捷径,那我只能告诉你,此路不通!不可…

Flink-处理函数(ProcessFunction、KeyedProcessFunction、ProcessWindowFunctionHe侧输出流)

文章目录处理函数基本处理函数(ProcessFunction)功能和使用ProcessFunction 解析分类按键分区处理函数(KeyedProcessFunction)定时器(Timer)和定时服务(TimerService)KeyedProcessFu…

Vue的模板语法(双大括号表达式、插值、v-bind 指令、v-on、指令缩写)

模板语法前言知识点1、双大括号表达式2、插值2.1 文本2.2 原始 HTML2.3 特性2.4 javascript 表达式3、指令3.1 参数3.2 动态参数3.3 修饰符4、指令缩写4.1 v-bind4.2 v-on前言 相信模板语法大家多少都有所接触,例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于…

基于springboot+vue物流项目

基于springbootvue物流项目 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍&#x…