开发环境跟脚手架初始完毕后,我们开始配置axios请求后台接口   axios使用说明:https://www.kancloud.cn/yunye/axios/234845

1、本人是在脚手架中的src目录下新建api文件夹,在新建一个fetch.js 文件用来配置axios以及管理后台的接口

2、开始安装axios  npm axios --save 安装

3、下面的代码是封住axios后的请求文件

import axios from 'axios'
import qs from 'qs' import { Message } from 'element-ui'; const baseURL = '你的请求地址' // 测试地址 axios.defaults.timeout = 10000; //响应时间
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 设置token
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = baseURL; //配置接口地址 //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
// 可以在这里设置请求头中的token
// 这里写死一个token,你需要在这里取到你设置好的token的值
// const token = 'this is a token';
// if (token) {
// 这里将token设置到headers中,header的key是Authorization,这个key值根据你的需要进行修改即可
// config.headers.Authorization = token;
// } //在发送请求之前做某件事
if(config.method === 'post'){
// config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
Message({
type: 'error',
message: "错误的传参"
})
return Promise.reject(error);
}); //返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(res.data.retcode == 0){
return res
} else if(res.data.retcode == '50021021') {
localStorage.removeItem('user_token_key');
// localStorage.removeItem('userName');
location.href = '#/login';
} else {
Message({
type: 'error',
message: res.data.retmsg
})
// return Promise.reject(res);
return res
}
}, (error) => {
console.log(error)
Message({
type: 'error',
message: "网络异常"
})
return Promise.reject(error);
}) //返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
// 返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
} export default { /**
* 用户登录
*/
Login(params) {
return fetchPost('/useraction/login', params)
}, }

记一次vue+vuex+vue-router+axios+elementUI开发(二)的更多相关文章

  1. 记一次vue+vuex+vue-router+axios+elementUI开发(三)

    项目用到了状态管理工具 Vuex  中文文档:https://vuex.vuejs.org/zh/guide/ 大家都知道,vue中可用props将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...

  2. 记一次vue+vuex+vue-router+axios+elementUI开发(一)

    记录自己的vue开发之旅,方便之后查询 一.开发环境 1.安装node.js  自带npm https://nodejs.org/en/ 2. 全局安装vue-cli脚手架 npm install v ...

  3. vue全家桶router、vuex、axios

    main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...

  4. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

  5. vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...

  6. Vue(5)- axios、vuex

    一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loade ...

  7. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  8. 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目

    第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...

  9. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

随机推荐

  1. whois

    import 'dart:io'; import 'dart:convert'; main()async{ List a = ['1.cn','2.cn','3.cn','4.cn','5.cn',' ...

  2. 深入理解JVM(五) -- 垃圾回收算法

    上篇文章我们了解到哪些内存区域和哪些对象可以被回收,这篇文章我们就来了解一下具体的垃圾回收算法的思路,不讨论具体的实现. 一 最基础算法 标记-清除(Mark-Swap) 为什么说他是最基础的算法,因 ...

  3. LVS简单理解

    LVS LVS(Linux Virtual Server)即Linux虚拟服务器 目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案 终端用户 ...

  4. mongodump

    mongodump工具是MongoDB提供的用来导出数据的工具,具体的用法参考官方文档:https://docs.mongodb.com/manual/reference/program/mongod ...

  5. java web编程 servlet3

     

  6. MySQL Hardware--FIO压测

    FIO参数 .txt 支持文件系统或者裸设备,-filename=/dev/sda2或-filename=/dev/sdb direct= 测试过程绕过机器自带的buffer,使测试结果更真实 rw= ...

  7. Debian9.5系统安装

    1.镜像下载地址 http://cdimage.debian.org/cdimage/archive/ 2.开始安装 如果有配置网络地址,可以手动配置或者跳过等系统安装好后配置.  至此debian9 ...

  8. MySQL学习总结 (InnoDB)

    主要内容: 存储结构 索引 锁 事务 存储结构 表 索引组织表:表是根据主键顺序组织存放的.如果表中没有非空惟一索引,引擎会自动创建一个6字节大小的指针. 主键的索引是定义索引的顺序,而不是建表时列的 ...

  9. jvm整理

    我 2.JVM内存区域 p{ text-align: center; font-size: 12px; margin: 4px 0 0 0; } .nav-thumb >div{ positio ...

  10. Java中处理接口返回base64编码的图片数据

    在做接口测试的时候,某些接口返回的content是一大段加密文字.这种情况下,有可能是返回的图片加密数据,需要将这些数据转换成图片进行保存查看. 例如: 这里,可以看到Content对应的键值开头有“ ...