正式页面开发-登录注册页面

整体路由设计： 登录和注册的切换是切换组件或者是切换内容（v-if和 v-else)，因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。登录之后进到首页，有三个大模块：文章分类，文章管理，个人中心。首页架子也是一级路由，点到三个模块一级个人中心中的其他模块也是一样都是二级路由

在 views文件夹中 新建四个文件夹，分别存放登录页，首页架子，文章，用户四个部分路由，根据各个文件夹有多少文件再新建 vue 文件

在router 中配置路由规则

在 APP.vue中写上路由出口

登陆注册页面:页面之间切换用 v-if 和 v-else

删除之前 app.vue中的代码，只留下简单地架构即可

登陆注册页面需要用到一些图标，所以首先安装图标库

笔记中 cv 静态结构代码

el-row搭配 el-col来实现板块划分，一行分为 24份数，el-col中通过 ：span="份数"来实现板块占据的份数，offset =""来实现与左侧的margin。

右侧的登录页面通过 el-form 表单来总实现，el-form-item表示表单中每个小部分，注册字样，输入用户名，输入密码 ，再次输入密码，注册字样，返回字样。 el-form-item中有输入框 el-input,图标 ：prefix-icon="" el-form-item中有返回键 el-link，点击事件则将 isRegister布尔值改为 false

<script setup> import { User, Lock } from '@element-plus/icons-vue' import { ref } from 'vue' const isRegister = ref(true) </script> <template> <!-- el-row配合 el-col组合, el-row表示一行,一行分成24份 el-col标识列 (1):span="12" 代表在一行中,占12份(50%) (2) :span="6" 代表在一行中,占6份(25%) (3) :offset="3" 代表在一行中,左侧margin份数 --> <el-row class="login-page"> <el-col :span="12" class="bg"></el-col> <el-col :span="6" :offset="3" class="form"> <!-- 因为其中都是表单,所以直接 el-form(整个表单组件) el-form-item 表单的一行 (一个表单域中) el-input 表单元素(输入开给你)--> <!-- 注册相关表单 --> <el-form ref="form" size="large" autocomplete="off" v-if="isRegister"> <el-form-item> <h1>注册</h1> </el-form-item> <el-form-item> <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item> <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" ></el-input> </el-form-item> <el-form-item> <el-input :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> <el-input :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> 登陆注册页面功能 

表单校验

:model = "ruleForm"，ruleForm绑定的是 form 对象（下面定义的 reluForm是ts写法），它是用来收集当前表单中全部表单数据

在线演示：黑马程序员-大事件

接口文档： 登录 - 黑马程序员-大事件

接口根路径： http://big-event-vue-api-t.itheima.net

了解了四大块之后，接下来就是首先创建一个ruleForm对象，从接口文档中创建相应字段。将其绑定到注册代码段的 el-form 中

接下来是创建整个表单的校验规则：

新建校验规则 rules,里边写上 用于提交的form对象的三个数据的校验规则，例如username

然后将 form对象相应的属性绑定到相应的输入框中

并且在输入框对应的 el-form-item中配置prop

(如果希望是实时校验，将 trigger值改为 change)

除了username的非空校验和长度校验之外，还有password的非空校验和正则校验

自定义校验，原则是因为以上三个校验都无法满足。

再次输入密码不光是要满足非空和正则校验，还要校验是否和原本输入的一致

正式进行注册提交之前，还要进行预校验,也就是没有输入东西的时候是不能进行注册的。

点击注册按钮的时候还要对表单内容进行校验，通过之后才能进行注册提交请求。

调用 element-plus 中的 form 的方法 validate,要使用这个方法那么就先要拿到 form 组件实例

先定义一个 form ，然后 与需要获取的那个做绑定。因为注册和登录都需要验证，所以两个都绑定，也不必担心两个重名，因为 v-if 和 v-else 则证明了这两个每次只会出现一次

预校验之后进行注册请求:

在api 文件夹中新建 user.js文件

在使用 ElMessage时，虽然以往类似能直接使用 el-row之类的标签，是因为原来配置的自动导入。现在因为 eslint中没有关于此的配置，所以直接使用 ElMessage 是错误的，所以要在 eslintrc.cjs中进行配置

登录功能（校验+登录+存token)

共用 formModel ，因为登录中也需要 username和password，然后将其在 登录部分的 el-form中 ：model="formModel" 绑定。规则也共用，: rules = "rules"绑定规则

v-model 绑定 form 数据对象子属性

prop绑定校验规则

登录 和 注册 两个切换的时候，输入框中的内容能带入到另外一个里面去，所以在切换的时候要将表单信息进行重置

点击登录的时候也要进行预校验

要完成登录还要封装对应的 api 接口

调用方式与 注册接口调用方式一样

需要将请求回来的结果接收，并调用 stores文件夹中用户模块 user.js中的setToken方法将请求结果存入本地。因为stores 文件夹中的各模块已经导入到 其下的index.js中，所以只需要在index.js中进行按需导入即可。导进来之后要要 创建一个实例（所说的实例也就是通过构造函数创建的对象），也就是对象，然后才能访问其中的 setToken 方法

登录成功之后是要进行跳转到首页的，这里按需导入 vue-router库中的 useRouter钩子函数，然后创建一个实例（也就是钩子函数创建出来的对象）。