springboot項目創建鏈接 https://blog.csdn.net/q18771811872/article/details/88126835
springboot2.0 跳轉jsp教程 https://blog.csdn.net/q18771811872/article/details/88342298
jsp+html跳轉整合 https://blog.csdn.net/q18771811872/article/details/88343672
springboot 成功創建了后，繼續寫一下跳轉到html頁面的方法, 這里我把 jsp和html 分開兩篇文章。然后再寫一個兩種方式整合的
這篇 是跳轉到html文件的
1創建目錄結果和html文件
2配置return 返回模版
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"; }4.application.yml 文件 配置 thymeleaf 模版參數
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/html5. 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>
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>7. Project Structure里面 這個一般是默認配置好了的，如果沒有就要加上哦
就這樣啟動就行了 效果圖如下
springboot項目創建鏈接 https://blog.csdn.net/q18771811872/article/details/88126835
springboot2.0 跳轉jsp教程 https://blog.csdn.net/q18771811872/article/details/88342298
jsp+html跳轉整合 https://blog.csdn.net/q18771811872/article/details/88343672
原文地址: https://blog.csdn.net/q18771811872/article/details/88312862