24小时咨询热线

030-48827209

餐厅展示

您的位置:主页 > 餐厅展示 > 法式餐厅 >

Vue与服务端通讯

发布日期:2021-10-25 01:29浏览次数:
本文摘要:Vue.js 自己没有提供与服务端通讯的接口,可是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。与服务器通讯现在与服务器通讯的主流方法:Ajax:在无刷新网页的情况下实现数据的更新,它用起来很利便快捷,可是有一个缺点是在使用时我们需要引入一个 JQuery,引进来之后我们实际上只用了它内里的一个方法,可是却导致引入了两个库,jQuery 太大,因此很少使用。

鸭脖体育app

Vue.js 自己没有提供与服务端通讯的接口,可是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。与服务器通讯现在与服务器通讯的主流方法:Ajax:在无刷新网页的情况下实现数据的更新,它用起来很利便快捷,可是有一个缺点是在使用时我们需要引入一个 JQuery,引进来之后我们实际上只用了它内里的一个方法,可是却导致引入了两个库,jQuery 太大,因此很少使用。axios,适用于在 ES5 和 ES6 内里的 promise 泛起之后才泛起的,它返回一个答应,易于分散。

就是允许我们用 .then 的方法来实现后续的操作,由于是一个答应因此它的封装也很利便。好比封装一个结构函数,我们需要用的时候就把它实例化一下(使用比力普遍)。fetch:新出来的一个方法,它的架构和框架都是比力底层的,需要我们举行二次封装(不推荐使用)。它有一个比力大的优点是支持原生跨域。

鸭脖体育app

使用axios实现与服务器通讯以 axios 为例,先容如何实现 Vue 与服务端的通讯。首先我们需要先引入 axios 代码,可以在 npm 堆栈找到:https://www.npmjs.com/package/axios-es6使用 cdn 方式引入代码:<script src="https://npmcdn.com/axios/dist/axios.min.js"></script>使用 npm 方式安装 axios :npm install axios使用 bower 方式安装 axios:bower install axios示例:首先我们将下载好的 axios.min.js 文件放入项目的 src 目录中,然后在 HTML 中引入,类似下面这样:<script src="./src/axios.min.js"></script>在 Vue 中,提倡网络请求,可以放到生命周期中。我们使用 mounted 挂载完成,然后做一个网络请求:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue的学习(9xkd.com)</title><script src="./src/vue.min.js"></script><script src="./src/axios.min.js"></script></head><body> <div id="app"> <div>侠课岛接待你</div> </div> <script> var app = new Vue({ el:"#app", mounted() { // 传入URL axios.get('url') // url // 执行操作 .then(function(response) { // 接受一个回调 console.log(response); // 打印响应 }) // 捕捉错误 .catch(function(err) { console.error(err); // 打印错误信息 }) } }) </script></body></html>post 请求是带参数的:mounted() { axios.post('url', data) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });}除了在生命周期中使用,我们也可以 methods 中使用,例如在 methods 中界说一个 getData 函数:<body> <div id="app"> <button v-on:click="getData">点击</button> </div> <script> var app = new Vue({ el:"#app", methods:{ getData: function(){ axios.post('url',data) // url是链接,data是数据 // 执行操作 .then(function(response) { // 接受一个回调 console.log(response); // 打印响应 }) // 捕捉错误 .catch(function(err) { console.error(err); // 打印错误信息 }) } } }) </script></body>解决跨域问题在项目的 config 目录下的 index.js 文件中,设置 proxyTable:proxyTable: { '/api': { target: 'http://localhost:8080/', //目的接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //重写接口,后面可以使重写的新路径,一般不做更改 } }},如图所示:链接:https://www.9xkd.com/。


本文关键词:Vue,与,服务,端,通讯,Vue.js,自己,没有,提供,与,鸭脖体育app

本文来源:鸭脖体育官网-www.inpandatown.com

XML地图 鸭脖体育 - 登录官网