版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
导入vue跟jq的包,这个就不用多说了。!!!
前端显示的HTML代码
在table中有一个id=“app”,注意一下。第二个标签中有for循环
<table border="1" cellspacing="0" cellpadding="5px" align="center"
id="app"><!-- 注意这里的id -->
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr v-for="(site,key) in sites"><!-- key是循环数据的下标,默认值是0 -->
<td align="center">{{key+1}}</td>
<td align="center">{{site.name}}</td>
<td align="center">{{site.sex}}</td>
<td align="center">{{site.province}},{{site.city}},{{site.area}}</td><!-- 这里输入的时候是省市级三级,要获取三个字段名,可能也有其他方法输出多个字段名 -->
<td>
<a v-on:click="edit(site.id)"><!-- 获取id -->
<input type="button" value="修改">
</a>
</td>
</tr>
</table>
这里的编号{{key+1}},就是根据查询出的数量进行输出的,跟for循环中的i相同,只不过这里的key初始值为0.(key为整个循环中的下标)。
关键部分!Vue代码
注意data获取到数据的类型,是二维数据(下面有图)。
<script>
var vm = new Vue({
el: '#app',//上面写的id,在这里使用
data:{
sites:[]
},
mounted(){
this.check();
},
methods:{
check:function(){
$.post("/work/VueindexAll",{},function(data){//data应该是随便写的变量名
//这里注意data的类型,是二维的数据,下面有图
alert(JSON.stringify(data));//这个方法在上一篇中解释过了,可以看一下第一篇文章
var len = data.length;
for(var i=0;i<len;i++){
vm.sites.push(data[i]);
}
});
},
}
});
</script>
我这里为了简短代码,把一些没必要的字段删除了,但是我本地的没有修改,所以查出的数据多一些。注意开头结尾的[{ }],这是二维数据。
java代码,为了方便,就只写Controller
这里需要注意的就是@responseBody了,因为第二个返回的是数据,前端页面需要获取,所以必须要写上。
//调用首页
@RequestMapping("VueIndex")
public String VueIndex() {
return "/VueWorkIndex";
}//这段代码只有一个作用,就是映射模板,通过这里打开那个html页面。return返回的就是html页面的文件名
//向首页返回值
@RequestMapping(value = "VueindexAll")
@ResponseBody
public List<Map> VueIndexAll() {
return workService.findAllData();
}//这里返回的必须是查询出的内容。我第一次写的时候就是用Model上传了值,然后return了文件名。