Spring Boot整合使用的restful入门详解（RESTFul前置知识+搭建环境+查询+添加）(二)

最新推荐文章于 2022-08-19 17:28:30 发布

煌sir

最新推荐文章于 2022-08-19 17:28:30 发布

阅读量365

点赞数 1

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

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

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.RESTFul入门

1.简述

为了使得请求更加简洁，更有层次，也使得用户更不容易攻陷我们服务器路径地址。

传统项目： /searchUserById?userid=x

/addUser?username=?&password=?

互联网项目：/user/{userid} POST

RESTful是一种软件架构风格、设计风格，而不是标准。

功能点	传统非RESTful风格（GET/POST请求）	RESTFul风格（特定请求方式）
查询	http://localhost/user/findById?id=1	http://localhost/user/{id} --GET
添加	http://localhost/user/add	http://localhost/user/ --POST
修改	http://localhost/user/update	http://localhost/user/ --PUT
删除	http://localhost/user/delete?id=1	http://localhost/user/{id} --DELETE

2.RESTFul请求和响应模型

路径对应控制器的控制器方法---方式：

1、根据请求方式确定访问方法：

GET请求----》查询

POST请求---》添加

PUT请求----》修改

DELETE请求---》删除

2、根据请求方式和控制器方法访问路径来确定

http://localhost/user/aa/ GET

哪些方法请求方式是GET，方法访问路径是aa

请求方式	对应操作
POST	增 @PostMapping 当前方法，是一个增加方法，仅post请求能访问
DELETE	删 @DeleteMapping
PUT	改 @PutMapping
GET	查 @GetMapping

用来替代方法上@RequestMapping

设置路径：@GetMapping(“/方法访问路径”)

返回值：ResponseEntity类

替代了@ResponseBody

封装：JSON数据+状态码

方法	描述
ResponseEntity.ok(数据);	数据+状态码200 通常用来返回正确数据（查询）
new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);	返回状态码500, 服务器端异常
new ResponseEntity<Void>(HttpStatus.NO_CONTENT);	返回状态码204 表示操作成功(删除、修改)
new ResponseEntity<Void>(HttpStatus.CREATED);	返回状态码201 代表新增成功

3.RESTFul案例

环境搭建

1、无骨架创建父工程，删除src目录，引入pom.xml，修改项目名，检查打包方式是否为pom

2、无骨架依次创建子工程：domain、dao、service

3、骨架创建web子工程，创建java和resources目录，删除webapp目录

4、构建依赖，形成聚合关系

5、向web子工程导入SpringBoot启动器和application.properties配置文件，修改application.properties中的配置

6、创建package包和静态资源包（顺序：domain/dao/service/web）

7、依次定义domain、dao、service、web组件

8、向web的static目录导入项目原型

需求1：查询所有

流程+代码实现

/ulist.html

<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        //页面加载完成时，请求所有用户数据
        loadUlist();
    });

    //加载所有用户数据
    function loadUlist() {
        //发送ajax请求，请求所有用户数据
        $.ajax({
            method:"get",
            url:"/user/searchAll"
        });
    }
</script>

UserControlle

/**
 * 查询所有
 * @return
 */
@GetMapping("/searchAll")
public ResponseEntity<List<User>> searchAll(){
    System.out.println("searchAll方法");
    //1、调用service查询所有用户信息
    List<User> ulist = null;
    try {
        ulist = userService.searchAll();
    } catch (Exception e) {
        //出现异常，返回状态码500
        return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
    }
    //2、返回结果（没出异常，成功/ 出了异常，失败）
    //把ulist集合变为json数据，传递状态码200
    return ResponseEntity.ok(ulist);
}

UserServiceImpl

/**
 * 查询所有用户信息
 * @return
 */
@Override
public List<User> searchAll() {
    return userDao.selectAll();
}

/ulist.html

<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        //页面加载完成时，请求所有用户数据
        loadUlist();
    });

    //加载所有用户数据
    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.rid+'</th><th>'
                            +'<a href="">修改</a>|'
                            +'<a href="">删除</a></th></tr>';
                        //3.2、追加到表格末尾
                        ulist.append(tr);
                    });
                },
                500:function () {
                    alert("查询失败");
                }
            }
        });
    }
</script>

<table width="100%" cellspacing="0" border="1px" id="ulist">
    <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>角色</th>
        <th>操作</th>
    </tr>
</table>

代码优化：多表查询

UserServiceImpl

/**
     * 查询所有用户信息
     * @return
     */
    @Override
    public List<User> searchAll() {
//        throw new RuntimeException("xx");
//        return userDao.selectAll();
        return userDao.selectAllWithRole();
    }

UserDao

/**
 * 查询所有用户数据（带角色数据）
 * @return
 */
@Select("select * from t_user")
@Results(id="u1",value={
        @Result(property = "rid",column = "rid"),
        @Result(property = "role",column = "rid",one=@One(select="com.czxy.user.dao.RoleDao.selectByPrimaryKey"))
})
List<User> selectAllWithRole();

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="">删除</a></th></tr>';
                    //3.2、追加到表格末尾
                    ulist.append(tr);
                });
            },
            500:function () {
                alert("查询失败");
            }
        }
    });
}

总结:

1、前端ajax

2、后端控制器

需求2：添加用户

流程+代码实现

/ulist.html

<script src="js/rf.js"></script>
//添加用户信息
function addUser() {
    //发送ajax请求，把表单参数传递给控制器
    $.ajax({
        method:"post",
        url:"/user/addUser",
        data:JSON.stringify($("#formData").serializeJson()),
        contentType:"application/json;charset=utf-8"
    });
}

<form id="formData">
<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="addUser()"/>
        </td>
    </tr>
</table>
</form>

UserController

/**
 * 添加用户
 * @param user
 * @return
 */
@PostMapping("/addUser")
public ResponseEntity<Void> addUser(@RequestBody User user){
    System.out.println(user);
    //1、调用service保存用户
    try {
        userService.addUser(user);
    } catch (Exception e) {
        //出异常，返回500
        return new ResponseEntity<Void>(HttpStatus.INTERNAL_SERVER_ERROR);
    }
    //2、返回结果（保存成功，201）
    return new ResponseEntity<Void>(HttpStatus.CREATED);
}

UserServiceImpl

/**
 * 添加用户
 * @param user
 */
@Override
public void addUser(User user) {
    userDao.insert(user);
}

/ulist.html

//添加用户信息
function addUser() {
    //发送ajax请求，把表单参数传递给控制器
    $.ajax({
        method:"post",
        url:"/user/addUser",
        data:JSON.stringify($("#formData").serializeJson()),
        contentType:"application/json;charset=utf-8",
        dataType:"json",
        statusCode:{
            201:function () {
                alert("添加成功");
                loadUlist();
            },
            500:function () {
                alert("添加失败");
            }
        }
    });
}

小总结

1、前端ajax

2、后端控制器

4.总结

不同的请求方式，不同的功能

功能	请求方式	成功后的状态码
查询	GET	200
添加	POST	201
修改	PUT	204
删除	DELETE	204
出异常		500

控制的返回值类型：ResponseEntity 替代 @ResponseBody

HttpStatus

查询:
$.ajax({
	method:”get”,
	url:”/控制器路径/控制器方法”,
	dataType:”json”,
	statusCode:{
		200:function(data){

},
		500:function(){

}
}
});

添加：
$.ajax({
	method:”post”,
	url:”/控制器路径/控制器方法”,
	data: JSON.stringify($("#formData").serializeJson()),
	contentType:”application/json;charset=utf-8”,
	dataType:”json”,
	statusCode:{
		201:function(){

},
		500:function(){

}
}
});

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

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

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

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

煌sir

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot整合使用的restful入门详解（RESTFul前置知识+搭建环境+查询+添加）(二)

一.RESTFul入门1.简述为了使得请求更加简洁，更有层次，也使得用户更不容易攻陷我们服务器路径地址。传统项目： /searchUserById?userid=x /addUser?username=?&password=?互联网项目：/user/{userid} POSTRESTful是一种软件架构风格、设计风格，而不是标准。功能点传统非RESTful风格（GET/POS...
复制链接

扫一扫