创建项目
引入 element-ui 组件库
登录:注册样式准备之后,配置校验规则(4个条件:一数据、二规则)
- 校验相关
(1) 给当前表单绑上整个的数据对象:el-form => :model="ruleForm" 绑定的整个form的数据对象 { xxx, xxx, xxx } (<el-form-item> </el-form-item>)
javascript
<el-form
:model="formModel"
>
javascript
const formModel = ref({
username: '',
password: '',
repassword: ''
})
(2) 绑上对应的校验规则:el-form => :rules="rules" 绑定的整个rules规则对象 { xxx, xxx, xxx }(注意一一对应) (<el-form-item> </el-form-item>)
javascript
<el-form
:model="formModel"
:rules="rules"
>
javascript
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的子属性,用户输入的内容才会同步到表单里去。(<el-input><</el-input>)
javascript
<el-input
v-model="formModel.repassword"
:prefix-icon="Lock"
type="password"
placeholder="请输入再次密码"
></el-input>
(4) el-form-item => prop配置生效的是rules里的哪个校验规则 (和rules中的字段要对应) (<el-form-item> </el-form-item>)
javascript
<el-form-item prop="username">
<el-input
v-model="formModel.username"
:prefix-icon="User"
placeholder="请输入用户名"
></el-input>
</el-form-item>
(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 组件库](#引入 element-ui 组件库)
全部代码
javascript
<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
//整个的用于提交的form数据对象
const formModel = ref({
username: '',
password: '',
repassword: ''
})
//整个表单的校验规则
//1.非空校验 required:true message信息提示 trigger:触发校验的时机
//2.长度校验 min:xx,max:xx
//3.正则校验pattern:正则规则
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'
}
],
repassword: [
{
required: true,
message: 'please',
//blur:失焦触发,change:值改变的时候触发
trigger: 'blur'
},
{
pattern: /^\S{6,15}$/,
message: '6-15'
},
{
validator: (rule, value, callback) => {
if (value !== formModel.value.password) {
callback(new Error('no'))
} else {
callback() //校验成功,也需要正常回调 callback()
}
},
trigger: 'blue'
}
]
}
</script>
<template>
<el-row class="login-page">
<el-col :span="12" class="bg"></el-col>
<el-col :span="6" :offset="3" class="form">
<el-form
:model="formModel"
:rules
ref="form"
size="large"
autocomplete="off"
v-if="isRegister"
>
<el-form-item>
<h1>注册</h1>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="formModel.username"
:prefix-icon="User"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input
v-model="formModel.repassword"
:prefix-icon="Lock"
type="password"
placeholder="请输入再次密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button class="button" type="primary" auto-insert-space>
注册
</el-button>
</el-form-item>
<el-form-item class="flex">
<el-link type="info" :underline="false" @click="isRegister = false">
← 返回
</el-link>
</el-form-item>
</el-form>
<el-form ref="form" size="large" autocomplete="off" v-else>
<el-form-item>
<h1>登录</h1>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="formModel.username"
:prefix-icon="User"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item>
<el-input
name="password"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item class="flex">
<div class="flex">
<el-checkbox>记住我</el-checkbox>
<el-link type="primary" :underline="false">忘记密码?</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button class="button" type="primary" auto-insert-space
>登录</el-button
>
</el-form-item>
<el-form-item class="flex">
<el-link type="info" :underline="false" @click="isRegister = true">
注册 →
</el-link>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.login-page {
height: 100vh;
background-color: #fff;
.bg {
background:
url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
url('@/assets/login_bg.jpg') no-repeat center / cover;
border-radius: 0 20px 20px 0;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
user-select: none;
.title {
margin: 0 auto;
}
.button {
width: 100%;
}
.flex {
width: 100%;
display: flex;
justify-content: space-between;
}
}
}
</style>
注册功能
1.新建 api/user.js 封装
javascript
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)
javascript
const register = async () => {
//注册成功之前,先进行校验。校验成功,就发请求;校验失败,自动提示
//调用validate会触发校验,给用户显示错误提示
await form.value.validate()
await userRegisterService(formModel.value)
//调用组件
ElMessage.success('success')
isRegister.value = false
}
3.eslintrc 中声明全局变量名, 解决 ElMessage 报错问题
javascript
module.exports = {
...
globals: {
ElMessage: 'readonly',
ElMessageBox: 'readonly',
ElLoading: 'readonly'
}
}
切换的时候,重置表单内容,利用watch监视
当isRegister变量发生改变时,这段代码就会运行,并清空formModel对象中的所有表单输入字段,从而重置注册表单。watch 可以让你设置一个回调函数,当被监控的数据发生变化时,这个回调函数就会被执行
javascript
watch(isRegister, () => {
formModel.value = {
username: '',
password: '',
repassword: ''
}
})
登录:封装登录接口
javascript
//登录接口post
//不能加花括号,否则就要加return
export const userLoginService = ({ username, password }) =>
request.post('/api/login', {
username,
password
})
登录:调用方法将 token 存入 pinia 并 自动持久化本地
javascript
//调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('/')
}