关于RESTFul的删除和修改操作及总结干货(三)

广告位

  RESTFul 一.需求:删除某个用户信息 流程图及代码实现 /ulist.html //加载所…

 

RESTFul

一.需求:删除某个用户信息

流程图及代码实现

关于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

关于RESTFul的删除和修改操作及总结干货(三)

2、后端控制器

  • RESTFul除了json传递参数,可以单独在地址栏以非json传递多个参数。
  • 后台用{}声明,
  • 用@PathVariable对应接收 或 用pojo整体接收

关于RESTFul的删除和修改操作及总结干货(三)

替代传统项目中的@RequestParam

3、单双引号需要嵌套使用。多级嵌套,可以使用进行转义

注意:字符串必须用引号包裹参数,基本数据类型可以选择不用

关于RESTFul的删除和修改操作及总结干货(三)

关于RESTFul的删除和修改操作及总结干货(三)

二.需求:修改某个用户信息

流程1及代码实现

关于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="/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及代码实现

关于RESTFul的删除和修改操作及总结干货(三)

/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

关于RESTFul的删除和修改操作及总结干货(三)

2、后端控制器

关于RESTFul的删除和修改操作及总结干货(三)

添加和修改

1、ajax

关于RESTFul的删除和修改操作及总结干货(三)

2、控制器

关于RESTFul的删除和修改操作及总结干货(三)

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多! 

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~

月明星稀

关于作者: 月明星稀

为您推荐