RESTFul
一.需求:删除某个用户信息
流程图及代码实现
/ulist.html
//加载所有用户数据
function loadUlist() {
//发送ajax请求,请求所有用户数据
$.ajax({
method:"get",
url:"/user/searchAll",
dataType:"json",
statusCode:{
200:function (data) {
//1、获取表格元素对象
var ulist = $("#ulist");
//2、初始化表格数据
ulist.html('<tr><th>序号</th><th>用户名</th><th>密码</th><th>角色</th><th>操作</th></tr>');
//3、遍历JSON数据,拼接表格行
$(data).each(function (index) {
//3.1、拼接表格的tr
var tr = '<tr align="center"><th>'+(index+1)+'</th><th>'+this.username+'</th><th>'+this.password+'</th><th>'+this.role.rname+'</th><th>'
+'<a href="">修改</a>|'
+'<a href="javascript:deleteUserByUid(\''+this.uid+'\')">删除</a></th></tr>';
//3.2、追加到表格末尾
ulist.append(tr);
});
},
500:function () {
alert("查询失败");
}
}
});
}
//根据UID删除用户
function deleteUserByUid(uid) {
//判断:是否需要删除
if(confirm("是否删除该用户?")){
//若需要删除,调用ajax,发送请求给控制器
$.ajax({
method:"delete",
url:"/user/deleteUserByUid/"+uid
});
}
}
UserController
/**
* 根据ID删除用户
* @return
*/
@DeleteMapping("/deleteUserByUid/{uid}")
public ResponseEntity<Void> deleteUserByUid(@PathVariable(name="uid") Integer uid){
System.out.println(uid);
//1、调用service根据ID删除用户
try {
userService.deleteUserByUid(uid);
} catch (Exception e) {
//出异常
return new ResponseEntity<Void>(HttpStatus.INTERNAL_SERVER_ERROR);
}
//2、返回结果(成功:204,失败:500)
return new ResponseEntity<Void>(HttpStatus.NO_CONTENT);
}
UserServiceImpl
/**
* 根据ID删除用户信息
* @param uid
*/
@Override
public void deleteUserByUid(Integer uid) {
userDao.deleteByPrimaryKey(uid);
}
/ulist.html
//根据UID删除用户
function deleteUserByUid(uid) {
//判断:是否需要删除
if(confirm("是否删除该用户?")){
//若需要删除,调用ajax,发送请求给控制器
$.ajax({
method:"delete",
url:"/user/deleteUserByUid/"+uid,
dataType:"json",
statusCode:{
204:function () {
alert("删除成功");
loadUlist();
},
500:function () {
alert("删除失败");
}
}
});
}
}
代码总结
1、前端ajax
2、后端控制器
- RESTFul除了json传递参数,可以单独在地址栏以非json传递多个参数。
- 后台用{}声明,
- 用@PathVariable对应接收 或 用pojo整体接收
替代传统项目中的@RequestParam
3、单双引号需要嵌套使用。多级嵌套,可以使用\”或\’进行转义
注意:字符串必须用引号包裹参数,基本数据类型可以选择不用。
二.需求:修改某个用户信息
流程1及代码实现
/ulist.html
//加载所有用户数据
function loadUlist() {
//发送ajax请求,请求所有用户数据
$.ajax({
method:"get",
url:"/user/searchAll",
dataType:"json",
statusCode:{
200:function (data) {
//1、获取表格元素对象
var ulist = $("#ulist");
//2、初始化表格数据
ulist.html('<tr><th>序号</th><th>用户名</th><th>密码</th><th>角色</th><th>操作</th></tr>');
//3、遍历JSON数据,拼接表格行
$(data).each(function (index) {
//3.1、拼接表格的tr
var tr = '<tr align="center"><th>'+(index+1)+'</th><th>'+this.username+'</th><th>'+this.password+'</th><th>'+this.role.rname+'</th><th>'
+'<a href="/updateUser.html?uid='+this.uid+'">修改</a>|'
+'<a href="javascript:deleteUserByUid(\''+this.uid+'\')">删除</a></th></tr>';
//3.2、追加到表格末尾
ulist.append(tr);
});
},
500:function () {
alert("查询失败");
}
}
});
}
/updateUser.html
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/rf.js"></script>
<script>
//用来获取地址栏传递过来的UID
var uid = location.search.split("=")[1];
$(function () {
//页面加载完成时,通过ajax请求,根据UID查询用户信息,回显表单
$.ajax({
method:"get",
url:"/user/searchUserByUid/"+uid
});
});
</script>
UserController
/**
* 根据UID查询用户信息
* @param uid
* @return
*/
@GetMapping("/searchUserByUid/{uid}")
public ResponseEntity<User> searchUserByUid(@PathVariable(name="uid")Integer uid){
//1、调用service查询
User user = null;
try {
user = userService.searchUserByUid(uid);
} catch (Exception e) {
//出异常,500
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
//2、返回查询结果(成功:200,失败:500)
return ResponseEntity.ok(user);
}
UserServiceImpl
/**
* 根据UID查询用户信息
* @param uid
* @return
*/
@Override
public User searchUserByUid(Integer uid) {
return userDao.selectByPrimaryKey(uid);
}
/updateUser.html
//用来获取地址栏传递过来的UID
var uid = location.search.split("=")[1];
$(function () {
//页面加载完成时,通过ajax请求,根据UID查询用户信息,回显表单
$.ajax({
method:"get",
url:"/user/searchUserByUid/"+uid,
dataType:"json",
statusCode:{
200:function (data) {
//1、回显表单输入项
$("#uid").val(data.uid);
$("#username").val(data.username);
$("#password").val(data.password);
//2、回显选择框
//2.1、获取所有的option
var arr = $("#rid>option:gt(0)");
//2.2、遍历option,选中符合要求的option
arr.each(function (index) {
//option的value值和 当前用户的rid相等的
if(this.value==data.rid){
this.selected=true;
}
});
},
500:function () {
alert("查询失败");
}
}
});
});
流程2及代码实现
/updateUser.html
//修改用户
function updateUser() {
//ajax请求,把整个表单参数发给控制器
$.ajax({
method:"put",
url:"/user/updateUser",
data:JSON.stringify($("#f1").serializeJson()),
contentType:"application/json;charset=utf-8"
});
}
<form id="f1">
<input type="hidden" name="uid" id="uid"/>
<table width="30%">
<tr>
<td>
用户名:<input type="text" id="username" name="username" placeholder="请填姓名" size="15"/>
</td>
<td>
密码:<input type="password" id="password" name="password" placeholder="请填密码" size="15"/>
</td>
</tr>
<tr>
<td colspan="3">
角色:<select id="rid" name="rid">
<option value="">--请选择角色--</option>
<option value="2">VIP用户</option>
<option value="3">普通用户</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="right">
<input type="button" value="修改用户" onclick="updateUser()"/>
</td>
</tr>
</table>
</form>
UserController
/**
* 修改用户
* @param user
* @return
*/
@PutMapping("/updateUser")
public ResponseEntity<Void> updateUser(@RequestBody User user){
System.out.println(user);
//1、调用service修改用户
try {
userService.updateUser(user);
} catch (Exception e) {
//出异常,500
return new ResponseEntity<Void>(HttpStatus.INTERNAL_SERVER_ERROR);
}
//2、返回结果(成功:204,失败:500)
return new ResponseEntity<Void>(HttpStatus.NO_CONTENT);
}
UserServiceImpl
/**
* 修改用户
* @param user
*/
@Override
public void updateUser(User user) {
userDao.updateByPrimaryKeySelective(user);
}
/updateUser.html
//修改用户
function updateUser() {
//ajax请求,把整个表单参数发给控制器
$.ajax({
method:"put",
url:"/user/updateUser",
data:JSON.stringify($("#f1").serializeJson()),
contentType:"application/json;charset=utf-8",
dataType:"json",
statusCode:{
204:function () {
alert("修改成功");
//跳转到列表页面
location.href="/ulist.html";
},
500:function () {
alert("修改失败");
}
}
});
}
三.总结
查询和删除
1、ajax
2、后端控制器
添加和修改
1、ajax
2、控制器
看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!
注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~