后台管理项目实践-登录界面
1：首先样式初始化 样式的重置
npm install normalize.css 记得import
穿件文件写自己的样式
2：账号登录---组件 login-panel（登录面板）
---搭建登录页面
---(账号登录，手机号登录)两个tab的item切换----element-plus
---搭建输入框
3:账号登录逻辑 手机登录逻辑
借助 element-form element-form-item input 来构造结构 有前面两个的原因是因为方便做验证
表单
保存输入的内容-----响应式account对象（两个input分别对应name,passwrod）
怎么限制输入类型（验证输入）？？---配置规则->告诉表单->表单自动验证-》 async-validator
所有规则写在一起传给表单（el-from）抽取规则（1：hook（里面有一些响应式数据） 2:配置）
登录验证 添加点击事件 handleLoginClick
---记住密码
1：v-model绑定CheckBox
2：组件里面保存复选框状态
----账号的登录逻辑
1：告诉account页面（写逻辑的页面） 点击了立即登录获取组件对象( ref=accountRef绑定 accountRef=ref())调用里面的方法（loginAction）
获取组件的类型
复习（ref函数 设置基本数据类型是响应式的 ref属性.value获取元素）
2：验证
给el-form 绑定ref
formRef.value----elform绑定的组件对象 .validate方法 (valid-->true or false 为true里面写真的的登录逻辑
补充 传泛型
记住密码逻辑：
1：判断是否需要记住密码
传值 通过函数的参数来传 记得ref.value解构
需要记住：本地缓存
utils cache.ts
if(isKeePassword)
class LocalCache{
//保存缓存
setCache(key:string,value:any){
window.localStorage.setItem(key,JSON.stringify(value))
getCache(key:string){
const value= window.locakStorage.getItem(key)
if(value){
return JSON.parse(value)
delete(key:string){
window.localStorage.removeItem(key)
clear(){
window.localStorage.clear()
export dafault new LocalCache()
2：开始进行登录验证(）Vuex---共享的数据 逻辑也放在Vuex里面
登录的逻辑---网络请求,拿到数据的处理
数据的保存
发送其他请求--请求当前用户的信息
拿到用户的菜单
跳到首页
-------设计Vuex
明确指定state类型
interface IRootState {
name:string
age:number
store--login--login.ts
import {Module} from 'vuex'
interface ILoginState{
token:string
useInfo:any
const loginModule :Module< , >={
namespace:true
state()
return{
token:''
useInfo:{} }
export default loginmodule