[学习笔记] SpringBoot之Web开发

# 学习 # · 2021-04-20

静态资源导入问题
// WebMvcAuotConfiguration源码视图
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
    } else {
        Duration cachePeriod = this.resourceProperties.getCache().getPeriod();
        CacheControl cacheControl = this.resourceProperties.getCache().getCachecontrol().toHttpCacheControl();
        if (!registry.hasMappingForPattern("/webjars/**")) {
            this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{"/webjars/**"}).addResourceLocations(new String[]{"classpath:/META-INF/resources/webjars/"}).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
        }

        String staticPathPattern = this.mvcProperties.getStaticPathPattern();
        if (!registry.hasMappingForPattern(staticPathPattern)) {
            this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{staticPathPattern}).addResourceLocations(WebMvcAutoConfiguration.getResourceLocations(this.resourceProperties.getStaticLocations())).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
        }

    }
}

1、处理方式一:webjars。

(1)以 jar 包的方式引入静态资源(不推荐)。

<!--引入jquery-webjar-->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>

(2)访问路径:localhost:8080/webjars/jquery.js

2、处理方式二:将静态资源放在resource、static或public文件夹内(优先级从大到小)。


Thymeleaf模板引擎

1、模板引擎:SpringBoot推荐使用Thymeleaf。

Thymeleaf 官网:https://www.thymeleaf.org/

Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf

2、Thymeleaf的使用:

(1)导入相关依赖:

<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

(2)HTML页面放在classpath:/templates/,thymeleaf就能自动渲染。新建index.html文件:

<!DOCTYPE html>
<!--
xmlns:th:导入thymeleaf的名称空间
-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功!</h1>
    <!--th:text:设置div里面文本内容 -->
    <div th:text="${hello}">这是显示欢迎信息</div>
</body>
</html>

(3)编写控制器,实现页面跳转:

/**
 * @Package: com.aduo.springboot.controller
 * @Description: Hello控制器
 * @Author 多仔
 */
@Controller
public class HelloController {

    @GetMapping("/index")
    public String index(Model model) {
        model.addAttribute("hello","hello Thymeleaf");
        return "index";
    }

}

(4)运行测试。

3、th属性:

(1)th:text:设置当前元素的文本内容。

(2)th:utext:同th:text,但th:utext会转义html标签。

<p th:text="${msg}"></p>
<p th:utext="${msgUtext}"></p>

(3)th:value、th:src、th:href:设置当前元素的value值。

姓名:<input type="text" th:value="${name}" />
年龄:<input type="text" th:value="${age}" />

(4)th:each:遍历循环元素,和th:text或th:value一起使用。

<!--
e为循环的每一项,eState是下标属性
eState属性包括:
index:列表状态的序号,从0开始
count:列表状态的序号,从1开始
size:列表状态,列表数据条数
current:列表状态,当前数据对象
even:列表状态,是否为奇数,boolean类型
odd:列表状态,是否为偶数,boolean类型
first:列表状态,是否为第一条,boolean类型
last:列表状态,是否为最后一条,boolean类型
-->
<tr th:each="e,eState:${emps}">
    <td th:text="${eState.index+1}"></td>
    <td th:text="${e.name}"></td>
    <td th:text="${e.age}"></td>
    <td>删除/修改</td>
</tr>

(5)th:if:条件判断,类似的还有th:unless,th:switch,th:case。

<p th:text="${map.Boss.name}" th:if="${map.Boss.age gt 20}"></p>

(6)th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。

(7)th:fragment:定义代码块,方便被th:insert引用。

(8)th:object:声明变量,一般和{}一起配合使用。

4、~{…} 代码块表达式:

<!--
templatename:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html
fragmentname:片段名,Thymeleaf通过th:fragment声明定义代码块,即:th:fragment="fragmentname"
id:HTML的id选择器,使用时要在前面加上#号,不支持class选择器
-->
~{templatename::fragmentname}
~{templatename::#id}

(1)与th:insert的应用:将代码块片段整个插入到使用了th:insert的HTML标签中。

<!-- th:fragment 定义代码块标识-->
<footer th:fragment="foot">
    &copy; 2021 Hello Thymeleaf
</footer>

<div th:insert="footer::copy"></div>

<!--解析结果-->
<!--th:insert是在div中插入代码块,即多了一层div-->
<div>
    <footer>
        &copy; 2021 Hello Thymeleaf
    </footer>
</div>

(2)与th:replace的应用:将代码块片段整个替换使用了th:replace的HTML标签中。

<div th:replace="footer::copy"></div>

<!--解析结果-->
<!--th:replace是将代码块代替当前div,其html结构和之前一致-->
<footer>
    &copy; 2021 Hello Thymeleaf
</footer>

(3)与th:include的应用:将代码块片段包含的内容插入到使用了th:include的HTML标签中。

<div th:include="footer::copy"></div>

<!--解析结果-->
<!--th:include是将代码块footer的内容插入到div中,即少了一层footer-->
<div>
    &copy; 2021 Hello Thymeleaf
</div>

5、#{…} 消息表达式:一般用于国际化的场景。

th:text="#{msg}"

6、@{…} 链接表达式:不管是静态资源的引用,form表单的请求,凡是链接都可以用@{…} 。这样可以动态获取项目路径,即便项目名变了,依然可以正常访问。

<!--引入外部资源-->
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

<!--引入本地资源-->
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet">

<!--表单提交路径-->
<form class="form-login" th:action="@{/user/login}" th:method="post" >

<!--超链接跳转路径附带参数-->
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>

7、${…}变量表达式:

(1)常见内置对象:ctx(上下文对象)、vars(上下文变量)、request、response、session、servletContext等。

<p th:text="${session.username}"></p>

(2)常用内置方法:strings字符串格式化方法、numbers数值格式化方法、arrays数组方法、lists/sets集合方法等。

<p>toUpperCase : <span th:text="${#strings.toUpperCase(str)}"/></p>

SpringMVC的自动配置

1、官方文档:https://docs.spring.io/spring-boot/docs/1.5.10.RELEASE/reference/htmlsingle/#boot-features-developing-web-applications

2、SpringBoot自动配置好了SpringMVC。阅读官方文档,我们可以得知:

The auto-configuration adds the following features on top of Spring’s defaults:

1.Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver beans.
<!--
引入ContentNegotiatingViewResolver和BeanNameViewResolver beans
自动配置了视图解析器(ViewResolver),根据方法的返回值得到视图对象(View),视图对象决定如何渲染
ContentNegotiatingViewResolver:组合所有的视图解析器
-->

2.Support for serving static resources, including support for WebJars(see below).
<!--
对静态资源的支持,包括对WebJars的支持
-->

3.Automatic registration of Converter, GenericConverter, Formatter beans.
<!--
自动注册Converter,GenericConverter,Formatter beans
-->

4.Support for HttpMessageConverters (see below).
<!--
对HttpMessageConverters的支持
-->

5、Automatic registration of MessageCodesResolver (see below).
<!--
自动注册MessageCodeResolver
-->

6.Static index.html support.
<!--
对静态index.html的支持
-->

7.Custom Favicon support (see below).
<!--
对自定义Favicon的支持
-->

8.Automatic use of a ConfigurableWebBindingInitializer bean (see below).
<!--
字段使用ConfigurableWebBindingInitializer bean
-->

3、自定义MVC配置类:实现WebMvcConfigurer接口,重写方法。

/**
 * @Package: com.aduo.springboot.config
 * @Description: MVC配置文件
 * @Author 多仔
 */
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

}

4、WebMvcConfigurer接口中的常用方法:

/* 拦截器配置 */
void addInterceptors(InterceptorRegistry var1);

/* 视图跳转控制器 */
void addViewControllers(ViewControllerRegistry registry);

/* 静态资源处理 */
void addResourceHandlers(ResourceHandlerRegistry registry);

/* 默认静态资源处理器 */
void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer);

/* 这里配置视图解析器 */
void configureViewResolvers(ViewResolverRegistry registry);

/* 配置内容裁决的一些选项 */
void configureContentNegotiation(ContentNegotiationConfigurer configurer);

/* 解决跨域问题 */
public void addCorsMappings(CorsRegistry registry) ;

5、配置自定义视图解析器:

@Bean
public ViewResolver myViewResolver(){
    return new MyViewResolver();
}

// 写一个静态内部类,视图解析器ViewResolver接口
private static class MyViewResolver implements ViewResolver{
    @Override
    public View resolveViewName(String s, Locale locale) throws Exception {
        return null;
    }
}

SpringMVC扩展

1、addViewControllers:页面跳转。

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    // 访问/hello,展示index.html页面
    registry.addViewController("/hello").setViewName("index");
}

2、addInterceptors:拦截器。

// addInterceptor:需要一个实现HandlerInterceptor接口的拦截器实例
// addPathPatterns:用于设置拦截器的过滤路径规则;addPathPatterns("/**")对所有请求都拦截
// excludePathPatterns:用于设置不需要拦截的过滤规则
// 拦截器主要用途:进行用户登录状态的拦截,日志的拦截等
@Override
public void addInterceptors(InterceptorRegistry registry) {
    super.addInterceptors(registry);
    registry.addInterceptor(new TestInterceptor()).addPathPatterns("/**").excludePathPatterns("/login","/static/**");
}

3、configureViewResolvers:视图解析器。

/**
 * 配置请求视图映射
 * @return
 */
@Bean
public InternalResourceViewResolver resourceViewResolver()
{
    InternalResourceViewResolver internalResourceViewResolver = new InternalResourceViewResolver();
    //请求视图文件的前缀地址
    internalResourceViewResolver.setPrefix("/WEB-INF/views/");
    //请求视图文件的后缀
    internalResourceViewResolver.setSuffix(".jsp");
    return internalResourceViewResolver;
}
 
/**
 * 视图配置
 * @param registry
 */
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
    super.configureViewResolvers(registry);
    registry.viewResolver(resourceViewResolver());
}

4、addCorsMappings:跨域。

@Override
public void addCorsMappings(CorsRegistry registry) {
    super.addCorsMappings(registry);
    registry.addMapping("/cors/**").allowedHeaders("*").allowedMethods("POST","GET").allowedOrigins("*");
}
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/291/

评论