一、搭建说明
- 本文将通过实战搭建管理系统的注册与登录界面,并提供相应的前端源码下载。
- 主要技术栈如下:
- vue-cli脚手架
- vue-router路由
- element组件库
- vscode编辑器
- vetur+eSLint+prettier插件
二、效果演示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6927097dea91e22e098b95496b3a0278.gif#pic_center)
三、创建项目
三、编写注册页面组件
- 需要实现多步骤表单填写
- 需要实现表单字段校验
- 模拟验证码发送及注册成功后跳转登录
<template>
<div class="page-register">
<article class="header">
<header>
<el-avatar icon="el-icon-user-solid" shape="circle"></el-avatar>
<span class="login">
<em class="bold">已有账号?</em>
<a href="/login">
<el-button type="primary" size="small">登录</el-button>
</a>
</span>
</header>
</article>
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
</el-steps>
<section>
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm"
autocomplete="off"
>
<div v-if="active==0">
<el-form-item prop="textarea">
<el-input
:value="ruleForm.textarea"
type="textarea"
:rows="10"
:readonly="true"
>
</el-input>
</el-form-item>
<el-form-item prop="agreed">
<el-checkbox v-model="ruleForm.agreed">同意注册协议</el-checkbox>
</el-form-item>
</div>
<div v-if="active==1">
<el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm.email" />
<el-button size="mini" round @click="sendMsg">发送验证码</el-button>
<span class="status">{
{ statusMsg }}</span>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="ruleForm.code" maxlength="4" />
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd" type="password" />
</el-form-item>
<el-form-item label="确认密码" prop="cpwd">
<el-input v-model="ruleForm.cpwd" type="password" />
</el-form-item>
</div>
</el-form>
</section>
<div class="footer">
<el-button
v-if="active>0"
type="primary"
icon="el-icon-arrow-left"
@click="prev"
>上一步</el-button>
<el-button
v-if