11.14 引入前端组件

我们使用基于Bootstrap的前端UI库Flat UI。首先去Flat UI的首页：http://www.bootcss.com/p/flat-ui/ 下载zip包，加压后，放到我们的工程里，放置的目录是：src/main/resources/static 。如下图所示：

Kotlin极简教程

我们在list.ftl头部引入静态资源文件：

  1. <head>
  2.     <meta charset="utf-8">
  3.     <title>Blog</title>
  4.     <meta name="description"
  5.           content="Blog, using Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
  7.     <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
  9.     <!-- Loading Bootstrap -->
  10.     <link href="/flatui/dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  12.     <!-- Loading Flat UI -->
  13.     <link href="/flatui/dist/css/flat-ui.css" rel="stylesheet">
  14.     <link href="/flatui/docs/assets/css/demo.css" rel="stylesheet">
  16.     <link rel="shortcut icon" href="/flatui/img/favicon.ico">
  18.     <script src="/flatui/dist/js/vendor/jquery.min.js"></script>
  19.     <script src="/flatui/dist/js/flat-ui.js"></script>
  20.     <script src="/flatui/dist/js/vendor/html5shiv.js"></script>
  21.     <script src="/flatui/dist/js/vendor/respond.min.js"></script>
  23.     <link rel="stylesheet" href="/blog/blog.css">
  24.     <script src="/blog/blog.js"></script>
  25. </head>

其中，我们的这个SpringBoot应用中默认的静态资源的跟路径是src/main/resources/static，然后我们的HTML代码中引用的路径是在此根目录下的相对路径。

提示：更多的关于Spring Boot静态资源处理内容可以参考文章：
http://www.jianshu.com/p/d127c4f78bb8

然后，我们再把我们的文章列表布局优化一下：

  1. <div class="container">
  2.     <h1>我的博客</h1>
  3.     <table class="table table-responsive table-bordered">
  4.         <thead>
  5.         <th>序号</th>
  6.         <th>标题</th>
  7.         <th>作者</th>
  8.         <th>发表时间</th>
  9.         <th>操作</th>
  10.         </thead>
  11.         <tbody>
  12.         <#-- 使用FTL指令 -->
  13.         <#list articles as article>
  14.         <tr>
  15.             <td>${article.id}</td>
  16.             <td>${article.title}</td>
  17.             <td>${article.author}</td>
  18.             <td>${article.gmtModified}</td>
  19.             <td><a href="#" target="_blank">编辑</a></td>
  20.         </tr>
  21.         </#list>
  22.         </tbody>
  23.     </table>
  24. </div>

重新build工程，在此访问文章列表页，我们将看到一个比刚才漂亮多了的页面：

Kotlin极简教程

考虑到头部的静态资源文件基本都是公共的代码，我们单独抽取到一个head.ftl文件中, 然后在list.ftl中直接这样引用：

  1. <#include "head.ftl">