本节开始引入bootstrap开始写页面,写页面就会用到模板引擎。
PHP同学可能都会熟悉twig这个模板引擎,java这边也同样有类似的。
详情请参考我的另一篇 spring boot 集成 Pebble,更优雅地输出变量
这节我们还要集成bootstrap,并且使用layout 模板继承。
依赖
<dependency>
<groupId>io.pebbletemplates</groupId>
<artifactId>pebble-spring-boot-starter</artifactId>
<version>3.1.0</version>
</dependency>
配置 static
spring.mvc.static-path-pattern=/static/**
告诉框架你的静态资源放到哪
引入bebble
这里我还是像PHP框架大多数的做法那样,写一个baseController其他控制器继承,在baseController里引入bebble.
class BaseController {
public String render(String template, Map<String, Object> context) {
PebbleEngine engine = new PebbleEngine.Builder().build();
PebbleTemplate compiledTemplate = engine.getTemplate("templates/" + template);
Writer writer = new StringWriter();
try {
compiledTemplate.evaluate(writer, context);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String output = writer.toString();
return output;
}
}
这个时候你就可以在控制器里,调用该方法
layout
在前端开放当中,会有很多公共部分。比如header、footer之类。使用layout、import、include可以解决通用布局继承和组件引用问题。
#layout
<body>
{% include "./nav.twig" %}
<div class="container">
{% block content %}
Default content goes here.
{% endblock %}
{% include "./footer.twig" %}
</div>
</body>
这里我使用twig作为前端html文件类型,原因是netbeans支持twig语法比较好。
现在我分别写好了首页、登录、注册页。
之后的章节当中,我们开始写业务逻辑。
关于模板
页面的前端模板肯定不要自己写,我们还是专注于spring boot本身。 我这里都是从网上直接找的bootstrap模板。 这里有2个bootstrap模板网址: