spring boot 跳转网页 springboot跳转到html页面

转载

烟雨江南的秋 2023-05-26 06:43:12

文章标签 springboot java spring mybatis html 文章分类 spring boot 后端开发

springboot 成功创建了后，继续写一下跳转到html页面的方法, 这里我把 jsp和html 分开两篇文章。然后再写一个两种方式整合的

这篇是跳转到html文件的

1创建目录结果和html文件

spring boot 跳转网页 springboot跳转到html页面_springboot

spring boot 跳转网页 springboot跳转到html页面_mybatis_02

2配置return 返回模版

spring boot 跳转网页 springboot跳转到html页面_spring_03

spring boot 跳转网页 springboot跳转到html页面_spring_04

3.UserController.java代码如下，这里就直接使用上次创建的查询方法

@RequestMapping(value = "/testHtml", produces = "application/json;charset=UTF-8", method = {RequestMethod.POST, RequestMethod.GET})
    public String testHtml(Model m, HttpServletRequest request, HttpServletResponse response){
        List<Map<String,Object>> list=userService.userQueryAll();
        request.setAttribute("list",list);
        log.info("进入了testHtml方法！");
        return "views/testHtml";
    }

spring boot 跳转网页 springboot跳转到html页面_spring_05

4.application.yml 文件配置 thymeleaf 模版参数

spring boot 跳转网页 springboot跳转到html页面_mybatis_06

spring boot 跳转网页 springboot跳转到html页面_spring_07

spring:
  dataSource:
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/db-test?useUnicode=true&characterEncoding=utf8&tinyInt1isBit=false&usessl=false
    username: root
    password: 123456
    driverClassName: com.mysql.jdbc.Driver
  thymeleaf:
    #清除缓存
    cache: false
    mode: LEGACYHTML5 #非严格模式
    prefix: /WEB-INF/ #默认 classpath:/templates/
    suffix: .html
    servlet:
      content-type: text/html

spring boot 跳转网页 springboot跳转到html页面_html_08

5. pom.xml 文件加入thymeleaf 架包

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--非严格模式下 规避一些html编译错误 -->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>

spring boot 跳转网页 springboot跳转到html页面_spring_09

6. html页面这里我为了方便事先引入了jQuery ，并且直接使用了thymeleaf 模版来接收数据，也是第一次用。

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.springframework.org/schema/mvc">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input th:value="${list[0][create_time]}">
<table border="1">

</table>
</body>
<script src="/static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script th:inline="javascript" type="text/javascript" charset="utf-8">
    /**
     *
     * 在html标签中 使用  th:value、th:text 来获取数据
     *  例
     *  <input th:value="${list2[0][create_time]}">
     * @type {Array[]}
     */
    console.log(JSON.stringify([[${list}]]));
    var list = ([[${list}]]);
    tableAppend(list)
    function tableAppend() {
        var table_html=`
        <tr>
        <th>序号</th>
        <th>名字</th>
        <th>号码</th>
        <th>创建时间</th>
        </tr>`;
        for(var i=0;list.length>i;i++){
            table_html += `
        <tr>
            <td>${list[i]['id']}</td>
            <td>${list[i]['name']}</td>
            <td>${list[i]['phone']}</td>
            <td>${list[i]['create_time']}</td>
        </tr>`;

        }
        $("table").append(table_html);
    }
</script>
</html>

spring boot 跳转网页 springboot跳转到html页面_springboot_10