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

JavaScript030

如何使用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即可。