vue安装axios

cnpm install axios
安装成功后/项目/node_modules/目录下有axios文件夹
在package.json文件中devDependencies字段中添加插件名和插件版本
"axios": "^0.17.1", 在vue项目中引用axios
1.src/main.js
import axios from 'axios'
Vue.prototype.$axios = axios show: function(){
//get方式 //赋值给变量self
var self = this; var url = "hotcity.json";
axios.get(url,{
params:{
username: "egon"
}
})
.then(function (response) {
self.stu = response.data.data.hotCity;
console.log(response.data.data.hotCity);
})
.catch(function (error) {
console.log(error);
}) } show: function(){
//post方式
//var url = "http://bugwhy.com/php/index/getNews.php";
var url = "http://localhost:8000/login";
axios.post(url,{
name: this.username,
password: this.password
},{
"headers": {"Content-Type": "application/x-www-form-urlencodeed"}
}).then(function(res){
console.log(res.data);
})
.catch(function (error) {
console.log(error);
}) }

  

vue axios 应用的更多相关文章

  1. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  2. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  3. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  4. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  5. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  6. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  7. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

  8. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  9. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  10. Vue+axios(interceptors) 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

    axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...

随机推荐

  1. html里id和name的异同

    id与name的作用,作为标签的标识符,基本上是一样的. name是老方法,id是在name基础上发明的,比name“现代化”一点,用的范围广一点 <...>中的name原来(刚发明时)就 ...

  2. python 之CORS,VUE+rest_framework示例

    一.跨域     浏览器的同源策略                 ----对ajax请求进行阻拦                 ----对href属性读不阻拦        xhr=new XML ...

  3. Spring Boot入门——freemarker

    使用步骤: 1.在pom.xml中添加相关依赖 <!-- 添加freemarker依赖 --> <dependency> <groupId>org.springfr ...

  4. js中出现问题--Type Syntax error on token "catch", Identifier expected jquery.js

    解决方案: 1.选中jQuery报错的web工程: 2.右键-->Myeclipse-->Exclude From Validation,选中: 3.继续右键Myeclipse--> ...

  5. 自己编写each函数

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. java数组类Arrays:比较,填充,排序

    int i1[] = {1,2,3,4,5,6}; int i2[] = {6,5,4,3,2,1}; //排序 Arrays.sort(i2); System.out.println(i1.equa ...

  7. 原生js实现用鼠标画图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 14-THREE.JS 聚光灯

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  9. Mybatis 接口方式对数据的增删改查 一对一关联查询

    数据库中有两个表 student 和studentInfo student表中的字段和数据 studentInfo表中的字段 ok数据库说完了,开始建立一个项目,对数据库中的数据进行操作吧 新建jav ...

  10. 【Oracle】异常信息的加工处理

    引言     很多时候,我们调用oracle存储过程都会发生各种各样的异常信息,例如ORA-12899值过大,ORA-01400不能插入空值等.虽然说这类异常是前端没控制到位的缘故,但是现实很难100 ...