我写vue的时候，跟同学的代码基本一样，他的可以，我的就不可以。找了半天，一直没找到。最后让老师看了下，是在写行内样式的时候多了一个分号。所以说，这个东西如果报错，还不知道哪里错，就把那些花里胡哨的先都删了，在慢慢找。

本页面仅有数据回显功能！！！，修改后提交没有写

查询页

首页查询到信息后，点击修改，会跳转到相应的修改。这里是根据id进行判断的。（实体中id我保存的String型，在数据库中是int型）

首页

vue代码

<script>
		var vm = new Vue({
			el: '#app',//这里是调用id，我把id="app"写在table标签里了
			data:{
				sites:[]
			},
			methods:{
				edit:function(id,key){//通过点击修改按钮触发事件，这里的key好像没什么用，我复制的代码，有些地方可能没删干净，不敢乱删了
					window.location.href="/work/VueEdit?id="+id;
				}
			}
	});
</script>

首页html代码，这里就只给修改按钮的标签了

<td>
	<a v-on:click="edit(site.id)"><!-- 这里的id是数据库字段里面的id，然后上传给Controller的edit，edit只有调用修改页面的作用，没有查询功能。不知道怎么获取可以参考上上篇文章，里面补充了 -->
		<input type="button" value="修改">
	</a>
</td>

修改页面方案①

修改页面首先是获取信息，在这呢，我的信息分为了两个表，一个是主要的信息表，另一个是班级表。所以获取的时候就要获取两次，当然应该也可以用表连接，获取一次就够了。

html代码

<table  border="1" width="600px" cellspacing="0" cellpadding="5px" align="center" 
 id="app">
<tr>
<td>
<!-- 隐藏域，保存id信息 -->
<input type="hidden" id="eid"  name="id" th:value="${id}"><!-- 这里的id是通过Controller中获取的，并不是主页传来的id -->
<!-- 添加唯一性判断 -->
手机号：<input type="text" id="tell" name="tell" v-model="sites.tell"><span id="text"></span><br /><br />
姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" v-model="sites.name"><br /><br />
班&nbsp;&nbsp;&nbsp;&nbsp;级：
<select name="cid" v-model="cids"><!-- cids是vue中随便定义的变量 -->
	<option v-for="claa in clas" :value="claa.cid">{{claa.cname}}</option><!-- 这里必须要写:value才可以 -->
	<!-- 这个是文本域的默认选中，因为文本域没有value，所以直接用text来实现默认回显 -->
简&nbsp;&nbsp;&nbsp;&nbsp;介：<textarea rows="5" cols="35" th:text="${data.intro}" name="intro" style=resize:none; ></textarea><br /><br />

</select><br /><br /><!-- 班级采用的是下拉框，默认选中-->
<br />

</td>
</tr>
</table>

vue代码

<script type="text/javascript">
var vm = new Vue({
	el:"#app",
	data:{
		sites:[],
		cla:[],
		cids:null
	},
	mounted(){
		this.check();
	},
	methods:{
		check:function(){
		//获取html中从controller获取来的id
			var id = $("#eid").val();
			//将id传给Controller中的VueEditData，进行查询
			$.post("/work/VueEditData",{id:id},function(data){
					vm.sites=data;
			});
			//查询班级信息
			$.post("/work/VueEditTell",{id:id},function(data){
				vm.cids=vm.sites.cla;//后面的cla是数据表中跟班级表id对应的字段名，前面的cids是变量名
				vm.cla=data;
			})
		},
	}
});
</script>

Controller代码

//首页跳转修改页
@RequestMapping("VueEdit")
public String VueEdit(HttpServletRequest req,Model model) {
	//接收从首页传来的id
	String id = req.getParameter("id");
	//将id映射给修改页
	model.addAttribute("id",id);
	return "/VueWorkEdit";
}
//修改页获取内容 ，实现数据回显 	
@RequestMapping("VueEditData")
@ResponseBody
public Work VueEditData(HttpServletRequest req){
	String id = req.getParameter("id");
	return workService.findId(id);//这里的方法都是自己写的，不是
}
//获取班级信息
@RequestMapping("VueEditTell")
@ResponseBody
public List<Cla> VueEditTell(HttpServletRequest req) {
	String id = req.getParameter("id");
	return claService.findAll();
}

修改页面方案②

首先是controller里面的不同了。这个不需要在首页调用了，只要点击首页的修改按钮，就会直接跳转到修改页面，不会在中间调用的时候获取数据然后再映射了。修改页数据的获取是通过js来实现的。

controller代码

//首页跳转的部分一样，都是传id，映射id
//修改页获取内容  	
	@RequestMapping("VueEditData")
	@ResponseBody
	public Work VueEditData(HttpServletRequest req){
		String id = req.getParameter("id");
		return workService.findId(id);
	}
		//获取班级
	@RequestMapping("VueEditCla")
	@ResponseBody
	public List<Cla> VueEditCla(HttpServletRequest req) {
		String id = req.getParameter("id");
		return claService.findAll();
	}

html代码

<form action="/work/VueAdd" method="post">
<table  id="app" border="1" width="600px" cellspacing="0" cellpadding="5px" align="center" 
style="transparent;background-color:rgba(199,237,204,0.45)"
>
<tr>
<td>
<!-- 隐藏域，保存id信息 -->
<input type="hidden" id="eid"  name="id" th:value="${id}">
手机号：<input type="text" id="tell" name="tell" v-model="sites.tell"><span id="text"></span><br /><br />
姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" name="name" v-model="sites.name"><br /><br />
性&nbsp;&nbsp;&nbsp;&nbsp;别：
	<input type="radio" name="sex" v-model="gender" value="男" >男
	<input type="radio" name="sex" v-model="gender" value="女">女
<br /><br />

班&nbsp;&nbsp;&nbsp;&nbsp;级：
 <select name="cid" v-model="cids">
	<option v-for="claa in clas" :value="claa.cid">{{claa.cname}}</option>
</select><br /><br /> 
<!--  -->
<input type="submit" value="提交">
<br />
</td>
</tr>
</table>
</form>

js代码

<script type="text/javascript">
var vm = new Vue({
			el:"#app",
			data:{
				sites:[],
				clas:[],
				cids:null,
				gender:"",
				province:"",
				city:"",
				area:"",
			},
			mounted(){
				this.check();
			},
			methods:{
				check:function(){
					var id = $("#eid").val();
					$.post("/work/VueEditData",{id:id},function(data){
							vm.sites=data;
							vm.gender=data.sex;//获取性别数据
							//alert(JSON.stringify(data));
					});
					//获取班级信息
					$.post("/work/VueEditCla",{},function(data){
						vm.cids=vm.sites.cla;
						//alert(vm.cids);
						vm.clas=data;
					})
				},
			}
		});

</script>