vue-admin-template 改造,vue template admin
这篇文章主要介绍了关于vue-管理-模板模板连接后端改造登录功能，登陆方法根据账号密码查出用户信息，根据用户编号与名字生成代币并返回，用户信息则是对代币进行获取，在查出对应值进行返回，感兴趣的朋友一起看看吧
首先修改统一请求路径为我们自己的登陆接口，在。环境发展文件中
#基础美国石油学会(American Petroleum Institute)
VUE _应用程序_基本_ API=本地主机：8081/API/dsxs/公司
打开登陆页面，src/views/login/index.vue
模板
div class=登录容器
El-form ref= loginForm :model= loginForm :rules= log in rules class= log in-form auto-complete= on label-position= left
div class=标题容器
h3 class=title 登录表单/h3
/div
el-form-item prop=用户名
span class=svg-container
svg-icon icon-class=user /
/span
埃尔输入
ref=用户名
v-model=loginForm.username
占位符=用户名
name=用户名
type=text
tabindex=1
自动完成=开
/
/El-表单-项目
el-form-item prop=password
span class=svg-container
svg-icon icon-class=password /
/span
埃尔输入
:key=passwordType
ref=密码
v-model=loginForm.password
:type=passwordType
占位符=密码
name=password
tabindex=2
自动完成=开
@ keyup。进入。native=处理登录
/
span class= show-pwd @ click= show pwd
SVG-icon:icon-class=密码类型===密码？眼睛:眼睛睁开 /
/span
/El-表单-项目
El-button:loading= loading type= primary style= width:100%；下边距：30px@点击。本地人。防止=处理登录登录/El-button
div class=tips
span style= margin-right:20px；用户名：管理/span
跨度密码：任何/span
/div
/el格式
/div
/模板
可以看到页面使用组件对loginForm进行名称和密码的绑定
data() {
常量有效用户名=(规则，值，回调)={
如果(!有效用户名（值)){
回调（新错误(请输入正确的用户名))
}否则{
回调()
}
}
const validatePassword=(规则，值，回调)={
if (value.length 6) {
回拨（新错误(密码不能少于6位))
}否则{
回调()
}
}
这段代码则为对输入的内容进行验证
看登陆的方法
handleLogin() {
这个参考文献。loginform。验证(有效={
如果（有效){
this.loading=true
这个. store.dispatch(用户/登录，this.loginForm).然后(()={
这个1000美元路由器。推({ path:这个。重定向 / })
this.loading=false
}).catch(()={
this.loading=false
})
}否则{
返回错误的
}
})
}
其中这个. store.dispatch(用户/登录，this.loginForm)，不是请求后台用户/登录接口，而是转到模块下的user.js中的注册方法，打开商店/模块/用户。射流研究…可以看到注册方法。而注册方法则是调用api/user.js中的注册方法。
此时修改商店/模块/用户。射流研究…接收后台传来的响应数据
常量操作={
//用户登录
登录({ commit }，userInfo) {
常数{用户名，密码}=用户信息
返回新承诺((解决，拒绝)={
登录({用户名：用户名。trim()，密码：密码})。然后(响应={
console.log(响应)
const { data }=响应
提交(设置令牌，response.data.token)
setToken(response.data.token)
解决()
}).接住(错误={
拒绝（错误)
})
})
},
同时在api/user.js中修改为我们后台的请求地址
从" @/实用工具/请求"导入请求
导出功能登录（数据){
退货请求({
url:"用户登录",
方法： post ，
数据
})
}
导出函数getInfo(token) {
退货请求({
url:"用户信息",
方法：“得到”，
参数：{ token }
})
}
此时可以发现模板采用的登陆方式是请求两次，第一次通过用户名密码请求后端，后端判断后，返回对应的令牌。然后在通过简介方法请求后端，获取用户真实信息。
在编写后端之前还需要修改utils/request.js，因为默认状态码是20000为成功，而我们平时返回的是200
//如果自定义代码不是20000,则判定为错误。
if (res.code！==200) {
消息({
message: res.message 错误，
类型："错误",
时长：5 * 1000
})
简单的编写后端代码，登陆方法根据账号密码查出用户信息，根据用户编号与名字生成代币并返回，用户信息则是对代币进行获取，在查出对应值进行返回。
@交叉起源
@RestController
@请求映射(/API/dsxs/company )
公共类CompanyuserController {
@自动连线
私人公司户服务公司用户服务；
//后台登陆
@PostMapping(userlogin )
@ResponseBody
public R userlogin(@ request body user VO user VO){
公司用户公司用户=公司用户服务。登录(用户VO)；
字符串标记=jwt助手。创建令牌(公司用户。getid()、公司用户。getname())；
返回R.ok().数据(令牌，令牌);
}
//返回信息
@GetMapping(userinfo )
公共R用户信息(字符串标记){
integer userId=jwthelper。获取用户标识(令牌)；
系统。出去。println(====)；
公司用户用户=公司用户服务。get byid(userId)；
HashMapString，String map=new HashMap()；
map.put(name ，用户。getname())；
map.put(头像，用户。getavatar())；
返回R.ok().data(name ，user.getName()).数据(头像，用户。getavatar())；
}
}
我这里使用@交叉起源注解解决的跨域问题。
到此这篇关于关于vue-管理-模板模板连接后端改造登录功能的文章就介绍到这了，更多相关vueadmintemplate登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。