准备
开发环境:
- 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