本页面仅有数据回显功能!!!,修改后提交没有写查询页
首页
vue代码
<script>
var vm = new Vue({
el: '#app',
data:{
sites:[]
},
methods:{
edit:function(id,key){
window.location.href="/work/VueEdit?id="+id;
}
}
});
</script>
首页html代码,这里就只给修改按钮的标签了
<td>
<a v-on:click="edit(site.id)">
<input type="button" value="修改">
</a>
</td>
修改页面方案①
修改页面首先是获取信息,在这呢,我的信息分为了两个表,一个是主要的信息表,另一个是班级表。所以获取的时候就要获取两次,当然应该也可以用表连接,获取一次就够了。
html代码
<table border="1" width="600px" cellspacing="0" cellpadding="5px" align="center"
id="app">
<tr>
<td>
<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 />
姓 名:<input type="text" v-model="sites.name"><br /><br />
班 级:
<select name="cid" v-model="cids">
<option v-for="claa in clas" :value="claa.cid">{{claa.cname}}</option>
简 介:<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(){
var id = $("#eid").val();
$.post("/work/VueEditData",{id:id},function(data){
vm.sites=data;
});
$.post("/work/VueEditTell",{id:id},function(data){
vm.cids=vm.sites.cla;
vm.cla=data;
})
},
}
});
</script>
Controller代码
@RequestMapping("VueEdit")
public String VueEdit(HttpServletRequest req,Model model) {
String id = req.getParameter("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代码
@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>
<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 />
姓 名:<input type="text" name="name" v-model="sites.name"><br /><br />
性 别:
<input type="radio" name="sex" v-model="gender" value="男" >男
<input type="radio" name="sex" v-model="gender" value="女">女
<br /><br />
班 级:
<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;
});
$.post("/work/VueEditCla",{},function(data){
vm.cids=vm.sites.cla;
vm.clas=data;
})
},
}
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)