开发环境跟脚手架初始完毕后,我们开始配置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. isolate 通信

    main.dart import 'package:flutter/material.dart'; import 'package:flutter_isolate/flutter_isolate.da ...

  2. 使用HBuilderX打包成app之后点击返回按钮让它返回上一个页面

    首先:下载引入mui.min.js文件,MUI框架mui-min.js文件github地址 https://github.com/dcloudio/mui 下载之后并在index.html文件中引入如 ...

  3. Oracle表数据转换为XML格式数据

    转自:https://blog.csdn.net/smile_caijx/article/details/83352927 使用DBMS_XMLGEN可以解决问题 SELECT DBMS_XMLGEN ...

  4. 臀部——哑铃&杠铃

  5. mysql学习之基础篇03

    我们今天来进行建表的基本操作: 首先要建表就要了解列类型,因为建表就是声明列的过程,列声明完成了,表也就建好了. mysql中列分为三大类: 一.数值型 数值型又分为整型和浮点型两种. 先来看整型: ...

  6. Java--8--新特性--接口中的变化!!

    package InterfaceP; public interface Interface1 { default String getName(){ return "Interface1& ...

  7. Minio对象存储

    目录 Minio对象存储 1.概述 2.功能特性 3.2.多节点 3.3.分布式 4.分布式minio集群搭建 4.1.集群规划 4.3.编写集群启动脚本(所有节点) 4.4.编写服务脚本(所有节点) ...

  8. C++ --- 编码习惯小区别

    定义一个变量,最好养成C代码的习惯 C代码: 用到的变量X,要在最开始定义:先定义,用的时候在初始化: [例如] int x; //先定义 ..... ..... ; //再初始化 C++代码: 用到 ...

  9. 在线研讨会预热 | 基于ASPICE&CNAS的单元测试介绍

            随着新能源车.智能驾驶技术的快速发展,软件本身复杂度越来越高,应用场景也是复杂多样,如何保证软件质量对我们来说是一个严峻的挑战.软件测试作为软件质量保证的重要手段,被各大整车厂和供应商 ...

  10. java -static的特性和使用,静态类/方法/块/内部类/回收机制

    mark一下,今天的作业. java-core P115 如果将域定义为static,每个类中只有一个这样的域.(这里的域应该是指一片物理数据空间,而不是单纯的指代某一个变量,而是静态域). publ ...