1.现在public目录下的global.config.js文件中配置后端地址
后端地址是由后端同事提供的
2.在public-src-api目录下新建login.js文件,将接口请求写入该文件中
相应的代码段,方便复制
import axios from 'axios';
export function login (params) {
return axios.post(`${g_config.base_URL}/xxxxxxxx/dologin`, params);
}
其中,base_URL与global.config.js文件中的地址相对应 ,文件中post传递的地址在swagger中查看。
3.在login.vue文件中引入并写相应的方法
在methods中编辑相关方法:
onSubmit() {
if (this.checkInput()) {
let password = md5(this.password)//密码采用md5形式加密
//将用户名和密码写入表单中
let formData = new FormData()
formData.append('username', this.username)
formData.append('password', password)
login(formData).then((res) => {
// console.log(res)
//网页F12通过后端返回值查看状态码,若为200,接口通,登录成功,否则登录失败
if (res.data.code == 200) {
//本地存储usertoken,
//localStorage用于长久保存整个网站的数据,没有过期时间,直到手动去删除。
//localStorage 属性是只读的
localStorage.setItem('userToken', res.data.data.userToken)
this.$message.success('登录成功')
this.$router.push({ path: '/space' })
} else {
this.$message.warning('登录失败')
}
})
}
}
此时F12中会输出userToken,将其写入swagger,会保存一段时间,其他接口对接时不用再次输入token值了。