Springboot 系列(五)web 开发之静态资源和模版引擎

文章已经收录在 Github.com/niumoo/JavaNotes ,更有 Java 程序员所需要掌握的核心知识,欢迎Star和指教。
欢迎关注我的 公众号,文章每周更新。

前言

Spring Boot 天生的适合 web 应用开发,它可以快速的嵌入 Tomcat, Jetty 或 Netty 用于包含一个 HTTP 服务器。且开发十分简单,只需要引入 web 开发所需的包,然后编写业务代码即可。

自动配置原理?

在进行 web 开发之前让我再来回顾一下自动配置,可以参考系列文章第三篇。Spring Boot 为 Spring MVC 提供了自动配置,添加了如下的功能:

  • 视图解析的支持。
  • 静态资源映射,WebJars 的支持。
  • 转换器 Converter 的支持。
  • 自定义 Favicon 的支持。
  • 等等


在引入每个包时候我们需要思考是如何实现自动配置的,以及我们能自己来配置哪些东西,这样开发起来才会得心应手。

关于 Spring Boot Web 开发的更详细介绍可以参考官方文档。

1. JSON 格式转换

Spring Boot 默认使用 Jackson 进行 JSON 化处理,如果想要切换成 FastJson 可以首先从官方文档里查询信息。从这里知道对于 ResponseBody 的渲染主要是通过 HttpMessageConverters, 而首先引入FastJson Pom依赖并排除 Spring Boot 自带的 Jackson。


     org.springframework.boot
     spring-boot-starter-web
     
           
               spring-boot-starter-json
               org.springframework.boot
           
     
 

     com.alibaba
     fastjson
     1.2.47

编写转换器处理 json 的日期格式同时处理中文乱码问题。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 自定义JSON转换器
     *
     * @param converters
     */
    @Override
    public void configureMessageConverters(List> converters) {
        FastJsonHttpMessageConverter converter = new FastJsonHttpMessageConverter();
        FastJsonConfig fastJsonConfig = new FastJsonConfig();
        fastJsonConfig.setSerializerFeatures(SerializerFeature.PrettyFormat);
        //日期格式化
        fastJsonConfig.setDateFormat("yyyy-MM-dd HH:mm:ss");
        //处理中文乱码问题
        List fastMediaTypes = new ArrayList<>();
        fastMediaTypes.add(MediaType.APPLICATION_JSON_UTF8);

        converter.setSupportedMediaTypes(fastMediaTypes);
        converter.setFastJsonConfig(fastJsonConfig);

        converters.add(converter);
    }
    
}

2. 静态资源映射

By default, Spring Boot serves static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext.

2.1 默认映射

官方文档告诉我们 Spring Boot 对于静态资源的映射目录是 /static , /public , /resources 以及 /META-INF/resource。除此之外其实还映射了 /webjars/**classpath:/META-INF/resources/webjars

很明显此处是自动配置实现的,通过查看源码分析这段配置。

Springboot 系列(五)web 开发之静态资源和模版引擎_第1张图片

Springboot 系列(五)web 开发之静态资源和模版引擎_第2张图片

而对于网站图标,Spring Boot 也已经配置了默认位置,可以在看到。

// path: org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration
@Bean
public SimpleUrlHandlerMapping faviconHandlerMapping() {
    SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
    mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);
    mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", // 图表
            faviconRequestHandler()));
    return mapping;
}

@Bean
public ResourceHttpRequestHandler faviconRequestHandler() {
    ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
    requestHandler.setLocations(resolveFaviconLocations());
    return requestHandler;
}

private List resolveFaviconLocations() {
    String[] staticLocations = getResourceLocations(
            this.resourceProperties.getStaticLocations());
    List locations = new ArrayList<>(staticLocations.length + 1);
    Arrays.stream(staticLocations).map(this.resourceLoader::getResource)
            .forEach(locations::add);
    locations.add(new ClassPathResource("/"));
    return Collections.unmodifiableList(locations);
}

根据 Spring Boot 默认的静态资源映射规则,可以直接把需要的静态资源放在响应的文件夹下然后直接引用即可。

Springboot 系列(五)web 开发之静态资源和模版引擎_第3张图片

而放在 Public 文件夹下的 HTML 页面也可以直接访问。
Springboot 系列(五)web 开发之静态资源和模版引擎_第4张图片

2.2 webjars

webjars 的思想是把静态资源打包到 Jar 包中,然后使用 JVM 构建工具进行管理,如 maven , Gradle 等。

使用 webjars 第一步需要进入依赖,如要使用 bootstrap。

 
 
     org.webjars
     bootstrap
     4.1.3

引入之后查看 bootstrap 资源。

Springboot 系列(五)web 开发之静态资源和模版引擎_第5张图片

由于 Springboot 映射了 /webjars/**classpath:/META-INF/resources/webjars. 因此可以直接在文件中引用 webjars 的静态资源。



3. 模版引擎

Spring MVC 支持各种模版技术,如 Thymeleaf , FreeMarker , JSP 等。而Thyemeleaf 原型即页面的特性或许更符合 Spring Boot 快速开发的思想而被官方推荐。

Springboot 系列(五)web 开发之静态资源和模版引擎_第6张图片

Thymeleaf 是适用于 Web 开发的服务端 Java 模版引擎,Thymeleaf 为开发工作流程带来优雅自然的模版,由于其非侵入的特性,可以让页面不管是在静态原型下还是用作模版引擎时都有良好的页面展现。

Name Price
Oranges 0.99

3.1 引入 Thymeleaf

         
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

3.2 使用 Thymeleaf

根据 Spring Boot 自动配置原理,先看一下 Thymeleaf 的配置类,从中可以看出 Thymeleaf 的相关配置。我们可以知道 默认存放目录是 templates 文件夹,文件后缀为 .html 且开启了缓存。

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

    private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

    public static final String DEFAULT_PREFIX = "classpath:/templates/";

    public static final String DEFAULT_SUFFIX = ".html";
    /**
     * Whether to enable template caching.
     */
    private boolean cache = true;

为了在开发中编写模版文件时不用重启,可以在配置中关闭缓存。

# 关闭模版缓存
spring.thymeleaf.cache=false
# 如果需要进行其他的配置,可以参考配置类:ThymeleafProperties
# org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties

编写 Controller 响应信息。

  /**
     * 获取ID为1的用户信息
     *
     * @return
     */
    @GetMapping(value = "/user/1")
    public String getUserById(Model model) {
        User user1 = new User("Darcy", "password", 24, new Date(), Arrays.asList("Java", "GoLang"));
        User user2 = new User("Chris", "password", 22, new Date(), Arrays.asList("Java", "Web"));
        ArrayList userList = new ArrayList<>();
        userList.add(user1);
        userList.add(user2);
        model.addAttribute("userList", userList);
        model.addAttribute("user", user1);
        return "user";
    }

因为 Thymelaf 默认模版位置在 templates 文件夹下,因此在这个文件夹下编写页面信息。




    Thymeleaf 的基本使用
    
    



Hello Thymeleaf Index

用户名称:
用户技能:
用户年龄:
用户生日:

Hello Thymeleaf Index

用户名称:
用户技能:
用户年龄:
用户生日:

Text 与 utext

abc
abc

URL 的引用

网站网址

表单的使用

用户名称:
用户技能:
用户年龄:

判断的使用

18岁了
大于18岁
小于18岁
大于等于
小于等于

选择框

遍历功能

用户名称 年龄 技能

Switch功能

欢迎管理员

访问页面可以看到数据正常显示。

Springboot 系列(五)web 开发之静态资源和模版引擎_第7张图片

文章代码已经上传到 GitHub Spring Boot Web开发 - 静态资源
文章代码已经上传到 GitHub Spring Boot Web开发 - 模版引擎

最后的话

文章已经收录在 Github.com/niumoo/JavaNotes ,欢迎Star和指教。更有一线大厂面试点,Java程序员需要掌握的核心知识等文章,也整理了很多我的文字,欢迎 Star 和完善,希望我们一起变得优秀。

文章有帮助可以点个「」或「分享」,都是支持,我都喜欢!
文章每周持续更新,要实时关注我更新的文章以及分享的干货,可以关注「 未读代码 」公众号或者我的博客

公众号

你可能感兴趣的:(springboot)