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="http://www.w3.org/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 {
    /**
     * 本地访问内容地址 :http://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.完成后启动项目,访问http://localhost:8080/hello,能看到如下页面:

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>

直接访问http://localhost:8080/static.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=${prodStat.count}%2==0"></div>
th:style    设置样式            th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick    点击事件          th:onclick="'getCollect()'"
th:each    属性赋值            tr th:each="user,userStat:${users}">
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="${user.role}">
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)

e.g.(想要输出转义字符效果)

home.welcome=Welcome to our <b>fantastic</b> grocery store!  

执行此模板,默认使用<p th:text="#{home.welcome}"></p>来解析,结果为:

<p>Welcome to our &lt;b&gt;fantastic&lt;/b&gt; 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

jsp 自定义标签解决jsp页面中int时间戳的时间格式化问题

之前在项目中根据需求,需要自定义标签,经过查询w3c文档,自己也踩了一些坑,特此记录自定义标签的步骤,下面就以我之前的一个例子中的定义一个时间转换标签为例:gi...

17310
来自专栏lgp20151222

Tomcat,eclipse热部署的三种方式

热部署是指在你修改项目BUG的时候对JSP或JAVA类进行了修改在不重启WEB服务器前提下能让修改生效。但是对配置文件的修改除外!

34920
来自专栏Spring相关

SpringMVC+Thymeleaf 处理表单提交

thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明:

1.5K40
来自专栏Spring相关

SpringBoot项目中加入jsp页面

根据我们之前搭建好的SpringBoot+SSm的项目的基础上,来增加webapp/WEB-INF的文件,由此来完成jsp页面的跳转.

11020
来自专栏会跳舞的机器人

Nginx+Tomcat实现负载均衡

在103和117上分别部署相同的Tomcat程序,修改index.jsp页面,把内容改为各自的IP地址。

15930
来自专栏Java开发

SpringMVC乱码或前台乱码解决办法

以及 form表单提交方式为必须为post 修改web.xml,增加编码过滤器,如下(注意,需要设置forceEncoding参数值为true)

38440
来自专栏Spring相关

第8章—使用Spring Web Flow—Spring Web Flow的配置

Spring Web Flow 是 Spring 的一个子项目,其最主要的目的是解决跨越多个请求的、用户与服务器之间的、有状态交互问题,比较适合任何比较复杂的、...

14320
来自专栏技术小站

nginx 配置目录转发

server { listen 80; autoindex off; server_name image.imooc.com; ...

51920
来自专栏Spring相关

第6章—渲染web视图—使用Thymeleaf

长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原...

9320

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励