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. 云原生实践之 RSocket 从入门到落地：Servlet vs RSocket

    技术实践的作用在于:除了用于构建业务,也是为了验证某项技术或框架是否值得大规模推广. 本期开始,我们推出<RSocket 从入门到落地>系列文章,通过实例和对比来介绍RSocket.主要围 ...

  2. 初识区块链——用JS构建你自己的区块链

    前言 区块链太复杂,那我们就讲点简单的.用JS来构建你自己的区块链系统,寥寥几行代码就可以说明区块链的底层数据结构.POW挖矿思想和交易过程等.当然了,真实的场景远远远比这复杂.本文的目的仅限于让大家 ...

  3. [九]JavaIO之ObjectInputStream 和 ObjectOutputStream

    序列化 序列化是指把Java对象保存为二进制字节码的过程,Java反序列化是指把二进制码重新转换成Java对象的过程 序列化是一种轻量级的持久化,对象都是存活在内存中的,当JVM运行结束,对象便不存在 ...

  4. SpringBoot基础系列-SpringBoot配置

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9990680.html SpringBoot基础系列-SpringBoot配置 概述 属性 ...

  5. mac用pecl安装swoole可能出现的报错及解决办法

    一.用pecl安装swoole 2018年4月,由于homebrew的变动,导致无法使用brew install的方式安装php的扩展,现在改为用pecl安装,pecl安装swoole的方法为: pe ...

  6. python-IO编程，文件读写

    一.文件读写 1.打开文件 函数:open(name[. mode[. buffering]]) 参数: name:必须:文件的文件名(全路径或执行文件的相对路径.)) mode:可选:对文件的读写模 ...

  7. 【学习笔记】tensorflow基础

    目录 认识Tensorflow Tensorflow特点 下载以及安装 Tensorflow初体验 Tensorflow进阶 图 op 会话 Feed操作 张量 变量 可视化学习Tensorboard ...

  8. Maven（十四）Maven 继承

    以Junit为例 由于junit的依赖的范围为test,所以在每一个项目中都必须配置一个junit. 为了统一管理方便,可以单独创建一个项目用来进行**统一管理**junit的版本 即在子项目中不设置 ...

  9. HTML5利用canvas，把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

  10. java 线程方法 ---- join()

    class MyThread2 implements Runnable{ @Override public void run() { for (int i = 0; i < 5; i++){ S ...