Springboot⽤官⽅建议访问Html页⾯并接传值
特别强调：启动类和所有的controller service mapper等包必须位于同⼀个主包下(同⼀个包中),⽽且启动类在最外⾯，否则这些层都扫不到，不报错，但是⽆法实现我们的功能，要⾮常注意
我们以前通常习惯⽤webapp来放置jsp页⾯，但是到了Springboot中，官⽅建议⽤Static⽂件夹来存放及静态的资源,
⽤templates来存放可供访问的Html资源页⾯，具体的操作如下.
1.加⼊所需要的POM依赖
<!--添加static和templates的依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
pom的依赖添加完成后会在resources的⽂件夹下⾯⽣成Static和templates的⽂件夹
2.增加yml⽂件配置
spring
thymeleaf:
prefix: classpath:/templates/
3.在templates中添加html的页⾯:
index.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>第⼀个HTML页⾯</title>
</head>
<body>
<h1>Hello Spring Boot</h1>
<p th:text="${hello}"></p>
<div>
<p th:text="${say}"></p>
</div>
</body>
</html>
4.编写controller层
HelloController:
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.HashMap;
@Controller  //注意这⾥必须为Controller
public class HelloController {
/**
* 本地访问内容地址：localhost:8080/hello
* @param map
* @return
*/
@RequestMapping("/hello")
public String helloHtml(HashMap<String, Object> map, Model model) {
model.addAttribute("say","欢迎欢迎，热烈欢迎");
map.put("hello", "欢迎进⼊HTML页⾯");
return "index";
}
}
5.完成后启动项⽬，访问，能看到如下页⾯:
image.png
这⾥static主要存放css js等静态资源⽂件 不做过多的讲述，主要来讲讲templates中html的Thymeleaf的属性，这⾥也是困扰我⼀段时间的地⽅，当然Springboot⽤Thymeleaf的原因主要是为了简化代码,⽤习惯了其实都挺不错的.
static下的静态页⾯:
static.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>这是⼀个静态页⾯可以直接访问!</h2>
</body>
</html>
image.png
6.动态templates下存放的页⾯常⽤的th标签
常⽤th标签都有那些？
关键字  功能介绍    案例
th:id      替换id          <input th:id="'xxx' + ${collect.id}"/>
th:text    　⽂本替换    <p th:text="${collect.description}">description</p>
th:utext    ⽀持html的⽂本替换  <p th:utext="${htmlcontent}">conten</p>
th:object    替换对象    <div th:object="${session.user}">
th:value    属性赋值    <input th:value="${user.name}" />
th:with    变量赋值运算    <div th:with="isEven=${unt}%2==0"></div>
th:style    设置样式        th:
th:onclick    点击事件      th:onclick="'getCollect()'"
th:each    属性赋值        tr th:each="user,userStat:${users}">
html中提交表单用什么属性
th:if    判断条件        <a th:if="${userId == collect.userId}" >
th:unless    和th:if判断相反    <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href    链接地址          <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch    多路选择配合th:case 使⽤    <div th:switch="${le}">
th:case    th:switch的⼀个分⽀    <p th:case="'admin'">User is an administrator</p>
th:fragment    布局标签，定义⼀个代码⽚段，⽅便其它地⽅引⽤    <div th:fragment="alert">
th:include    布局标签，替换内容到引⼊的⽂件    <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace    布局标签，替换整个标签到引⼊的⽂件    <div th:replace="fragments/header :: title"></div>
th:selected    selected选择框选中    th:selected="(${xxx.id} == ${configObj.dd})"
th:src    图⽚类地址引⼊      <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline    定义js脚本可以使⽤变量    <script type="text/javascript" th:inline="javascript">
th:action    表单提交的地址    <form action="subscribe.html" th:action="@{/subscribe}">
th:remove    删除某个属性    <tr th:remove="all">
                    1.all：删除包含标签和所有的孩⼦。
                    2.body：不包含标记删除，但删除其所有的孩⼦。
                    3.tag：包含标记的删除，但不删除它的孩⼦。
                    4.all-but-first：删除所有包含标签的孩⼦，除了第⼀个。
                    5.none：什么也不做。这个值是有⽤的动态评估。
th:attr    设置标签属性，多个属性可以⽤逗号分隔⽐如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，⼀般⽤的⽐较少。
6.1 th:text
可对表达式或变量求值，并将结果显⽰在其被包含的 html 标签体内替换原有html⽂本。
⽂本链接: ⽤ "+" 符号，若是变量表达式也可以⽤“|”符号
eg.
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
equals.(局限：只能在html5中使⽤)
<p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>
The th:text attribute, which evaluates its value expression and sets the result as the body of the host tag, effectively replacing the “Welcome to our grocery store!” text we see in the code.（th：text属性，他声明设置表达式的值，并使表达式返回的值来填充标签内容，替换或设置标签内部的内容，当前例⼦中即替换“欢迎光临本店”这些字。）
The #{home.welcome} expression, specified in the Standard Expression Syntax, instructing that the text to be used by the th:text attribute should be the message with the home.welcome key corresponding to whichever locale we are processing the template with.（#{home.welcome}表达式，⼀个标准的表达式语法，指出在模板中，th:text属性所对应Message的key，即使⽤home.welcome对应的value替换现有内容。）
6.2 th:utext（⾮转义⽂本：unescaped text）
<（想要输出转义字符效果）
home.welcome=Welcome to our <b>fantastic</b> grocery store!
执⾏此模板，默认使⽤<p th:text="#{home.welcome}"></p>来解析，结果为：
<p>Welcome to our <b>fantastic</b> grocery store!</p>
解决⽅案：（This is the default behaviour of the th:text attribute. If we want Thymeleaf to respect our HTML tags and not escape them, we will have to use a different attribute: th:utext (for “unescaped text”):）
使⽤<p th:utext="#{home.welcome}"></p>即可。
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
等效于html：
<p>Welcome to our <b>fantastic</b> grocery store!</p>
6.3 th:href
@{xxx} ：链接url的表达式
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。