封装axios在vue-cli项目中便捷使用
首先创建一个vue-cli搭建起来的vue项目这个不用多说了。
安装axios,使用npm install axios --save命令安装依赖,这时候项目的package.json文件中的"dependencies"属性会有个"axios"和它的版本号就说明
安装成功了
接下来就在项目中的src下面的assets文件里创建一个js文件夹,在js文件夹里创建俩个文件,一个是api.js,另一个是config.js,当然创建的文件夹和文件的名字随意起的
其中在config.js文件里写上你的后台的接口前半部分相同的url,然后用export导出去
然后在api.js里配置信息
import Vue from 'vue' //引入vue
import axios from 'axios' //引入axios
import {axiosUrl} from './config' //引入配置的公共接口url
axios.defaults.baseURL = axiosUrl; //axios的基地址
Vue.prototype.$http = axios //挂载axios到vue原型的$http属性下 Object.assign(Vue.prototype,{ //vue的原型合并axios和axiosUrl
_ajax : axios ,
_api : axiosUrl
})
然后在项目的main.js里引入你配置的那些
配置完毕,现在想在项目中使用axios调用接口
this._ajax({ //在api.js后面合并的axios属性名_ajax一致,名字随意
url:this._api + 'getNum', //基地址加上后面不同的url地址
method:'POST',
timeout:6000,
params:{}
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
这样就可以不用在每个接口里都写全部地址,便于后期维护,更方便的使用axios。
封装axios在vue-cli项目中便捷使用的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...
随机推荐
- MOT大连站 | 卓越研发之路:前沿技术落地实践
还在讨论究竟哪种编程语言更容易深度学习?哪种编程语言更具有价值?如果你是资深技术人员又或者是团队负责人,在机器学习.微服务.Spring 5反应式编程等方面遇到了问题,不妨参加一场由msup和微软联合 ...
- [人工智能] 安装python jupyter
1. 什么是python jupyter ? 简单的说,可以理解为一个IDE. http://jupyter.org/ 2. 安装python jupyter notebook http://ju ...
- 第一个微信小程序踩的几个小坑
1.小程序测试调试阶段可以打开项目设置中的“开发环境不校验请求域名.TLS版本及HTTPS证书”配置,即可以和自己的服务器联调了. (需要在工具栏的设置 -> 项目设置 中配置,mac下直接co ...
- vue.js 之 watch 详解
接我上篇博客的例子: 在上面代码中,当我们修改 firstName 或 lastName 后,watch 监听每次修改变化的新值,然后计算输出 fullName:此时 watch 的一个缺点是,最初绑 ...
- Jmeter学习之-获取登录的oken值(2)
此篇介绍获取登录token的第二种方式--json提取器提取 PS:此方法针对接口返回值为json串格式 在登录请求上右键添加JSON提取器 ...
- 关于 Shell 的相关概念和配置方法,全在这儿了!
使用Linux的过程中少不了使用各种各样的Shell, 而根据启动环境的不同,Shell会读取不同的配置文件.本文便来详细介绍这些不同名字的配置文件在何时会被Shell读取. 什么是 Shell Sh ...
- JavaScript中各种对象之间的关系
上图: 此外,补充一下图中用到的概念: 1.内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动 ...
- Python3使用AES加密的库函数PyCrypto、PyCryptodome
我们在网上查看Python爬虫教程的时候,细心的朋友会发现:很多网站为了降低服务器的请求压力都做了各式各样的反爬策略,浏览器通过http post请求服务器端数据时,传输的data字段很多都是经过加密 ...
- 今天整理了一下Winform用的UI插件信息
平时主要用了一下几个比较好的UI控件: 1:IrisSkin2 皮肤插件.这是一款与编程开发相关的素材资源,主要是提供一些采用IrisSkin2.dll控件进行软件窗口换肤的素材文件,包括一些GIF图 ...
- [openjudge-贪心]删数问题
题目描述 题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N和k,寻找一种方案使得剩下的数字组成的新数最小. 输出应包括所去掉的数 ...