Springboot用官方建议访问Html页面并接传值

原文链接： https://blog.csdn.net/weixin_34032779/article/details/86865194

 

特别强调:启动类和所有的controller service mapper等包必须位于同一个主包下(同一个包中),而且启动类在最外面,否则这些层都扫不到,不报错,但是无法实现我们的功能,要非常注意

我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

用templates来存放可供访问的Html资源页面,具体的操作如下.

1.加入所需要的POM依赖

3. org.springframework.boot

4. spring-boot-starter-web

7. org.springframework.boot

8. spring-boot-starter-test

9. test

12. org.springframework.boot

13. spring-boot-starter-thymeleaf

pom的依赖添加完成后会在resources的文件夹下面生成Static和templates的文件夹

2.增加yml文件配置

1. spring

2. thymeleaf:

3. prefix: classpath:/templates/

3.在templates中添加html的页面:

index.html:

8. Hello Spring Boot!!!

4.编写controller层

HelloController:

1. import org.springframework.stereotype.Controller;

2. import org.springframework.ui.Model;

3. import org.springframework.web.bind.annotation.RequestMapping;

4. import java.util.HashMap;

5. @Controller //注意这里必须为Controller

6. public class HelloController {

7. /**

8. * 本地访问内容地址 ：http://localhost:8080/hello

9. * @param map

10. * @return

11. */

12. @RequestMapping("/hello")

13. public String helloHtml(HashMap map, Model model) {

14. model.addAttribute("say","欢迎欢迎,热烈欢迎");

15. map.put("hello", "欢迎进入HTML页面");

16. return "index";

17. }

18. }

5.完成后启动项目,访问http://localhost:8080/hello,能看到如下页面:

image.png

这里static主要存放css js等静态资源文件 不做过多的讲述,主要来讲讲templates中html的Thymeleaf的属性,这里也是困扰我一段时间的地方,当然Springboot用Thymeleaf的原因主要是为了简化代码,用习惯了其实都挺不错的.

static下的静态页面:

static.html:

8. 这是一个静态页面 可以直接访问!

直接访问http://localhost:8080/static.html即可:

image.png

6.动态templates下存放的页面常用的th标签

1. 常用th标签都有那些？

2.  

3. 关键字 　　功能介绍 　　　　案例

4. th:id 　　替换id 　　　　

5. th:text 　文本替换 　　　　

   description

6. th:utext 支持html的文本替换

   conten

7. th:object 替换对象 　　　　

8. th:value 属性赋值 　　　　

9. th:with 变量赋值运算 　　　　

10. th:style 设置样式 　　　　　　　　th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"

11. th:onclick 点击事件 　　　　　　th:οnclick="'getCollect()'"

12. th:each 属性赋值 　　　　　　　　tr th:each="user,userStat:${users}">

13. th:if 判断条件 　　　　　　　　

14. th:unless 和th:if判断相反 　　　　Login

15. th:href 链接地址 　　　　　　　　　　Login />

16. th:switch 多路选择 配合th:case 使用

17. th:case th:switch的一个分支 　　　　

    User is an administrator

18. th:fragment 布局标签，定义一个代码片段，方便其它地方引用

19. th:include 布局标签，替换内容到引入的文件 />

20. th:replace 布局标签，替换整个标签到引入的文件

21. th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"

22. th:src 图片类地址引入 　　　　　　

23. th:inline 定义js脚本可以使用变量