博客项目目录： 请戳这里

准备

开发环境：

• idea2018
• jdk1.8
• maven3.6.1
• mysql5.7

1.新建springboot项目

项目所需依赖如下图：
其中Spring Boot DevTools是开发工具，Lombok用于简化get和set，以及eqauls方法书写，Spring Web是web相关依赖，Apache Freemarker是前端模板引擎，Mysql是数据库，Redis用于缓存

前端模板导入：
模板资源下载地址：https://github.com/xqxls/layui

• 首先将 /fly-3.0/html 目录下的index.html拷贝到项目的templates目录下，并且后缀名更改为.ftl
• 将/fly-3.0目录下的整个res文件拷贝到项目的static目录下(主要是一些css和js文件)
• 然后在pom文件里，将springboot的版本改为2.1.2
• 最后写个controller，便于输入地址后，跳转到指定页面进行测试

controller代码：

@Controller
public class IndexController {

    @RequestMapping({"", "/", "index"})
    public String index() {
        return "index";
    }
}

启动项目进行测试，在run方法后面打印地址，便于直接点击访问。

启动类：

@SpringBootApplication
public class TblogApplication {

    public static void main(String[] args) {
        SpringApplication.run(TblogApplication.class, args);
        System.out.println("http://localhost:8080");
    }

}

首页显示：

2.抽取样式，自定义宏模板

分析主页资源的组成，主要由头，导航栏，主体左边，主体右边，脚这五部分组成，由于其他页面主要是在主体左边做修改，所以我们可以将这几部分单独抽取出来，作为一个单独的ftl。

组成部分划分：

index.ftl各个部分收起来之后的样子：

然后我们将每个部分单独地放到一个ftl里面，并且通过类似<#include "/inc/header.ftl" />的方式进行引用

提取之后的样子：

最后我们定义一个宏，宏的内容主要由<#macro layout title>标签，head标签，头部内容，<#nested> ，尾部内容，最下面的js组成。

宏的规则：

• 通过<#macro layout title> 定义一个宏（模板），名字是 layout，title 是参数
• <#nested> 用于引入 layout 这个宏的地方，引入的所有内容都会替换到这个标签中

index.ftl引用示例：

修改layout中原来title标签的静态内容，变为${title}

启动项目，测试发现title变为了“首页”

3.引入文章分类页和文章详情页

• 在templates目录下新建post目录
• 将/fly-3.0/html/jie目录下的index.html拷贝到post目录下，重命名为category.ftl
• 将/fly-3.0/html/jie目录下的detail.html拷贝到post目录下，重命名为detail.ftl
• 最后写一个PostController

PostController代码：

@Controller
public class PostController {

    @GetMapping("/category/{id:\\d*}")
    public String category(@PathVariable(name = "id") Long id) {
        return "/post/category";
    }

    @GetMapping("/post/{id:\\d*}")
    public String detail(@PathVariable(name = "id") Long id) {
        return "/post/detail";
    }
}

启动项目，进行测试
在浏览器输入http://localhost:8080/category/1，结果如下：

在浏览器输入http://localhost:8080/post/1，结果如下：

• 用category.ftl的主体部分替换掉index的主体，作为新的category.ftl
• 用detail.ftl的主体部分替换掉index的主体，作为新的detail.ftl

category.ftl示例：

最后再分别在浏览器输入http://localhost:8080/category/1和http://localhost:8080/post/1，发现标题变成了“博客分类”和博客详情，结果如下：

参考资料：

https://github.com/MarkerHub/eblog