登录页

LoginPage.vue

依赖：ref

关键架构

• 登录卡片
  • 错误提示
  • 表单
    • 账号输入框
    • 密码输入框
    • 登录按钮
• 检查输入格式
• 发送登录请求
• 居中
• 卡片样式
• 按钮样式

1. 登录卡片样式居中
2. 创建表单收集登录数据
3. 表单数据同步到 js 变量
4. 添加登录执行请求登录函数
5. 加入校验规则验证合法
6. 发送请求前再次验证
7. 错误提示反馈账号密码错误

实现

登录页至少包含一个表单提交登录信息，下面采用 el-form 表单

ref="formRef" 将组件保存到实例中，可以调用函数

@submit.prevent="onSubmit" 是监听条件执行函数，其中 @ 是 v-on 的缩写，满足提交 submit 条件（.prevent 是事件修饰符，阻止重新加载页面）后执行 onSubmit 自定义函数。

<el-form
	ref="formRef"
	:model="form"
	:rules="rules"
	size="large"
	@submit.prevent="onSubmit"
>
	<el-form-item prop="account">
		<el-input></el-input>
	</el-form-item>
 
	<el-form-item prop="password">
		<el-input></el-input>
	</el-form-item>
 
	<el-form-item>
		<el-button>登录</el-button>
	</el-form-item>
</el-form>

每一个提交项都需要使用 el-form-item 来包裹，添加 prop 属性指定绑定验证规则。上面例子中的 prop="account" 对应的验证规则是：下面的 rules.account

<script setup>
const rules = {
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
</script>