SpringBoot（2）前端

最新推荐文章于 2024-10-13 12:34:57 发布

pzmyg

最新推荐文章于 2024-10-13 12:34:57 发布

阅读量3.3k

点赞数

分类专栏： Web 后端

本文链接：https://blog.csdn.net/pzmyg/article/details/82154304

版权

后端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Web

8 篇文章 0 订阅

订阅专栏

本文介绍了在SpringBoot项目中使用Thymeleaf作为前端模板，并通过Ajax进行前端请求的实践过程。首先讲述了如何配置Thymeleaf使得静态资源能够正确访问，然后详细描述了在使用Ajax发送请求时遇到的问题及解决方案，包括请求方式、参数接收和返回结果的处理。最后提到了前端传多个元素的json请求和后端返回用户列表及数量统计信息的情况。

摘要由CSDN通过智能技术生成

前一篇SpringBoot初步主要涉及后端代码，这一篇主要是记录一下springBoot中的前端知识。
1、thymeleaf
看网上好多使用thymeleaf模板构建springBoot前端，索性也尝试了一下。
先在static目录下放了张图片，浏览器中可以访问。
然后再templates目录下创建了个hello.html静态资源文件

application.properties中增加配置

#thymeleaf模板配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=utf-8
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

此时浏览器中访问不到，经查找原因，在配置文件中又新增一下配置

#dev tools
spring.devtools.livereload.enabled=true
# 静态文件请求匹配方式
spring.mvc.static-path-pattern=/**
# 修改默认的静态寻址资源目录
spring.resources.static-locations = classpath:/templates/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

再次访问成功。此时理解为：网上直接增加thymeleaf配置就可以的例子，是动态资源，我加的是静态资源，所以访问时报404的错。后来增加的是静态资源配置。（待更新）

2、ajax前端请求
实现功能：增加页面，使用jquery.ajax（）向后端传递请求，并将后台获取的数据渲染至页面列表（调用users用户列表接口）。

过程中主要问题为jquery.ajax（）方法以及后台对于入参和出参处理。

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Springboot + Jsp</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script>
        function sendAjax() {
            var cityname = $("#cityName").val();
            var json_data={
                "cityName":cityname
            };
            $.ajax(
                {
                    url: "users",
                    data:{"cityName":cityname},
                    type: "get",
                    dataType: "json",
                    contentType : "application/json;charset=utf-8",
                    async:false,
                    success: function (data) {
                        debugger
                        var item;
                        $.each(data,function(i,result){
                            debugger
                            item=
                                "<tr><td>"+result['id']+"</td><td>"+result['username']+"</td><td>"+result['age']+"</td></tr>";
                            $('#userList').append(item);
                        });


                    },
                    error: function () {
                        alert("error");
                    }
                });
        }
    </script>

</head>
<body>

${hello}

<input name="cityName" id="cityName" type="text"/>
<button onclick="sendAjax()">提交</button>

<table id="userList">
    <tr><th width="5">id</th><th width="20">name</th><th width="10">age</th></tr>
</table>

</body>
</html>

按钮点击事件中，将文本框内容组装成json格式数据，调用ajax（），调用成功则遍历获取的json结果，渲染至页面的table元素中

后端

@RequestMapping(value = "users", method = RequestMethod.GET)
    public @ResponseBody List<User> getUserList (@RequestParam Map<String,Object> request)
    {
        String cityName =(String)request.get("cityName");
        System.out.println("cityName:"+cityName);
        try {
            List<User> users = userService.getUserList();
            for (User user:users) {
                System.out.println("user:"+user.getUsername());
            }
            return users;
        } catch (Exception e) {
            e.printStackTrace();
        }
       return null;
    }

贴出来的是最终的代码段。
**最开始是在先前restful接口的基础上修改的，使用requestBody，但是前端的请求到达不了后端，最终的user列表也始终无法返回前端。原因总结为，requestBody没有正确的接收对象。
**后将参数接收对象修改为Object，找来Object转化为Json数据的函数，果断还是不行。
**查了一下，还可以将前端的请求使用requestParam格式，直接以String类型接收下来，可是那样子始终传不过来。
**最终改成上面的这种方式，使用requestParam，用Map接收，请求接收到了。
**对于返回结果，原本restful接口中是一个对象，按自己的理解也应该能成功返回，可是就是失败了。好吧，还是用最简单的方式，直接将从库中读取的用户列表List返回。
**结果终于返回前端，找了一下遍历，于是成功渲染至列表。

再次尝试
以上是第一个ajax传参的例子，下面对上述的几个失败的例子再重试一次。争取对入参和出参做通用处理。
前端：【传多个元素的json请求】
后端：【除了用户列表，还希望能直接显示出记录数】
前端
最开始使用get方法传参，报错

o.apache.coyote.http11.Http11Processor   : Error parsing HTTP request header
 Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.
java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

原来是传入的参数太多，导致参数解析不了。修改为post方法后，可以调起后台对应接口了。

$.ajax(
            {
                url: "getUserList",
                data:JSON.stringify(json_data),
                type: "post",
                dataType: "json",
                contentType : "application/json;charset=utf-8",
                async:false,
                success: function (data) {
                    ...
                }
                error: function () {
                    alert("error");
                }
                });

后端

@RequestMapping(value = "getUserList" ,method = RequestMethod.POST)
    public @ResponseBody  JSONObject getUserListFunc(@RequestBody String request){
        JSONObject json = JSONObject.fromObject(request);
        Iterator<String> iterator = json.keys();
        while(iterator.hasNext()){
            String key = iterator.next();
            System.out.println(key + ":" + json.get(key));
        }

        JSONObject jsonResp = new JSONObject();
        List<User> user  = userService.getUserList();
        Map<String,Object>  map= new HashMap<String,Object>();
        map.put("users",user);

        if(!user.isEmpty()){
            jsonResp.putAll(map);
            jsonResp.put("number",user.size());
        }else{
            jsonResp.put("number","0");
        }

        return jsonResp;
    }

可以成功接收前端post传送的json请求，并成功返回用户列表及数量统计信息。

但是此时后端返回的结果又解析失败了。按照网上例子，解析成功。

success: function (data) {
      var number = data.number
      var userList = data.userList
      debugger
      if(number > 0) {
          var item;
          $.each(userList, function (loc, result) {
              item = "<tr><td width='5px' align='center'>" + result['id'] + "</td><td width='20px'>" + result['username'] + "</td><td width='20px'>" + result['age'] + "</td></tr>";
              $('#userList').append(item);
          });
          var item = "共" +number +"条用户信息"
          $('#userListCnt').html(item)
      }else{
          $('#userCntText').html('0')
      }
  },
  error: function () {
      alert("error");
  }