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

最新推荐文章于 2024-05-03 22:54:32 发布

煌sir

最新推荐文章于 2024-05-03 22:54:32 发布

阅读量4.7k

点赞数 4

分类专栏： SpringBoot 文章标签： java ajax restful spring boot spring

本文链接：https://blog.csdn.net/qq_43705131/article/details/107742600

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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、控制器

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

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

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

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

煌sir

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
关于RESTFul的删除和修改操作及总结干货(三)

RESTFul一.需求：删除某个用户信息流程图及代码实现/ulist.html//加载所有用户数据function loadUlist() { //发送ajax请求，请求所有用户数据 $.ajax({ method:"get", url:"/user/searchAll", dataType:"json", statusCode:{ 200:function (d...
复制链接

扫一扫

专栏目录