the shy(thy)
丹麦第一个国家公园：THY（曲）
曲国家公园（Thy National Park ）是丹麦的第一个国家公园，成立于 2007 年，于 2008 年 8 月 22 日正式落成。该地区占地 24,370 公顷，从南部的 Agger Tange 到北部的 Hanstholm 绵延 12 公里。
曲的西部由几个世纪的流沙形成，今天则以海岸、沙丘、沙丘灌木丛、石灰岩悬崖、盐沼、湖泊和沙丘种植园的形式形成了巨大的自然景。
该地区的特点是规模大、原始和自然。此外，文化历史与自然之间有令人兴奋且有价值的相互作用，这是在曲建立国家公园的关键理念！
国家公园内设有非常大的野生动物自然保护区，大量的鸦科动物以及鹤、绒鸭和燕鸥在这里繁殖。
曲国家公园与南部的瓦登海国家公园（今后会有专题介绍）一南一北遥相呼应，形成了是非常典型的丹麦海岸风景！
Danmark’s first national park: Thy
丹麦第一个国家公园：曲
北欧余博之丹麦国家公园
2022.10.03
丹麦
小学英语一年级下册第3单元（译林出版社）Unit 3
Unit 3 I like carrots
第3单元我喜欢胡萝卜
跟读视频
Story time
New words
Song time
Unit 3 I like carrots
第3单元我喜欢胡萝卜
Pages 14-15 Story time
14-15页故事时间
I like carrots.
我喜欢胡萝卜。
Me too.
我也是。
Onions?
洋葱呢？
No, thanks.
不，谢谢。
I like onions.
我喜欢洋葱。
Peas?
豌豆？
Yes, please.
好的。
We all like peas.
我们都喜欢豌豆。
单词
carrots 胡萝卜
onions 洋葱
peas 豌豆
peppers 灯笼椒
Pages 17 Song time
17页故事时间
They’re so yummy!
它们是如此的美味。
I like peas. You like peas.
我喜欢豌豆。你喜欢豌豆。
Peas are sweet and peas are green.
豌豆是甜的，豌豆是绿的。
We all like to eat lots of peas.
我们都喜欢吃很多豌豆。
Sweet and green, they’re so yummy!
甜甜的，绿绿的，他们是如此的美味！
Page 44 Word lists Unit 3
44页单词列表单元3
like 喜欢
carrot 胡萝卜
Me too. 我也是。
onion 洋葱
No，thanks. 不要了，谢谢。
pea 豌豆，豌豆粒
Yes，please. 好的，谢谢。
we 我们
all 全部，全体
pepper 甜椒，灯笼椒
别再写jsp了，Thymeleaf它不香吗？
1. 啥是 Thymeleaf在学 Thymeleaf 之前我们先看一下使用 jsp 开发遇到的主要问题：
jsp 的痛点
1.页面包含大量 java 代码，代码太混乱
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>jsp</title> </head> <body> <% String name = (String)request.getAttribute("name"); int age = (int)request.getAttribute("age"); %> <p>姓名： <%=name%></p> <p>年龄： <%=age%></p> </body></html>复制代码
2.jsp 技术已经是很多年前的老技术了，现在的主流框架都不推荐使用，基本被淘汰了。
模板引擎技术
虽然 jsp 基本被淘汰了，但是它的技术替代品如雨后春笋，层不出穷。
模板引擎技术就是其中的代表。
我们都知道传统的页⾯开发通常采⽤ HTML+ JS 技术，⽽现在⼤部分⽹站都采⽤标签化 + 模块化的设计。
模板引擎技术就是根据这种⽅式，使⽤户界⾯与业务数据分离⽽产⽣的。
它可以⽣成特定格式的⽂档，⽤于⽹站的模板引擎就会⽣成⼀个标准的 HTML ⽂档在原有的 HTML 页⾯中来填充数据，最终达到渲染页⾯的⽬的。
模板引擎技术说白了就是把数据和页⾯整合在⼀起的技术。
Thymeleaf 简介
Thymeleaf 是一种可以替代 jsp 的模板引擎技术。它有如下优点：
1.与 SpringBoot 完美整合：SpringBoot 提供了 Thymeleaf 的默认配置，我们可以像以前操作 jsp 一样来操作 Thymeleaf。
2.开箱即用：支持 JSTL 格式语法。
3.多方言支持：Thymeleaf 提供 spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、国际化等功能。
2. 环境搭建这里我们创建 springboot 项目。
1.引入依赖
<dependencies><!-- thymeleaf --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- lombok --><dependency><groupId>orgjectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!-- test --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>复制代码
2.Thymeleaf 配置
application.yml
server: port: 8081 servlet: context-path: /thymeleaf-demospring: thymeleaf: # thymeleaf 配置 cache: false # 禁用缓存，修改完实时展示数据 prefix: classpath:/templates/ # 文件所在位置 suffix: .html # 后缀 web: resources: static-locations: classpath:/static/ # 静态资源复制代码
在 springboot 的配置文件中，我们配置了 thymeleaf 的默认前缀和后缀。
还配置了静态资源的访问路径。
3.html 文件引入 Thymeleaf 的命名空间
xmlns:th="http://www.thymeleaf"复制代码
html 文件必须引入 thymeleaf 的命名空间才能使用相关语法。
3. 常用语法1.th:text
作用：如果变量有值，则替换标签里面的默认值，否则展示标签的默认值。
例如：
@GetMapping("hello")public String hello(Model model) { model.addAttribute("msg", "黄沙百战穿金甲，不破楼兰终不还！"); return "hello";}复制代码
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf"><head> <meta charset="UTF-8"> <title>msg</title></head><body><p>-------------诗句赏析-------------</p><p th:text="${msg}">人生得意须尽欢，莫使金樽空对月。</p></body></html>复制代码
测试：
2.th:href
作用：用来指向文件的 url。
例如：
<link rel="stylesheet" type="text/css" th:href="@{css/login.css}"/>复制代码
3.th:action
作用：用来配置 form 表单的请求路径
th:action="@{/login}"复制代码
例如：
<form th:action="@{/login}" method="post"> 姓名： <input type="text" name="username"/> 密码： <input type="password" name="password"/> <input type="submit" class="button" value="登录"/></form>复制代码
4.th:if
作用：条件判断，如果判断为真就显示数据或者执行相关操作。
例如：
<p th:if="${username!=null && username!=''}"> 欢迎你： <span th:text="${username}"></span></p>复制代码
5.th:src
作用：用来指向文件的 url。
例如：
<img th:src="@{images/title.jpg}" >复制代码
6.th:onclick
作用：绑定事件。
例如：
<a href="javascript:;" th:onclick="'deleteUser('+${user.id}+')'">删除</a>复制代码4. 小案例
场景：用户登录成功之后，展示用户信息和用户列表。
controller
/* 进入登录界面 */@GetMapping("/toLogin")public String toLogin() { return "login";}@PostMapping("/login")public String login(Model model, String username, String password) { // 用户名 model.addAttribute("username", username); // 用户列表信息 List<User> userList = Stream.of(new User(1, "张三", 18), new User(2, "李四", 19) , new User(3, "王五", 20))llect(Collectors.toList()); model.addAttribute("userList", userList); return "index";}复制代码
login.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf"><head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" th:href="@{css/login.css}"/> <title>登录界面</title></head><body><p class="login_title">登录页面</p><form th:action="@{/login}" method="post"> 姓名： <input type="text" name="username"/> 密码： <input type="password" name="password"/> <input type="submit" class="button" value="登录"/></form></body></html>复制代码
index.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf"><head> <meta charset="UTF-8"> <title>用户列表</title></head><body><p th:if="${username!=null && username!=''}"> 欢迎你： <span th:text="${username}"></span></p><img th:src="@{images/title.jpg}"><p>-------------用户列表-------------</p><table class="table" border> <tr> <td> ID </td> <td> 姓名 </td> <td> 年龄 </td> <td> 操作 </td> </tr> <tr th:each="user:${userList}"> <td><span th:text="${user.id}"></span></td> <td><span th:text="${user}"></span></td> <td><span th:text="${user.age}"></span></td> <td><a href="javascript:;" th:onclick="'deleteUser('+${user.id}+')'">删除</a></td> </tr></table><script> function deleteUser(id) { console.log("id: " + id); }</script></body></html>复制代码
如果本文对你有帮助，别忘记给我个3连 ，点赞，转发，评论，，咱们下期见。
收藏 等于白嫖，点赞才是真情。
原文作者：知否技术原文链接：https://juejin/post/7098488222312824868
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送至邮件举报，一经查实，本站将立刻删除。转载务必注明出处：http://www.hixs.net/article/20240202/169624993960105.html
