1.简介
使用SpringBoot；
1）、创建SpringBoot应用，选中我们需要的模块；
2）、SpringBoot已经默认将这些场景配置好了，只需要在配置文件中指定少量配置就可以运行起来
3）、自己编写业务代码；
2.SpringBoot对静态资源的映射规则
@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)
public class ResourceProperties implements ResourceLoaderAware {
//可以设置和静态资源有关的参数，缓存时间等
WebMvcAuotConfiguration：
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!this.resourceProperties.isAddMappings()) {
logger.debug("Default resource handling disabled");
return;
}
Integer cachePeriod = this.resourceProperties.getCachePeriod();
if (!registry.hasMappingForPattern("/webjars/**")) {
customizeResourceHandlerRegistration(registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META‐INF/resources/webjars/").setCachePeriod(cachePeriod));
}
String staticPathPattern = this.mvcProperties.getStaticPathPattern();
//静态资源文件夹映射
if (!registry.hasMappingForPattern(staticPathPattern)) {
customizeResourceHandlerRegistration(registry.
addResourceHandler(staticPathPattern).addResourceLocations(this.resourceProperties.getStaticLocations()).setCachePeriod(cachePeriod));
}
} /
/配置欢迎页映射
@Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(
ResourceProperties resourceProperties) {
return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),
this.mvcProperties.getStaticPathPattern());
}
//配置喜欢的图标
@Configuration
@ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)
public static class FaviconConfiguration {
private final ResourceProperties resourceProperties;
public FaviconConfiguration(ResourceProperties resourceProperties) {
this.resourceProperties = resourceProperties;
}
@Bean
public SimpleUrlHandlerMapping faviconHandlerMapping() {
SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);
//所有 **/favicon.ico
mapping.setUrlMap(Collections.singletonMap("**/favicon.ico",
faviconRequestHandler());
return mapping;
}
@Bean
public ResourceHttpRequestHandler faviconRequestHandler() {
ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
requestHandler.setLocations(this.resourceProperties.getFaviconLocations());
return requestHandler;
}
}
webjars是前端的js的类库，在之前使用SSM框架的时候，我们是从jquery的官方，下载jquery的类库
1.1所有 /webjars/** ，都去 classpath:/META-INF/resources/webjars/ 找资源；
webjars：以jar包的方式引入静态资源；http://www.webjars.org/
localhost:8080/webjars/jquery/3.3.1/jquery.js
现在只需要引入jar包的方式引入jquery
<!‐‐引入jquery‐webjar‐‐>在访问的时候只需要写webjars下面资源的名称即可
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
1.2"/**" 访问当前项目的任何资源，都去（静态资源的文件夹）找映射
这四个路径都是存放静态资源的
"classpath:/META‐INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"
"/"：当前项目的根路径
通过localhost:8080/abc === 去静态资源文件夹里面找abc
2.模板引擎（视图引擎）
2.1Thymeleaf模板引擎
2.1.1什么是模板引擎？
模板引擎是一个将数据和模板（即网页或文档结构）结合生成最终输出的工具。
2.1.2常用的模板引擎
JSP、Velocity、Freemarker、Thymeleaf、VUE
JSP（常用）：底层是Servlet，支持java代码来生成动态内容
Velocity： JSP 类似，但是 Velocity 更关注模板渲染的简洁和灵活性。
Freemarker：更关注于模板的纯粹性，逻辑控制不依赖于 Java 代码。
Thymeleaf（常用）：前后端不分离SpringBoot使用的模板引擎
VUE（常用）：用于构建用户界面的渐进式JavaScript框架。
2.1.3Thymeleaf的结构
SpringBoot推荐的Thymeleaf；
语法更简单，功能更强大；
2.2引入Thymeleaf
在pom.xml中引入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
引入spring-boot-starter-thymeleaf之后springBoot启动的时候会自动配置，版本号也会自动匹配
ThymeleafAutoConfiguration中ThymeleafProperties中配置了Thymeleaf的规则
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
private boolean cache;
使用html作为模板，而且默认的前缀为"classpath:/templates/“，后缀为”.html"
这些属性可以通过application.properties来修改。
2.2.1使用Thymeleaf的示例
- 在templates下创建一个success.html
- 在html中引入thymeleaf的命名空间
- 创建一个Controller提供一个访问的方法
@RequestMapping("/success")
public String hello(Model model){
model.addAttribute("hello","<h1>zhangsan</h1>");
return "success";
}
- 在thymeleaf模板中取值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Title</title>
</head>
<body>
<div th:text="${hello}"> </div>
</body>
</html>
3.Thymeleaf
3.1标准表达式语法
- 变量表达式
变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示： ${session.user.name}
它们将以HTML标签的一个属性来表示：
<span th:text="${book.author.name}">
- 选择（星号）表达式
选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下： *{customer.name}
被指定的object由th:object属性定义：
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
- 文字国际化表达式
文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选).
#{main.title}
4. *URL表达式*
URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。不需要指定项目名字
@{/order/list}
URL还可以设置参数：
@{/order/details(id=${orderId})}
让我们看这些表达式：
<form th:action="@{/createOrder}">
<a href="main.html" rel="external nofollow" th:href="@{/main}" rel="external n
3.2表达式支持的语法
- 字面（Literals）
- 文本文字（Text literals）: ‘one text’, ‘Another one!’,…
- 数字文本（Number literals）: 0, 34, 3.0, 12.3,…
- 布尔文本（Boolean literals）: true, false
- 空（Null literal）: null
- 文字标记（Literal tokens）: one, sometext, main,…
- 文本操作（Text operations）
- 字符串连接(String concatenation): +
- 文本替换（Literal substitutions）: |The name is ${name}|
- 算术运算（Arithmetic operations）
- 二元运算符（Binary operators）: +, -, *, /, %
- 减号（单目运算符）Minus sign (unary operator): -
- 布尔操作（Boolean operations）
- 二元运算符（Binary operators）:and, or
- 布尔否定（一元运算符）Boolean negation (unary operator):!, not
- 比较和等价(Comparisons and equality)
- 比较（Comparators）: >, <, >=, <= (gt, lt, ge, le)
- 等值运算符（Equality operators）:==, != (eq, ne)
- 条件运算符（Conditional operators）
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
示例代码：
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
3.3常用的thymeleaf标签
| *关键字* | *功能介绍* | *案例* |
|---|---|---|
| th:id | 替换id | |
| th:text | 文本替换 | description |
| th:utext | 支持html的文本替换 | conten |
| th:object | 替换对象 | |
| th:value | 属性赋值 | |
| th:onclick | 点击事件 | th:οnclick=“‘getCollect()’” |
| th:each | 属性赋值 | tr th:each=“user,userStat:${users}”> |
| th:if | 判断条件 | |
| th:unless | 和th:if判断相反 | <a th:href=“@{/login}” rel=“external nofollow” rel=“external nofollow” rel=“external nofollow” th:unless=${session.user != null}>Login |
| th:href | 链接地址 | <a th:href=“@{/login}” rel=“external nofollow” rel=“external nofollow” rel=“external nofollow” th:unless=${session.user != null}>Login /> |
| th:switch | 多路选择 配合th:case 使用 | |
| th:case | th:switch的一个分支 | User is an administrator |
| th:fragment | 布局标签，定义一个代码片段，方便其它地方引用 | |
| th:include | 布局标签，替换内容到引入的文件 | /> |
| th:replace | 布局标签，替换整个标签到引入的文件 | |
| th:selected | selected选择框 选中 | th:selected=“(${xxx.id} == ${configObj.dd})” |
| th:src | 图片类地址引入 | |
| th:action | 表单提交的地址 |
3.4标签测试示例1
success.html
<!DOCTYPE HTML>
<!--命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="${hello}" th:id="${hello.toUpperCase()}">xxxx</div>
<input th:value="${user.getUsername()}">
<hr>
<!-- *{username} 直接访问该对象的 username 属性 -->
<div th:object="${user}">
<!-- 从 user 对象中取出 username 属性的值 -->
<span th:text="*{username}"></span>
</div>
<a th:href="" th:if="${user.getAge()==2}">年龄</a>
<a th:class="${user.getAge()>2}?'class1':'class2' ">年龄</a>
<p th:class="${user.score >= 60 and user.score < 85}">B</p>
<p th:if="${user.score < 60}">C</p>
<p th:if="${user.score > 85}">优秀</p>
<span th:switch="${user.gender}">
<p th:case="1">男</p>
<p th:case="2">女</p>
</span>
<table>
<!-- a代表uList中的每个元素 -->
<!-- aState元数据变量，包含当前循环的状态 -->
<tr th:each="a,aState:${uList}">
<td th:text="${a.username}"></td>
<td th:text="${a.password}"></td>
<td th:text="${aState.index}"></td>
<!-- aState.index索引 -->
</tr>
</table>
</body>
</html>
TestController
@Controller
public class TestController {
@RequestMapping("/success")
public String hello(HttpServletRequest req, HttpSession httpSession, Model model) {
model.addAttribute("hello", "<h1>renliang</h1>");
User user = new User();
user.setPassword("111");
user.setUsername("renliang");
user.setAge(1);
user.setScore(78);
user.setGender(2);
List<User> uList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
User u = new User();
u.setUsername("renliang"+i);
u.setPassword("111"+i);
uList.add(u);
}
model.addAttribute("user",user);
model.addAttribute("uList",uList);
return "success";
}
}
3.5标签测试示例2
test.html
<!DOCTYPE html>
<!--引入thymeleaf命名空间这样才能使用thymeleaf语法 使其HTML成为模板-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:text="${hello}" th:id="${hello}"></span>
<br>
<span th:text="${p.username+''+p.password+''+p.birthday}" th:id="${hello}"></span>
<br>
<span th:text="${p.username.toUpperCase()}" th:id="${hello}"></span>
<br>
<span th:text="${p.birthday.getTime()}" th:id="${hello}"></span>
<br>
<span th:text="${#calendars.format(p.birthday,'yyyy-MM-dd')}" th:id="${hello}"></span>
<br>
<span th:text="${#lists.size(list)}" th:id="${hello}"></span>
<br>
<span th:text="${#strings.toUpperCase(hello)}" th:id="${hello}"></span>
<br>
<a th:href="@{/totest1(usname='tx_java',password='2222')}">点击跳转</a>
<br>
<span th:text="'sssss'" th:id="${hello}"></span>
<br>
<span th:text="123" th:id="${hello}"></span>
<span th:if="${p.gender}==true">男</span>
<br>
<span th:if="${p.gender}==false">女</span>
<br>
<span th:text="${p.gender==true}?'男':'女'"></span>
<br>
<span th:text="${p.gender==true?'男':'女'}"></span>
<hr>
<table>
<tr>
<th>索引号</th>
<th>姓名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
</tr>
<tr th:each="p,interStart:${list}">
<td th:text="${interStart.index}"></td>
<td th:text="${p.username}"></td>
<td th:text="${p.password}"></td>
<td th:text="${p.gender}?'男':'女'"></td>
<td th:text="${interStart.index}"></td>
<!--<td th:text="${#calendars.format(p.birthday,'yyyy-MM-dd')}"></td>-->
<td th:text="${p.birthday}"></td>
</tr>
</table>
</body>
</html>
test1.html
<!DOCTYPE html>
<!--引入thymeleaf命名空间这样才能使用thymeleaf语法 使其HTML成为模板-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>Name:<span th:text="${session.user.username}"></span>.</p>
<p>Surname:<span th:text="${session.user.password}"></span>.</p>
<p>Nationality:<span th:text="${session.user.birthday}"></span>.</p>
</div>
<br><br>
<div th:object="${session.user}">
<p><span th:text="*{username}"></span>.</p>
<p><span th:text="*{password}"></span>.</p>
<p><span th:text="*{#calendars.format(birthday,'yyyy-MM-dd')}"></span>.</p>
</div>
</body>
</html>
TemplatesController
@Controller
public class TemplatesController {
@RequestMapping("/totest")
public String toTest(Model model) {
model.addAttribute("hello", "hello world");
Person p = new Person();
p.setUsername("admin");
p.setPassword("123");
p.setGender(false);
p.setBirthday(new Date());
List<Person> list = new ArrayList<Person>();
for (int i = 0; i < 10; i++) {
Person p1 = new Person();
p1.setUsername("admin");
p1.setPassword("456");
p1.setBirthday(new Date());
list.add(p1);
}
model.addAttribute("p", p);
model.addAttribute("list", list);
return "test";
}
@RequestMapping("/totest1")
public String toTest1(Model model, HttpSession session) {
Person p = new Person();
p.setUsername("admin");
p.setPassword("789");
p.setBirthday(new Date());
model.addAttribute("p",p);
session.setAttribute("user",p);
return "test1";
}
}
dAttribute(“p”, p);
model.addAttribute(“list”, list);
return “test”;
}
@RequestMapping("/totest1")
public String toTest1(Model model, HttpSession session) {
Person p = new Person();
p.setUsername("admin");
p.setPassword("789");
p.setBirthday(new Date());
model.addAttribute("p",p);
session.setAttribute("user",p);
return "test1";
}
}
[外链图片转存中...(img-JIrGwPLm-1735442764893)]
[外链图片转存中...(img-Jn0Xma43-1735442764894)]
扫一扫
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
