Vuejs由1.0更新到了2.0版本。HTTP请求官方也从推荐使用Vue-Resoure变为了 axios

。接下来我们来简单地用axios进行一下异步请求。(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等。。。)

首先我们来安装Vue-Cli开发模板(这个模板可以快速生成vuejs的运行配置环境,可以使新手快速免除配置搭建出运行界面),这里我使用cnpm命令,请自行百度配置。

打开命令窗口:

cnpm install -g vue-cli

等待片刻,即可安装完毕。

然后新建一个Vuejs项目

vue init webpack axiosproject

切换到项目目录,执行命令:

cnpm install axios --save --dev

最后执行命令安装项目所需依赖:

cnpm install

稍等片刻,即可完成。现在我们来跑一下用Vue-Cli搭建出来的项目,执行命令:

cnpm run dev

自动浏览器自动弹出这个界面就说明上面的步骤我们成功实现了。

接下来我才来真正的开始用编辑器来使用axios。打开VS Code(编辑器请自行用自己喜欢的,本人软粉,所以首选VS Code),我们来改造一下main.js入口文件

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})

我们引用了axios,再将axios这个对象clone到Vue的$http这个属性上,以后我们就可以在其他组件里使用axios来进行 异步请求了。不多说了,我们最终的结果就是将请求的数据打印到浏览器控制台就算成功了。我使用的接口是本地模拟的,不过区别不大。这里特别说明一下关于跨域,跨域需要配置返回的请求头,在asp.core做如下处理,其他后端配置可以参照;

这是Get接口返回在浏览器返回结果:

好,接下来我们在Hello.vue这个组件里写一些脚本

<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created:function(){
this.HelloAxios();
},
methods:{
HelloAxios(){
this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
}
}
}
</script>

至此我们完成了Get请求,接下来,我们完成Post请求

<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created:function(){
this.HelloAxios();
this.HelloAxiosPost('HelloAxiosPost');
},
methods:{
HelloAxios(){
this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
},
HelloAxiosPost(val){
let str = 'value='+val
this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data));
}
}
}
</script>

结果如图,我们传的值'HelloAxiosPost'也打印出来了。有人可能会问

这里问什么要这么写,官方文档是这么写的

亲测这样写不行。有兴趣的朋友可以自行测试。那我们再来说说为何是那个字符串

查看chorme F12查看一下网络请求,发现我们请求的值就是Form Data。这样我们就可以拼接参数请求了,多参数格式为param1=value1&param2=value2。

Vue.js 2.0 跨域请求数据的更多相关文章

  1. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  2. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  3. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  4. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  5. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  6. Jsonp的js实现,跨域请求,同源策略机制

    Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和 ...

  7. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

  8. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  9. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

随机推荐

  1. 温故而知新-正则单词和strlen

    1 正则表达式用\b表示单词的开始和结束 \bblog\b 正则查找blog这个单词 2 关于strlen的汉字问题 在utf8格式下  strlen('汉字')=6 在gbk格式下 strlen(' ...

  2. 树结构之JavaScript

    对于数据结构“树”,想必大家都熟悉,今儿,我们就再来回顾一下数据结构中的二叉树与树,并用JavaScript实现它们. ps:树结构在前端中,很多地方体现得淋漓尽致,如Vue的虚拟DOM以及冒泡等等. ...

  3. springboot sybase 数据库

    依赖:(驱动) <!-- https://mvnrepository.com/artifact/net.sourceforge.jtds/jtds --> <dependency&g ...

  4. Activity工作流学习(一)——Activity服务类

    Activity有9个service1.DynamicBpmnService动态Bpmn服务Service providing access to the repository of process ...

  5. as3 typeof 对象类型与返回结果对照表 is as

    is 和as 运算符使用很广泛.is 用来判断一个对象是否属于一种类型,返回布尔值,true 代表属于,false 表示不属于.使用格式如下:trace (9 is Number); //输出:tru ...

  6. as3 对于加载进来多层swf缩放操作

    //swf实际尺寸 var oldWidth:Number = frameLder.contentLoaderInfo.content.width; var oldHeight:Number = fr ...

  7. 工作中用到和应该知道的eclipse快捷键

    Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代IDE开发环境,2001年11月贡献给开源社区,现在它由非营利软件供应商联盟Eclipse基金会(Ecl ...

  8. System.Data.SqlClient.SqlError: 尚未备份数据库的日志尾部

    SQL还原时出现下面的错误,System.Data.SqlClient.SqlError: 尚未备份数据库 "***" 的日志尾部.如果该日志包含您不希望丢失的工作,请使用 BAC ...

  9. linux下set命令的参数及用法

    linux  set 命令 功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选 ...

  10. dubbo-admin 管理平台

    一.前言 dubbo的使用,其实只需要有注册中心,消费者,提供者这三个就可以使用了,但是并不能看到有哪些消费者和提供者,为了更好的调试,发现问题,解决问题,因此引入dubbo-admin.通过dubb ...