<!DOCTYPE html>
<html lang="en">
<link href="../js/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<div id="div1">
<a href="/edit">添加</a>
<table>
<tr><th>id</th><th>dname</th><th>loc</th></tr>
<tr v-for="d in depts">
<td>{{d.id}}</td>
<td>{{d.dname}}</td>
<td>{{d.loc}}</td>
<td>
<button class="butt" @click="edit1(d.id)">编辑</button>
</td>
<td>
<button class="butt" @click="delDept(d.id)">删除</button>
</td>
</table>
</div>
<div class="modal " id ="div2" aria-hidden="true">
<!--声明此div为一个dialog-->
<div class="modal-dialog" >
<!--此div容器为内容部分-->
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<h4 class="modal-title">用户信息修改</h4>
</div>
<!--躯干-->
<div class="modal-body">
<div class="input-group">
<span>ID:</span>
<input type="text" class="input-sm" v-model="dept.id" readonly name="id"/>
</div>
<br/>
<div class="input-group">
<span>dname:</span>
<input type="text" class="input-sm" v-model="dept.dname" name="dname"/>
</div>
<div class="input-group">
<span>loc:</span>
<input type="text" class="input-sm" v-model="dept.loc" name="loc"/>
</div>
</div>
<!--尾部-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="upDepts">修改</button>
</div>
</div>
</div>
</div>
</head>
<body>
<script>
var vm1 = new Vue({
el:'#div2',
data:{
dept:{}
}
});
var vm =new Vue({
el:"#div1",
data:{
depts:[]
},
methods:{
edit1:function (id) {
for(var i=0 ; i < vm.depts.length; i++){
if(vm.depts[i].id==id){
vm1.dept=vm.depts[i];
}
}
$("#div2").modal("show");
},
delDept:function (id) {
$.ajax({
url:"delet?id="+id,
// dataType:"json",
type:"get",
success:function (data) {
inti();
alert("删除成功");
}
})
}
}
});
$(function () {
inti();
})
function inti() {
$.ajax({
url:"find",
type:"get",
dataType:"json",
success:function (data) {
vm.depts=data
}
})
}
$(function () {
$("#upDepts").click(function () {
// alert(JSON.stringify(vm1.dept));
$.ajax({
url:"update",
data:JSON.stringify(vm1.dept),
contentType:'application/json',
// dataType:'json',
type:"post",
success:function(data) {
alert("修改成功！");
$("#div2").modal("hide");//关闭窗体
window.location.href=("/");
}
});
});
})
</script>
</body>
</html>
package com.qf.mds.controller;
import com.qf.mds.po.Dept;
import com.qf.mds.service.DeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.RequestEntity;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* Created by Administrator on 2020/8/31.
*/
@RestController
public class Deptcontroller {
@Autowired
private DeptService deptService;
//全出
@RequestMapping(value = "/find",method = RequestMethod.GET)
public ResponseEntity<List<Dept>> findall(){
List<Dept> depts = deptService.QfindAll();
if(depts!=null){
return new ResponseEntity<List<Dept>>(depts, HttpStatus.OK);
}else{
return new ResponseEntity<List<Dept>>( HttpStatus.NOT_FOUND);
}
}
//删除
@RequestMapping(value = "/delet",method = RequestMethod.GET)
public ResponseEntity findall( int id){
deptService.QdelDept(id);
return new ResponseEntity(HttpStatus.OK);
}
//添加
@RequestMapping(value = "/add",method = RequestMethod.POST)
public ResponseEntity addDept( Dept dept){
deptService.QaddDept(dept);
return new ResponseEntity(HttpStatus.OK);
}
//修改
@RequestMapping(value = "/update",method = RequestMethod.POST)
public ResponseEntity deptDept(@RequestBody Dept dept){
deptService.Qupdate(dept);
return new ResponseEntity(HttpStatus.OK);
}
}
