一、Webjars与静态资源

  • SpringBoot静态资源
    • 静态资源目录与配置信息
      • /static -> classpath:/static/
      • /public -> classpath:/public/
      • /resources -> classpath:/resources/
      • /META-INF/resources -> classpath:/META-INF/resources
      • 自定义静态资源目录方法
        • image.png
    • favicon.ico图标
  • 使用Webjars管理CSS和JS
    • 为什么使用WebJars
      • 清晰的管理web依赖
      • 通过Maven，Gradel等项目管理工具就可以下载web依赖
      • 解决web组件中传递的问题以及版本问题
      • 页面依赖的版本自动检测功能

二、整合FreeMarker

  • 添加依赖

    1. <dependency>
    2.      <groupId>org.springframework.boot</groupId>
    3.      <artifactId>spring-boot-starter-freemarker</artifactId>
    4. </dependency>

  • 编写配置文件

    1. spring:
    2. freemarker:
    3.   cache: false  #缓存配置 开发阶段应该配置为false,因为经常会改动
    4.   suffix: .ftl #模板文件后缀名
    5.   charset: UTF-8 #文件编码
    6.   template-loader-path: classpath:/templates/

  • 编写Controller

    • 接口顶层注解使用@Controller,因为接口要返回一个页面，使用@RestController只能返回数据，接口的入参时候Model ```java @Controller @RequestMapping(“/tempalte”) public class TemplateController {
  1. @GetMapping("/freemarker")
  2. public String index(Model model) {
  3.     List<Article> articles = Arrays.asList(
  4.         new Article(1, "张三", "Java从入门精通"),
  5.         new Article(2, "张三丰", "Spring"),
  6.         new Article(3, "张三风", "SpringBoot")
  7.     );
  8.     model.addAttribute("articles", articles);
  9.     System.out.println(articles);
  10.     //    模板名称
  11.     return "freemarker-demo";
  12. }

}

  2. - 页面显示
  3. ```html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6.   <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport"
  9.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  11.     <title>Freemarker页面</title>
  12.     <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
  13.   </head>
  14.   <body>
  15.     <div class="container">
  16.       <table class="table table-primary table-hover">
  17.         <tr>
  18.           <td>id</td>
  19.           <td>作者</td>
  20.           <td>标题</td>
  21.         </tr>
  24.         <#list articles as article>
  25.           <tr>
  26.             <td>${article.id}</td>
  27.             <td>${article.author}</td>
  28.             <td>${article.title}</td>
  29.           </tr>
  30.           </#list>
  31.       </table>
  32.     </div>
  35.     <script src="/webjars/jquery/jquery.min.js"></script>
  36.     <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
  37.   </body>
  38. </html>

三、整合template

  • 添加依赖