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

news2025/4/26 2:57:59

整体路由设计：

登录和注册的切换是切换组件或者是切换内容（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钩子函数，然后创建一个实例（也就是钩子函数创建出来的对象）。