• restful请求风格的增删改查-----查询and添加


    一、restful风格的介绍

    restful也称之为REST ( Representational State Transfer ),可以将它理解为一种软件架构风格或设计风格,而不是一个标准。简单来说,restful风格就是把请求参数变成请求路径的一种风格。例如,传统的URL请求格式为:

    http://localhost:8080/chapter14restful/adduser.jsp?id=1

    采用restful请求格式后,变为

    http://localhost:8080/chapter14restful/adduser.jsp/1

    restful风格在HTTP请求中,使用put、delete、 post 和get方式分别对应添加、删除、修改和查询的操作。不过目前国内开发,还是只使用post和get方式来进行增删改查操作。
     

    二、准备工作:

    使用软件:eclipse。

    正确创建实体类,并创建set、get、tostring、有/无参构造方法。

    了解restful风格在HTTP请求中,使用的put,delete,post,get方式对应增删改查。这一点在前后端相连时,很重要。你请求的Ajax方式对应后端@RequestMapping的方式。

    三、查询:

    前端:

    1. <%@ page language="java" contentType="text/html;charset=UTF-8"
    2. pageEncoding="UTF-8"%>
    3. <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    4. "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <title>restful测试</title>
    8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    9. <link rel="stylesheet" href="${pageContext.request.contextPath }/js/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    10. <script src="${pageContext.request.contextPath }/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    11. <script src="${pageContext.request.contextPath }/js/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
    12. <script type="text/javascript">
    13. function search(){
    14. //获取输入的用户名和密码
    15. var id = $("#number").val();
    16. $.ajax({
    17. url:"${pageContext.request.contextPath }/user/"+id,
    18. type:"GET",
    19. //定义相应的数据格式为Json
    20. dataType:"json",
    21. //成功响应结果
    22. success: function(data){
    23. if(data.username!=null){
    24. alert("您查询的用户名为:"+data.username);
    25. }else{
    26. alert("没有找到id为"+id+"的用户")
    27. }
    28. }
    29. });
    30. }
    31. </script>
    32. </head>
    33. <body>
    34. <form >
    35. 编号:<input type="text" name="number" id="number"><br>
    36. <input type="button" value="查询" class="btn btn-success" onclick="search()"><br>
    37. </form>
    38. </body>
    39. </html>

    后端:

    1. /*
    2. *接受Restful风格的请求,其接受方式为get----查询操作
    3. */
    4. @GetMapping(value="/user/{id}")
    5. @ResponseBody
    6. public User selectUser(@PathVariable("id") String id) {
    7. //查看数据接收
    8. System.out.println("您查询到了id="+id);
    9. User user = new User();
    10. //模拟根据id查询到用户对象
    11. if("1234".equals(id)) {
    12. user.setUsername("Tom");
    13. }
    14. return user;
    15. }

    前端结果显示:

    四、添加:

    我的妈,卡了好久,结果超级简单的逻辑,前端获取到的信息我们用一个对象来存,这样我们传给后端时,直接传递这个对象就行,后端接受对象需要用到注解@RequestBody 。

    同时要注意@RequestParam 注解来接收参数。这意味着 'id' 参数应该作为 URL 查询参数发送,而不是请求主体中的 JSON 数据。请确保请求的 URL 中包含了合适的查询参数,例如 http://localhost/user?id=123,其中 '123' 是有效的整数值。我采取的是通过请求主体以 JSON 格式发送参数,那么前端代码和后端代码都需要JSON 格式。

    前端:

    1. <%@ page language="java" contentType="text/html;charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    4.     "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8">
    8. <link rel="stylesheet" href="${pageContext.request.contextPath }/js/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    9. <script src="${pageContext.request.contextPath }/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    10. <script src="${pageContext.request.contextPath }/js/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"></script>
    11. <title>添加用户页面</title>
    12. <style>
    13. .container {
    14.   display: flex;
    15.   justify-content: center;
    16.   align-items: center;
    17.   height: 100vh;
    18. }
    19. </style>
    20. <script type="text/javascript">
    21. function add(){
    22.     //添加对象
    23.     var user = {
    24.             id:parseInt($("#id").val()),
    25.             username:$("#username").val(),
    26.             password:$("#password").val()
    27.     };
    28.     //能正确获取输入框里的元素
    29.     alert("id: " + user.id + ", username: " + user.username + ", password: " + user.password);
    30.     
    31.     $.ajax({
    32.         url:"${pageContext.request.contextPath }/user",
    33.         type:"put",
    34.         //data表示发送的数据,将三个参数绑定到一起
    35.         data:JSON.stringify({ id: user.id, username: user.username, password: user.password }),
    36.         //定义发送请求的数据格式为JSON字符串
    37.         contentType:"application/json;charset=UTF-8",
    38.         //成功响应结果
    39.         success: function(data){
    40.             if(data!=null){
    41.                 alert("您成功添加了编号为"+user.id+"的用户")
    42.             }else{
    43.                 alert("添加出错了")
    44.             }
    45.         }
    46.     });
    47. }
    48. </script>
    49. </head>
    50. <body>
    51.     <div class="container">
    52.       <form class="form">
    53.               编&nbsp;&nbsp;&nbsp; 号:<input type="text" name="id" id="id"><br>
    54.           用户名:<input type="text" name="username" id="username"><br>
    55.           密&nbsp;&nbsp;&nbsp; 码:<input type="password" name="password" id="password"><br>
    56.         <input type="button" value="添加" class="btn btn-primary" onclick="add()"><br>
    57.       </form>
    58.     </div>
    59.    
    60. </body>
    61. </html>

    后端:

    1. /*
    2.     * 接受Restful风格的请求,其接受方式为put----添加操作
    3.     */
    4.     @PutMapping(value="/user")
    5.     @ResponseBody
    6.     public User addUser(@RequestBody User user) 
    7.     {
    8.         Integer id = user.getId();
    9.         String username = user.getUsername();
    10.         String password = user.getPassword();
    11.         //查看数据接收
    12.         System.out.println("成功添加了id="+id+",username="+username+",password"+password+"的用户");
    13.         //创建新用户
    14.         
    15.         return user;        
    16.     }

    前端结果显示:

      控制台信息:

  • 相关阅读:
    sobel边缘检测算法
    解决:Package ‘setuptools‘ requires a different Python: 3.7.16 not in ‘>=3.8‘
    谈国产替代---从新出发
    索尼3D环境感知研究解析,目标是让所有设备“理解世界”
    双列集合的学习
    算法|每日一题|最长平衡子字符串|计数
    静态和默认路由配置-----计算机网络
    循环小数(Repeating Decimals, ACM/ICPC World Finals 1990, UVa202)rust解法
    项目任务发布互助申请系统(Java+Web+MySQL)
    【css | loading】好看的loading特效
  • 原文地址:https://blog.csdn.net/qq_62571013/article/details/138016115