html 引入 vue axios jquery_Vue与服务端通讯

Vue.js 本身没有提供与服务端通讯的接口，但是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。

与服务器通讯

目前与服务器通讯的主流方法：

• Ajax：在无刷新网页的情况下实现数据的更新，它用起来很方便快捷，但是有一个缺点是在使用时我们需要引入一个 JQuery，引进来之后我们实际上只用了它里面的一个方法，但是却导致引入了两个库，jQuery 太大，因此很少使用。
• axios，适用于在 ES5 和 ES6 里面的 promise 出现之后才出现的，它返回一个承诺，易于分离。就是允许我们用 .then 的方法来实现后续的操作，由于是一个承诺因此它的封装也很方便。比如封装一个构造函数，我们需要用的时候就把它实例化一下(使用比较普遍)。
• fetch：新出来的一个方法，它的架构和框架都是比较底层的，需要我们进行二次封装(不推荐使用)。它有一个比较大的优点是支持原生跨域。

使用axios实现与服务器通讯

以 axios 为例，介绍如何实现 Vue 与服务端的通讯。

首先我们需要先引入 axios 代码，可以在 npm 仓库找到：https://www.npmjs.com/package/axios-es6

使用 cdn 方式引入代码：

使用 npm 方式安装 axios ：

npm install axios

使用 bower 方式安装 axios：

bower install axios

示例：

首先我们将下载好的 axios.min.js 文件放入项目的 src 目录中，然后在 HTML 中引入，类似下面这样：

在 Vue 中，发起网络请求，可以放到生命周期中。我们使用 mounted 挂载完成，然后做一个网络请求：

Vue的学习(9xkd.com)

侠课岛欢迎你

post 请求是带参数的：

mounted() {    axios.post('url', data)    .then(function (response) {        console.log(response);    })    .catch(function (error) {        console.log(error);    });}

除了在生命周期中使用，我们也可以 methods 中使用，例如在 methods 中定义一个 getData 函数：

点击

解决跨域问题

在项目的 config 目录下的 index.js 文件中，配置 proxyTable：

proxyTable: {    '/api': {        target: 'http://localhost:8080/',  //目标接口域名        changeOrigin: true,  //是否跨域        pathRewrite: {            '^/api': ''   //重写接口，后面可以使重写的新路径，一般不做更改        }    }},

如图所示：

链接：https://www.9xkd.com/