好女人生活常识网站建设,汕头企业网站建站模板,长春商城网站建设,wordpress 仿钛媒体文章目录前言一、创建一个文件夹 utils 里面新增一个 setToken.js 文件(设置token验证#xff09;二 、创建一个api文件夹 新增 service.js #xff08;axios拦截器#xff09;三、在api文件夹里 新增一个 api.js 来接收数据#xff08;把api封装哪里需要某项数据直接引入就…
文章目录前言一、创建一个文件夹 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数据 还有验证规则 已配置好 开始引入各个功能编写登录页面
新增小眼睛查看密码功能 都有注释
templatediv classloginel-card classbox-carddiv slotheader classclearfixspan通用后台管理系统/span/div!-- rules 正则 --el-form:modelformrefformlabel-width100pxclassdemo-ruleForm:rulesrulesel-form-item label用户名 propnameel-inputtypetextv-modelform.nameautocompleteoff/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelform.password :typeType/el-inputi classel-icon-view clickShow :class{ icon: Color }/i/el-form-itemel-form-itemel-button typeprimary clicklogin(form)登录/el-button/el-form-item/el-form/el-card/div
/templatescript
// 引入登录接口
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);}});}});},},
};
/scriptstyle langscss
.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 是否存在 如果存在则跳转页面 不存在留着继续输入。还需要输入框的正则方式 格式不对无法提交账号信息 接下来就是需要登录接口了。 看着挺多的但是你仔细捋一下思路 都是有规律的 好比上学 需要语文课本 就需要领语文课本而语文课本是有编写者写的。你要是有足够时间你也可以自己配置一本语文书 然后想学就拿 回到代码上 登录页需要什么 你配置什么最后引入就行
下章链接《后台管理下》 点击跳转
