springboot+vue增删改查
SpringBoot+Vue的增删改查
首先：创建好springboot项目之后
1.显示
html页面
<tr>
<td align="center">编号</td>
<td align="center">姓名</td>
<td align="center">性别</td>
<td align="center">地址</td>
<td align="center">爱好</td>
<td align="center">班级</td>
<td colspan="1" align="center">操作</td>
</tr>
<!-- 下面的loopStatus是指在网页里面的表可以按顺序排列-->、
<tr v-for="(v,key) in stu">
<td align="center"><input type="checkbox" name="id" id="id"></td>
<td align="center">{{v.name}}</td>
<td align="center">{{v.sex}}</td>
<td align="center">{{v.address}}</td>
<td align="center">{{v.hobbey}}</td>
<td align="center">{{v.cname}}</td>
<td align="center"><a v-on:click="edit(v.uuid)">修改</a>| <a v-on:click="del(v.uuid)">删除</a> </td>
</tr>
vue代码（包含在html文件里面一块写的）
<script>
var vm = new Vue({
el:'#app',
data:{
stu:[],
},
mounted() {
this.check();
this.getClassData();
this.dataListFn(1); //调用分页的方法
},
methods:{
check:function () {
$.post("/stu/indexData",{},function (data) { //显示操作
// alert(JSON.stringify(data))
var len = data.length;
for(var i = 0;i<len;i++){
vm.stu.push(data[i]);
}
})
},
调用的controller方法
dao层运用了表连接（查询班级）
@Query(value = "select * from stu s inner join class c on c.cid = s.scid",nativeQuery = true) //查询所有数据带表连接
List<Map> findAllData();
service层
public List<Map> findAllData(){return stuDao.findAllData();}
controller层
@RequestMapping("/indexData")
@ResponseBody
public List<Map> findAllData(){
return stuService.findAllData();
}
2.添加
<tr>
<td colspan="7" align="center"><a v-on:click="toadd">添加</a></td>
</tr>
Vue代码（写在methods里面）
toadd:function () { //跳转添加
window.location.href="/stu/toaddVue";
},
controller跳转添加代码
@RequestMapping("/toaddVue") //跳转添加
public String toaddVue(Model model) {
List<sclass> list = classService.findAll();
model.addAttribute("sclass",list);
return "addVue";
}
添加模板
<body>
<script>
$(function () {
$("#name").blur(function () {
var name = $("#name").val();//获取id为name的值
$.post("/stu/findByTel_num", {tel_num: name}, function (data) {
if (data) {
$("#err").html("有了");
$("#btn").attr('disabled', true);
} else {
$("#err").html("没有");
$("#btn").attr('disabled', false);
}
});
});
})
</script>
<div id="app">
<form action="/stu/add" method="post">
姓名： <input type="text" name="name"><br>
性别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <br>
地址： <div class="row"><div class="col-md-2"><input type="text" id="txt_city" class="form-control" name="address"/></div></div>
爱好：<input type="checkbox" name="hobbey" value="篮球">篮球<input type="checkbox" name="hobbey" value="足球">足球<input type="checkbox" name="hobbey" value="羽毛球">羽毛球
<br>
班级: <select v-model="cid" name="scid"><!--此处的v-model的值时班级里面的班级的id，-->
<option v-for="cla in sclass" :value="cla.cid">{{cla.cname}}</option>
</select>
<br>
<input type="submit" name="sub" value="提交" id="btn">
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/jquery.city.js"></script>
<script>
$(function () {
$('#txt_city').jcity({
urlOrData: '/js/citydata.json',
animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },
onChoice: function (data) {
console.log(data);
}
});
});
</script>
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
stu:[],
cname:[],
cid:null,
sclass:[]
},
created(){
//如果没有这句代码，select中初始化会是空白，默认选中无法实现
},
mounted(){
this.getClassData();
},
methods: {
getClassData: function () {
$.post("/stu/getClassData", {}, function (cnameData) {
// alert(JSON.stringify(cnameData));
vm.cid = vm.stu.scid;
var len = cnameData.length;
// alert(JSON.stringify(cnameData.length));
for (var i = 0; i < len; i++) {
vm.sclass.push(cnameData[i]);
}
})
},
}
})
</script>
</body>
controller添加代码（此处和修改共用一个，因为作用一样）
@RequestMapping("/updateVue")//修改
public String updateVue(HttpServletRequest request) {
String uuid = request.getParameter("uuid");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String address = request.getParameter("address");
String hobbey = request.getParameter("hobbey");
Integer scid = Integer.parseInt(request.getParameter("scid"));
Stu stu = new Stu();
stu.setUuid(Integer.parseInt(uuid));
stu.setName(name);
stu.setAddress(address);
stu.setSex(sex);
stu.setHobbey(hobbey);
stu.setScid(scid);
stuService.update(stu);
return "redirect:/stu/indexVue";
}
3.删除
Vue代码
del:function (uuid,key) { //删除操作。
$.post("/stu/del1",{uuid,uuid},function (data) {
if (data==1){
vm.stu.splice(key,1);
alert("删除成功");
}
})
},
controller方法代码
@RequestMapping("/del1")
@ResponseBody
public String del1(Stu stu){
stuService.delStu(stu);
return "1";
}
4.修改
vue代码
edit:function (uuid) { //跳转修改
window.location.href="/stu/edit?uuid="+uuid;
},
controller修改跳转
@RequestMapping("/edit") //将uuid映射到修改模板
public String edit(Model model,HttpServletRequest request){
int uuid = Integer.parseInt(request.getParameter("uuid"));
model.addAttribute("uuid",uuid);
return "updateVue";
}
修改模板代码
<div id="app">
<form action="/stu/updateVue" method="post">
<input type="hidden" name="uuid" th:value="${uuid}" id="uuid"><br>
name: <input type="text" name="name" v-model="stu.name"><br>
性别: <input type="radio" name="sex" value="男" v-model="stu.sex" id="boy">男
<input type="radio" name="sex" value="女" v-model="stu.sex" id="girl">女 <br>
地址： <div class="row"><div class="col-md-2"><input type="text" id="txt_city" class="form-control" name="address" v-model="stu.address"/></div></div>
爱好：<input type="checkbox" value="篮球" name="hobbey" v-model="hobbey">篮球
<input type="checkbox" name="hobbey" value="足球" v-model="hobbey">足球
<input type="checkbox" name="hobbey" value="羽毛球" v-model="hobbey">羽毛球
<br>
班级: <select v-model="cid" name="scid"><!--此处的v-model的值时班级里面的班级的id，-->
<option v-for="sclass in cname" :value="sclass.cid">{{sclass.cname}}</option></select><!--下拉框默认选中-->
<br>
<input type="submit" name="sub" value="提交">
<script src="../js/jquery-1.10.2.js"></script><!--从这到55行全部是省市区的插件js代码-->
<script src="../js/bootstrap.js"></script>
<script src="../js/jquery.city.js"></script>
<script>
$(function () {
$('#txt_city').jcity({
urlOrData: '/js/citydata.json',
animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' },
onChoice: function (data) {
console.log(data);
}
});
});
</script>
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
stu:[],
sex:"",
hobbey:[],
cname:[],
cid:null,
},
created(){
//如果没有这句代码，select中初始化会是空白，默认选中无法实现
},
mounted(){
this.toEdit();
this.getClassData();
},
methods: {
toEdit: function () {
var uuid = $('#uuid').val();
$.post("/stu/getEditData", {uuid: uuid}, function (data) {//uuid是为了传 参数 为 uuid uuid 获取 值
// alert(JSON.stringify(data));
vm.stu = data;
vm.hobbey = data.hobbey.split(","); //加上这个复选框才会默认选中
})
},
getClassData: function () {
$.post("/stu/getClassData", {}, function (cnameData) {
// alert(JSON.stringify(cnameData));
vm.cid = vm.stu.scid;
var len = cnameData.length;
// alert(JSON.stringify(cnameData.length));
for (var i = 0; i < len; i++) {
vm.cname.push(cnameData[i]);
}
})
},
}
})
</script>
进入修改模板后vue用到的方法（此处多一个classdata，表查询）
@RequestMapping("/getEditData") //将查询出来的映射到修改模板
@ResponseBody
public Stu toedit(Model model,HttpServletRequest request){
int uuid = Integer.parseInt(request.getParameter("uuid"));
return stuService.findByUuid(uuid);
}
@RequestMapping("/getClassData")
@ResponseBody
public List<sclass> findAllsclassData(Model model){ //获取班级表
return classService.findAll();
}