Springboot支持thymeleaf、freemarker、JSP，但是官方不建议使用JSP,因为有些功能会受限制，这里介绍thymeleaf和freemarker。

一、thymeleaf模板

thymeleaf模板的前端界面为.html格式的文件，可以直接使用浏览器进行查看，方便进行样式等方面的调试。

1、pom依赖添加

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

2、application属性配置

查看官方文档的默认配置介绍如下：

这里必须要注意的是，开发的时候要关闭模板缓存，不然修改界面文件后无法实时显示。在application.properties文件中关闭模板缓存：

spring.thymeleaf.cache=false

关闭缓存后，修改html文件，可以直接Ctrl+F9编译后，显示最新的修改内容。

3、编写界面

我的界面hello.html路径为：templates/template/hello.html，代码：

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <title>Title</title>

</head>

<body>

    <!--/*@thymesVar id="name" type="java.lang.String"*/-->

    <p th:text="'Hello, ' + ${name}" ></p>

</body>

</html>

4、编写controller

package com.example.demo.template;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping("/html")

public class HtmlController {

    @RequestMapping("/hello")

    public String hello(Model model) {

        model.addAttribute("name", "world");

        return "template/hello";

    }

}

运行访问,如下：

 

thymeleaf具体使用参考

http://blog.csdn.net/z719725611/article/details/53908294

二、freemarker模板

1、pom依赖添加

<dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-freemarker</artifactId>

        </dependency>

注意：允许thymeleaf和freemarker同时存在

2、application属性配置

查看官方文档的默认配置介绍如下：

application.properties文件无需配置，使用默认配置即可

3、编写界面

我的界面hello.ftl路径为：templates/ftl/hello.ftl，代码：

<!DOCTYPE html>

<html>

<head>

    <title>Title</title>

</head>

<body>

    message:${message}

</body>

</html>

4、编写controller

package com.example.demo.template;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping("/html")

public class HtmlController {

    @RequestMapping("/hello")

    public String hello(Model model) {

        model.addAttribute("name", "world");

        return "template/hello";

    }

}

接下来启动运行即可。
freemarker具体使用参考
http://blog.csdn.net/fhx007/article/details/7902040/
http://blog.csdn.net/tang9140/article/details/39695653

SpringBoot前端模板的更多相关文章

  1. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  2. 前端模板Juicer

    Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC). 除此之外,它还可以在 Node.js 环境中运行. 用 ...

  3. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  4. 前端模板artTemplate，handlerbars的使用心得

    写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故. 1,artTemplate 优点: 1,一般web端用得较多,执行速度通常是 Mustache ...

  5. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  6. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  7. Yii框架学习笔记（二）将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

  8. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

  9. 有意思，搞了这么多年WEB，还是第一次知道这个东西 关键字 前端模板

    有意思,搞了这么多年WEB,还是第一次知道这个东西 关键字 前端模板 jquery-tmpl handlebars 项目中用的是handlebars  jqtmpl配置不成功 不做记载 百度吧 小媳妇 ...

随机推荐

  1. 动态代理的两种方式，以及区别（静态代理、JDK与CGLIB动态代理、AOP+IoC）

    Spring学习总结(二)——静态代理.JDK与CGLIB动态代理.AOP+IoC   目录 一.为什么需要代理模式 二.静态代理 三.动态代理,使用JDK内置的Proxy实现 四.动态代理,使用cg ...

  2. ZooKeeper的三种典型应用场景

    引言 ZooKeeper是中典型的pub/sub模式的分布式数据管理与协调框架,开发人员可以使用它进行分布式数据的发布与订阅.另外,其丰富的数据节点类型可以交叉使用,配合Watcher事件通知机制,可 ...

  3. haproxy使用演示--技术流ken

    haproxy简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.基于合理的配置及优化,完全可以实现单机支持数 以万计的并 ...

  4. 服务器配置https

    服务器配置https 第一步.申请证书 这个网上有很多申请方法,不论你是阿里云还是腾讯云都有自带的申请途经,这里就不再赘述. 第二步.进行配置(linux) 1.在tomcat的conf目录下创建新的 ...

  5. DNS服务器 和CDN

    整个网页请求的流程如下: 我们先在浏览器输入域名,然后通过DNS(Domain Name System) 域名解析系统解析出来域名的对应的IP,然后发送请求得到响应返回给客户端,整个流程如下:  我们 ...

  6. C# 合并Excel工作表

    文档合并.拆分是实现文档管理的一种有效方式.在工作中,我们可能会遇到需要将多个文档合并的情况,那如何来实现呢,本文将进一步介绍.关于拆分Excel工作表,可参见这篇文章——C#如何拆分EXCEL工作表 ...

  7. 【Linux】Linux上安装Nginx

    本文介绍Linux环境安装Nginx,这里用的Linux系统是CentOS 7.2. 1. 从Nginx官网下载Nginx.这里用的版本为:1.13.6. 2. 将下载下来的Nginx上传到Linux ...

  8. Hibernate框架笔记01_环境搭建_API_CRUD

    目录 1. Hibernate框架的概述 1.1 什么是框架 1.2 经典三层架构 1.3 Hibernate框架 2 Hibernate入门 2.1 下载Hibernate的开发包 2.2 创建项目 ...

  9. JS最简单的字符串转数字类型

    以前无休止的写parseInt,特别复杂,现在只需要一个加号,就可以完成对字符串的转换 1 === +"1" amazing!

  10. Xutils, OKhttp, Volley, Retrofit对比

    Xutils这个框架非常全面,可以进行网络请求,可以进行图片加载处理,可以数据储存,还可以对view进行注解,使用这个框架非常方便,但是缺点也是非常明显的,使用这个项目,会导致项目对这个框架依赖非常的 ...