Vue首页查询数据库，使用循环

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ZF2015908732/article/details/102601892

导入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了文件名。