文章目录

• 前言
• 一、创建一个文件夹 utils 里面新增一个 setToken.js 文件(设置token验证）
• 二 、创建一个api文件夹 新增 service.js （axios拦截器）
• 三、在api文件夹里 新增一个 api.js 来接收数据（把api封装哪里需要某项数据直接引入就行）
• 四、设置输入框格式 在 utils 文件里新增格式验证规则 validate.js 文件
• 五、login 登录页面
• 总结

前言

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

*接上章基础配置写完。本章继续开始编写登录页面，正文如下：

一、创建一个文件夹 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'))// 在请求报文的头部，添加 tokenconfig.headers['token'] = getToken('token')return config
},(error) => {// 对请求错误做些什么return Promise.reject(error)
})// 添加响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做些什么// console.log(response)// 对响应的数据，同一做出判断let { status, message } = response.dataif (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数据 还有验证规则 已配置好 开始引入各个功能编写登录页面

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

总结

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

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