1. 始vue化项目
  https://www.cnblogs.com/xiaonq/p/11027880.html
  1. vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得)
  2. cd deaxios # 进入项目
  3. npm install axios -S # 安装axios
2.封装axios

  2.1 src文件夹下新建http文件夹, 用来放网络请求相关的文件

  2.2 src/http 文件夹下, 创建 index.js 文件, 对axios进行封装  

  

/* eslint-disable */
//第一步:实例化axios对象,并设置 1.请求地址;2.超时时间;3.设置请求头数据格式
const axios = require('axios'); // 创建axios对象
// import qs from 'qs'
axios.defaults.baseURL = 'http://192.168.56.100:8888'; // vue请求后端地址 axios.defaults.timeout = 10000; // 多久超时
axios.defaults.withCredentials = true; // 跨域访问需要发送cookie 时一定要加axios.defaults.withCredentials = true; /*** 设置请求传递数据的格式(看服务器要求的格式)
* x-www-form-urlencoded
* 默认提交表单
* 把数据对象序列化成 表单数据 */
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // axios.defaults.transformRequest = data => qs.stringify(data);
/** * 设置默认提交 json
* 把数据对象序列化成 json 字符串
*/
axios.defaults.headers['Content-Type'] = 'application/json'; // 设置默认提 交 json axios.defaults.transformRequest = data => JSON.stringify(data); // 把数据对象 序列化成 json 字符串 // 第二步:对请求拦截器,和响应拦截器进行封装
/**
* 请求拦截器: 发送请求前需要调用这个函数
1.当没有登录时,直接跳转到登录页
2.请求发送前把token获取,设置到header中
*/ axios.interceptors.request.use(config => {
// 从localStorage中获取token
let token = localStorage.getItem('token');
// 如果有token, 就把token设置到请求头中Authorization字段中
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
}); /**
* 响应拦截器:当后端返回数据给vue时会调用这个函数
1.没次返回403错误时,跳转到login
*/
axios.interceptors.response.use(response => {
// 当响应码是 2xx 的情况, 进入这里
debugger r
return response.data;
}, error => {
// 当响应码不是 2xx 的情况, 进入这里
debugger
return error
}); //第三步:使用上面的axios对象,对get请求和post请求进行封装
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params, headers) {
return new Promise((resolve, reject) => {
axios.get(url, { params, headers }).then(res => {
resolve(res.data.ResultObj)
}).catch(err => {
resolve (err.data)
})
})
} /**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
**/
export function post(url, params, headers) {
return new Promise((resolve, reject) => {
axios.post(url, params, headers).then((res) => {
resolve(res.data)
}).catch((err) => {
debugger
reject(err.data)
})
})
}
export default axios; //一定要导出函数
2.3 src/http 目录下创建 apis.js文件, 用来写 接口地址列表
/* eslint-disable */
// 接口信息, 生成请求方法
// 引入 get方法, post方法
import { get, post } from './index'
// 用户登录
export const login = (params, headers) => post("/user/login/", params, headers)
 

创建Vue项目及封装axios的更多相关文章

  1. Django day32 跨域问题,创建vue项目,axios的使用

    一:跨域问题 1.同源策略(浏览器的安全策略) 只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了 2.cors:只要服务器实现了CORS,就可以 ...

  2. vue — 创建vue项目

    创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...

  3. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  4. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  5. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

  6. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  7. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

  8. 安装配置nodejs并创建Vue项目

    一.下载安装node.js 1.Node.js 官方网站下载:https://nodejs.org/en/ 2.傻瓜式安装 双加安装包,除了根据自己的需要选择安装位置外,都默认下一步. 3.验证安装 ...

  9. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

随机推荐

  1. Java枚举简述

    Java 枚举(enum) Java 枚举是一个特殊的类,一般表示一组常量,比如一年的 4 个季节,一个年的 12 个月份,一个星期的 7 天,方向有东南西北等. Java 枚举类使用 enum 关键 ...

  2. python IDE(集成开发环境)——PyCharm的安装

    选择PyCharm的原因: 1.很多大佬都推荐,说适合实战操作项目 2.另外是界面可视化不错,颜色很舒服(体验完之后的感觉) 3.PyCharm本身有很多操作快捷键很方便(后续可以记下来常用的,方便自 ...

  3. 封装Vue Element的dialog弹窗组件

    我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...

  4. composer分析(二)结合PSR-4

    composer分析(二)结合PSR-4 PSR-4提供了一种文件和路径映射关系,非常类似文件系统的组织结构 全限定类名 \<NamespaceName>(\<SubNamespac ...

  5. C++从LPEXCEPTION_POINTERS获取调用堆栈

    #pragma once #include <map> #include <vector> struct FunctionCall { DWORD64 Address; std ...

  6. 【接口自动化】selenium库也有大用场(获取cookie)

    相信有些童鞋在做接口.或者说接口自动化测试的过程中会遇到这样的场景:测试的接口,必须是需要登录后才能发起请求成功的. 那么怎么解决呢? 本着团队协作的精神,我们就去让开发同学开个后门,给你个" ...

  7. Spring IoC 到底是什么

    前言 「上一篇文章」我们对 Spring 有了初步的认识,而 Spring 全家桶中几乎所有组件都是依赖于 IoC 的. 刚开始听到 IoC,会觉得特别高大上,但其实掰开了很简单. 跟着我的脚步,一文 ...

  8. Keepalived之高可用LVS集群

    前文我们聊了下keepalived的邮件通知相关配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13645163.html:今天我们来说说keepalive ...

  9. Win10更新后蓝牙出现故障的解决方法

    昨天Win10自动更新后,我发现我的键盘突然就不管用了,检查了一下发现原来蓝牙没有打开,同时任务栏中的蓝牙图标也不见了. 不久之前,这样的情况已经出现过了一次,那次好像更新系统后就好了,但这次是系统更 ...

  10. python中使用cookie进行模拟登录

    背景:使用cookie模拟登录豆瓣->我的豆瓣网页 [准备工作] 1.通过Fiddler抓取“我的豆瓣”url: 2.通过Fiddler抓取“我的豆瓣”cookie值. import urlli ...