如何使用vue.js与后台实现数据交互

JavaScript029

如何使用vue.js与后台实现数据交互,第1张

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例如下：

1、导入vue-resource

2、基于全局Vue对象使用http

// 通过someUrl获取后台数据，成功后执行then的代码

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback)

3、在一个Vue实例内使用$http

// $http是在vue的局部范围内的实例

...使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

说明：

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

项目首页由顶部导航栏，左侧导航栏，中间内容区构成，如图

在app.vue引入element-ui，然后就可以在其他任何页面中使用了

将app.vue改为以下内容

后端用什么语言都行，Vue使用构建工具只是前端开发形式的改变，不影响后端工作。你应该是碰到了跨域问题。vue使用构建工具，采用的是node服务支持。例如webpack通常是以8080端口运行。但是后端通常是80端口，也就是说，这中间存在跨域。

但是，Vue+webpack打包以后，就是静态文件了，可以跑在任何端口下，通常支持和后端接口同时运行在80端口，这个时候也就不存在跨域了。也就是说，跨域往往是在开发过程中，实际的生产无需跨域。当然，那种业务拆分很彻底的另说，那本身就是要跨域的。

解决办法：1.后端服务器支持跨域，或者jsonP等跨域方法

2.webpack有代理方法，设置代理可以解决跨域问题

3.mockjs模拟后端接口，打包前一定要移除mockjs。通常可以用process.env.NODE_ENV==='development'来判断是否为开发环境。开发环境下引用mockjs即可。