【Vue入门】利用VueCli搭建基本框架--创建Http帮助类,在登陆页面请求api数据并存储token(四)
上节主要说了登陆页面的布局
这节主要说Http类的简单封装以及在登陆页面调用api并将结果返回存储
一、封装http帮助类,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//引入url常量类 import urls from './urls.js' // 导入axios请求封装类 import axios from 'axios' // 导入element的message及messagebox方法 import { Message } from 'element-ui' // 创建实例 create an axios instance const service = axios.create({ baseURL: urls.BaseUrl, //process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 2500 // 设置默认请求超时时间2.5秒 }) // 添加请求拦截器 service.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 service.interceptors.response.use(function (response) { var code = response.data.Code var message = response.data.Message if(code !== 10000){ Message({ message: message || '收到请求后比较code值出现异常,请检查大小写', // 消息内容 type: 'error', // success,error,info,warning 弹框类型 duration: 5 * 1000 // 显示时间 }) }else{ console.log('请求正确,response值为:',response) //直接返回成功的结果集 return response.data.Result; } }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); export default { service:service, }
使用了axios这个第三方的插件,创建了实例并初始化BaseUrl(官网)、另外利用提供的拦截请求和响应,对返回的数据做了处理。如果请求失败则弹框提醒,成功则获取实际Result对象返回
我的Api返回结果示例如下:
二、在login页面调用api请求
submitForm()提交方法代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//提交方法 submitForm(){ //调用form表单的validate方法,对所有元素进行校验 this.$refs.form.validate((valid)=>{ if (valid) { console.log('输入的账号为:' + this.formInfo.name); console.log('输入的密码为:' + this.formInfo.pass); this.sendRequest() } else { console.log('error submit!!'); return false; } }) },
sendRequest()代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//发送请求 async sendRequest(){ let result let data = { stu_no: this.formInfo.name, pwd: this.formInfo.pass, }; let url = this.$urls.Login; console.log('url是:' + url); //调用post await this.$request.service.post(url,data) .then(response=> { console.log('登陆页面拿到的response是',response); console.log('登陆页面拿到的token是' + response.token); //设置token window.sessionStorage.setItem('token',response.token); //设置跳转路由 this.$router.push({ path: '/Home' }); }) .catch(function (error) { console.log('登陆页面错误的消息为:',error); }) return result }
PS:如果没有Api这里直接模拟写入一个token值然后调用路由跳转到Home也是可以的
输入用户名、密码后台做简单判断然后跳转页面就能看到Home页面了,如下: