使用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。
<script src="js/vue.js"></script>。
<script src="js/vue-resource.js"></script>。
2、基于全局Vue对象使用http。
// 通过someUrl获取后台数据,成功后执行then的代码。
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);。
3、在一个Vue实例内使用$http。
// $http是在vue的局部范围内的实例。
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);。
说明:
在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。
方法/步骤
新建一个html代码页面,然后创建一个<div>,然后给这个<div>设置id为app。
请点击输入图片描述
引入vue.js文件。引入已经下载好的vue.js文件。
请点击输入图片描述
创建vue实例。在引入的vue.js文件后新建一个<script>,然后只用new Vue()创建vue设置挂载点。
代码:
<script>
var app = new Vue({。
el:"#app"
})
</script>。
请点击输入图片描述
添加数组。在Vue里添加一个items的数组。
代码:
data:{
items:["张三","李四","王五"]。
请点击输入图片描述
创建vue组件,使用v-for把items数组遍历,然后把遍历好的数据转给子组件,子组件通过props获取父组件传递的参数。
html代码:
<todo-item v-for="item in items" :item="item"></todo-item>。
vue组件代码:
Vue.component("todo-item",{。
props:['item'],。
template:"<div>{{item}}</div>"。
})
请点击输入图片描述
保存html文件后使用浏览器打开,即可看到浏览器上打印出items数组数据。
请点击输入图片描述
vue-router中,页面之间跳转是不能传递数组的。
首先在app.vue里面有这么一段<router-view class="router-view" ></router-view>。
然后你所点击的按钮其实是这个东西<router-link :to=""></router-link>,这个其实就是个封装完的a标签。
你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了。
public String androidPost() { String rs = null; String path = "url/Android_JDBC_SH/AndroidLoginAction"; HttpPost hp = new HttpPost(path); //获取客户端,用来向服务器发出请求 DefaultHttpClient hc = new DefaultHttpClient(); try { //Default Constructor taking a name and a value BasicNameValuePair nm = new BasicNameValuePair("name", name); BasicNameValuePair pa = new BasicNameValuePair("password", password); List list = new ArrayList(); list.add(nm); list.add(pa); //构建向服务器发送的实体 HttpEntity entity = new UrlEncodedFormEntity(list); hp.setEntity(entity); //提交请求,获取服务器的响应 HttpResponse response = hc.execute(hp); if (response.getStatusLine().getStatusCode() == 200) { //获取响应实体 entity = response.getEntity(); rs = EntityUtils.toString(entity); } } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return rs; }。
获取服务器传来的数组数据进行,找出其中价格相同的进行数量相加,合并该段数据:
/** 先将传来的订单列表进行四舍五入,再将价格相同的订单进行合并。
* @param {Object} orderList :要进行操作的订单。
*/
async mergeOrder(orderList) {。
console.log(orderList);。
原文地址:http://www.qianchusai.com/vue%E5%90%91%E5%90%8E%E7%AB%AF%E4%BC%A0%E6%95%B0%E7%BB%84.html