「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言：

掘金新人一枚，黑马学习项目每日总结，CSS篇幅过长未展示代码 [项目演示地址]www.escook.cn:8086/ev/#/login)，

今日内容

• 配置登录，注册页面路由
• 登录页面搭建
• 登录功能实现

登录页面搭建

登录页面 .vue 文件

1. 此处因为与上一章节注册页面结构类似，不过多赘述

<template>
  <!-- 登录页面的整体盒子 -->
  <div class="reg-container">
    <!-- 登录的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 登录的表单区域 -->
      <el-form ref="loginForm" :rules="loginRules" :model="loginForm">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            value="804945"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            value="123123"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="loginHeadler" class="regBtn" type="primary"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueEventLogin',

  data () {
    return {
      // 表单数据
      loginForm: {
        username: '',
        password: ''
      },
      // 校验规则
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15的非空字符',
            trigger: 'blur'
          }
        ]
      }
    }
  }
}
</script>

此处 form 表单属性 ref="loginForm" :rules="loginRules" :model="loginForm" 只是为了区别注册表单 2.页面如下

路由配置（需求：实现登录与注册页面可以互相跳转）

导入登录注册组件

import Reg from '@/views/Reg/Reg.vue'
import Login from '@/views/Login/Login.vue'

声明路由规则

// 声明路由规则
const routes = [
 { path: '/reg', component: Reg },
 { path: '/login', component: Login }
]

实现跳转

1. 在 Login.vue 组件中，添加 <el-link></el-link> (Element-ui 文字链接组件)，为去注册按钮绑定点击事件处理函数如下：

   <el-link type="info" @click="$router.push('/reg')">去注册</el-link>

2. 在 Reg.vue 组件中，为去登录按钮绑定点击事件处理函数如下：

    <el-link type="info" @click="$router.push('/login')">去登录</el-link>

注册功能实现

查看注册接口文档--- 文档地址

请求URL：

• /api/reg

请求方式：

• POST

请求体：

| 参数名 | 必选 | 类型 | 说明 | 格式 | | --- -- --- -- ------------- | | username | 是 | string | 用户名 | 字母数字、长度 1-10 | | password | 是 | string | 密码 | 非空字符串、长度 6-15 | | repassword | 是 | string | 确认密码 | 非空字符串、长度 6-15 |

由我们已经将表单字段设置的与请求所需的参数一致，大大减少了工作量

发送 ajax

 methods: {
    becomeUser () {
      this.$refs.regForm.validate(async (valid) => {
        if (!valid) return
        // 1. 发起注册请求
        const { data: res } = await this.$http.post('/api/reg', this.regForm)
        // 2. 注册失败，提示用户
        if (res.code !== 0) return this.$message.error(res.message)
        // 3. 注册成功，提示用户
        this.$message.success(res.message)
        // 4. 注册成功跳转到登录页面
        this.$router.push('/login')
      })
    }
  }

this.$message.error()：该方法为 Element-ui Message 消息提示,在引入 Element-ui 时被挂载到了 Vue 的原型上，此处可以直接调用

登录功能实现

请求URL：

• /api/login

请求方式：

• POST

请求体：

参数名	必选	类型	说明	格式
username	是	string	用户名	字母数字、长度 1-10
password	是	string	密码	非空字符串、长度 6-15

发送 ajax

  methods: {
    loginHeadler () {
      this.$refs.loginForm.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        const { data: res } = await this.$http.post('/api/login', this.loginForm)
        if (res.code !== 0) { return this.$message.error(res.message) }
        this.$message.success(res.message)
        // 调用commit 触发mutation 函数,传递token
        this.$store.commit('user/updateToken', res.token)
        //登录成功跳转至首页
        this.$router.push('/')
      })
    }
  }

配置首页路由

1.在 src/views 目录下，新建 Main/Main.vue 后台主页组件
2.在 src/router/index.js 路由模块中，导入并声明后台主页的路由规则

// 1. 导入后台主页组件
import Main from '@/views/Main/Main.vue'
const routes = [
  { path: '/reg', component: Reg },
  { path: '/login', component: Login },
  // 2. 后台主页的路由规则
  { path: '/', component: Main }
]

下一章节功能实现

• token 本地化储存
• 首页搭建