vue.js 前端 javascript Vue3大事件项目1 登录注册

创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件：一数据、二规则）

1. 校验相关        (1) 给当前表单绑上整个的数据对象：el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }  ( )

:model="formModel"

>

const formModel = ref({

username: '',

password: '',

repassword: ''

})

       (2) 绑上对应的校验规则：el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }（注意一一对应）  ( )

:model="formModel"

:rules="rules"  

>

const rules = {

username: [

{

required: true,

message: 'please',

//blur:失焦触发，change：值改变的时候触发

trigger: 'blur'

},

{

min: 5,

max: 10,

message: 'yhum',

trigger: 'blur'

}

],

password: [

{

required: true,

message: 'please',

//blur:失焦触发，change：值改变的时候触发

trigger: 'blur'

},

{

pattern: /^\S{6,15}$/,

message: '6-15'

}

]

}

       (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性，用户输入的内容才会同步到表单里去。（<）

v-model="formModel.repassword"

:prefix-icon="Lock"

type="password"

placeholder="请输入再次密码"

>

       (4) el-form-item => prop配置生效的是rules里的哪个校验规则 (和rules中的字段要对应)   ( )

v-model="formModel.username"

:prefix-icon="User"

placeholder="请输入用户名"

>

2.

（1）整个表单的校验规则

                1.非空校验 required:true message信息提示 trigger：触发校验的时机                 2.长度校验 min:xx,max:xx                 3.正则校验pattern：正则规则     \s  非空校验                 4.自定义校验 => 自己写逻辑校验（校验函数）   validator:(rule,value,callback) 

rule   当前校验规则相关的信息value   所校验的表单元素目前的表单值callback   两种校验方式，{第一种：callback() 代表校验成功。第二种：callback(new Error(错误信息))   代表校验失败。}无论成功还是失败，都要回调     

（2）自定义校验规则

目录

创建项目

引入 element-ui 组件库

登录：注册样式准备之后，配置校验规则（4个条件）

全部代码

注册功能

1.新建 api/user.js 封装

import request from '@/utils/request'

//注册接口

export const userRegisterService = ({ username, password, repassword }) => {

//return 和 {} 可以省略

//return request.post('/api/reg', { username, password, repassword })

request.post('/api/reg', { username, password, repassword })

}

2.页面中调用（LoginPage.vue）

const register = async () => {

//注册成功之前，先进行校验。校验成功，就发请求；校验失败，自动提示

//调用validate会触发校验，给用户显示错误提示

await form.value.validate()

await userRegisterService(formModel.value)

//调用组件

ElMessage.success('success')

isRegister.value = false

}

3.eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {

...

globals: {

ElMessage: 'readonly',

ElMessageBox: 'readonly',

ElLoading: 'readonly'

}

}

切换的时候，重置表单内容，利用watch监视

        当isRegister变量发生改变时，这段代码就会运行，并清空formModel对象中的所有表单输入字段，从而重置注册表单。watch 可以让你设置一个回调函数，当被监控的数据发生变化时，这个回调函数就会被执行   

watch(isRegister, () => {

  formModel.value = {

    username: '',

    password: '',

    repassword: ''

  }

})

登录：封装登录接口

//登录接口post

//不能加花括号，否则就要加return

export const userLoginService = ({ username, password }) =>

request.post('/api/login', {

username,

password

})

登录：调用方法将 token 存入 pinia 并 自动持久化本地

//调store下的user里的setToken方法

const userStore = useUserStore()

//当你调用useRouter()函数时，它会返回一个路由实例对象，你可以通过这个对象来访问和操作路由相关的功能。

//记得导入

const router = useRouter()

const login = async () => {

//登录前进行预校验，没通过就不能发请求

await form.value.validate()

//调用接口，发送数据

const res = await userLoginService(formModel.value)

//把返回的res存到pinia里面去,并且自动持久化到本地

userStore.setToken(res.data.token)

//给出提示，登录成功

ElMessage.success('success')

//跳转首页

router.push('/')

}

推荐阅读