前言

上章链接：后台管理模式（上）点击跳转

*接上章基础配置写完。本章继续开始编写登录页面，正文如下：
在这里插入图片描述

一、创建一个文件夹 utils 里面新增一个 setToken.js 文件(设置token验证）

/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-25 11:07:56
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2023-01-01 15:49:12
 * @FilePath: \project-one\src\utils\setToken.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 设置 token 值
export function setToken(tokenKey, tokenValue) {
    return localStorage.setItem(tokenKey,tokenValue)
}
// 获取 token 值
export function getToken(tokenKey) {
    return localStorage.getItem(tokenKey)
}
// 删除 token 值
export function removeToken(tokenKey) {
    return localStorage.removeItem(tokenKey)
}

二、创建一个api文件夹新增 service.js （axios拦截器）

import axios from 'axios'
// 引入 token 信息
import { getToken } from "@/utils/setToken";
import { Message } from 'element-ui';

const service = axios.create({
    // baseURL会自动加在接口地址上
    baseURL: "/api",
    // timeout 规定的请求时间
    timeout: 5000 // 指定请求的超时毫秒数，如果请求超过这个时间，那么请求就会中断。
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在发送请求前做些什么
    // 获取并设置token
    // console.log(getToken('token'))
    // 在请求报文的头部，添加 token
    config.headers['token'] = getToken('token')
    return config
},(error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    // console.log(response)
    // 对响应的数据，同一做出判断
    let { status, message } = response.data
    if (status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
})

export default service

三、在api文件夹里新增一个 api.js 来接收数据（把api封装哪里需要某项数据直接引入就行）

这里解释一下什么是 qs

qs.stringify 将对象解析为url； qs.parse() 将url转换成对象；类似于 JSON.Stringify()

import service from "./service";
import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: `/login`,
        data
    })
}

// 学生列表接口
export function student(params) {
    return service({
        method: 'get',
        url: '/students',
        params
    })
}

// 学生列表删除接口
export function studentDel(id) {
    return service({
        method: 'delete',
        url: `/students/${id}`,
    })
}

// 信息列表的查询接口
export function getInfo() {
    return service({
        method: 'get',
        url: `/info`,
    })
}
// 信息列表新增修改的接口
export function info(type,data) {
    // qs.stringify 将对象解析为url； qs.parse() 将url转换成对象； 类似于 JSON.Stringify()
    data = qs.stringify(data)
    let obj = {method:type,url:'/info',data}
    return service(obj)
}

// 信息列表的删除
export function infoDel(id) {
    return service({
        method: 'delete',
        url: `/info/${id}`,
    })
}

// 数据概览接口
export function dataView() {
    return service({
        method: 'get',
        url:'/dataview'
    })
}

// 旅游地图接口
export function travel() {
    return service({
        method: 'get',
        url:'/travel'
    })
}

四、设置输入框格式在 utils 文件里新增格式验证规则 validate.js 文件

// 用户名匹配
export function nameRule(rule, value, callback) {
    // 正则表达式
    let reg = /(^[a-zA-Z0-9]{4,10}$)/;
    // 判断是否为空
    if (value === "") {
      callback(new Error("请输入用户名"));
      // input框里的值通过test方法去匹配一个正则，匹配成功返回true否则返回false
    } else if (!reg.test(value)) {
      callback(new Error("请输入4-10位的用户名"));
    } else {
      callback();
    }
}
// 密码正则匹配
export function passRule(rule, value, callback) {
    // 正则表达式
    let reg =
        /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
    if (value === "") {
        callback(new Error("请输入密码"));
    } else if (!reg.test(value)) {
        callback(new Error("请输入6-12位带有数字大小写字母一级特殊符号的密码"));
    } else {
        callback();
    }
}

五、login 登录页面

token值 api数据还有验证规则已配置好开始引入各个功能编写登录页面

新增小眼睛查看密码功能都有注释，

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <!-- rules 正则 -->
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="name">
          <el-input
            type="text"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" :type="Type"></el-input>
          <i class="el-icon-view" @click="Show" :class="{ icon: Color }"></i>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引入登录接口
import { login } from "@/api/api.js";
// 引入正则验证规则
import { nameRule, passRule } from "@/utils/validate";
import { setToken } from "@/utils/setToken";
export default {
  name: "Login",
  data() {
    return {
      // input框输入的值
      form: {
        // 账号
        name: "",
        // 密码
        password: "",
      },
      // 密码的可见不可见
      Type: "password",
      Color: false,
      // 正则验证

      // 不推荐使用此方法（一个对象是一个正则要求，可以附加多个），这样写太乱，可以封装出去（下面的方法）
      // rules: {
      //   name: [
      //     { required: true, message: "请输入用户名", trigger: "blur" },
      //     { min: 4, max: 10, message: "请输入4-10位的用户名", trigger: "blur" },
      //   ],
      //   password: [
      //     { required: true, message: "请输入用户名", trigger: "blur" },
      //     { min: 4, max: 10, message: "请输入4-10位的用户名", trigger: "blur" },
      //   ],
      // },
      // 推荐使用此方法
      rules: {
        // 可以在当前页面封装，也可以单独封装一个组件，使用时引入即可
        // trigger：触发方式，离开 input 框时触发，validator：接收一个指定的函数，自定义验证规则
        name: [{ validator: nameRule, trigger: "blur" }],
        password: [{ validator: passRule, trigger: "blur" }],
      },
    };
  },


//input 密码框 小眼睛 控制显示与不显示
  methods: {
    // 密码的可见和不可见
    Show() {
      // 点击改变input框的展示方式
      this.Type = this.Type === "password" ? "text" : "password";
      this.Color = !this.Color;
    },
    // 登录
    login(form) {
      // 验证成功后执行
      this.$refs[form].validate((valid) => {
        if (valid) {
          login(this.form).then(({ data }) => {
            if (data.status === 200) {
              setToken("token", data.token);
              setToken("username", this.form.name);
              this.$message({
                message: data.message,
                type: "success",
              });
              this.$router.push("/home");
            } else {
              // 在后台返回一个错误信息
              console.error(this.form);
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/bg.jpg") center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .box-card {
    width: 450px;
    background-color: #65768557;
    color: #fff;
    text-align: center;
    .el-form-item {
      position: relative;
      i {
        color: rgb(221, 216, 216);
        position: absolute;
        top: 30%;
        right: 10px;
      }
      .icon {
        color: rgb(44, 43, 43);
      }
    }
    .el-form-item__label {
      color: #fff;
    }
    // 标题
    .clearfix {
      font-size: 34px;
    }
    // 按钮
    .el-button {
      width: 100%;
    }
  }
}
</style>

总结

登录页需要先设token值看看token 是否存在如果存在则跳转页面不存在留着继续输入。还需要输入框的正则方式格式不对无法提交账号信息接下来就是需要登录接口了。
看着挺多的但是你仔细捋一下思路都是有规律的好比上学需要语文课本就需要领语文课本，而语文课本是有编写者写的。你要是有足够时间你也可以自己配置一本语文书然后想学就拿！！！回到代码上登录页需要什么你配置什么最后引入就行

下章链接：《后台管理（下）》点击跳转