# 第五章 使用velocity模板引擎
最爽的Web组合开发就是Intellij IDEA + Maven + Spring Boot + Velocity + Boostrap + jQuery了.
几乎所有的Web平台都是要将后端的数据传给前端页面显示，而实现的方法就是通过模板引擎。SpringBoot支持四种模板引擎，本书重点介绍其中的Velocity。（没必要四种都学会，就像编程语言一样，选择一门学好就可以了）
### 添加Velocity依赖
打开pom.xml文件，添加velocity依赖：
~~~
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-velocity</artifactId>
</dependency>
~~~
添加后完整的pom.xml文件内容如下：
~~~
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>hello</groupId>
<artifactId>hello</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.0.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-velocity</artifactId>
</dependency>
</dependencies>
</project>
~~~
### Velocity配置
velocity默认的文件后缀名是.vm，为了习惯，我们将改成.html。打开applicaiton.properties文件（在第三章讲了创建该文件的说明），加了以下行：
spring.velocity.suffix=.html
为了支持中文显示，再加入两行编码配置：
spring.velocity.properties.input.encoding=UTF-8
spring.velocity.properties.output.encoding=UTF-8
**至此，完整的application.properties文件内容为：**
~~~
server.port = 9527
spring.velocity.suffix=.html
spring.velocity.properties.input.encoding=UTF-8
spring.velocity.properties.output.encoding=UTF-8
~~~
### 模块化
之前的入口类lightsword.java内容为：
~~~
package lightsword;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
@RestController
public class lightsword {
public static void main(String[] args){
SpringApplication.run(lightsword.class, args);
}
@RequestMapping("/hello")
public String hello(){
return "Hello world";
}
}
~~~
**现在我们要做的就是将hello方法从入口类中分离出去**
1. 在src->main->java->lightsword包名下新建一个子包名，取名为controller。
2. 在controller下新建一个类，取名为MainController.java。将入口类的hello方法和@RestController移到MainController类中。
以上两步完成后，入口类lightsword.java内容更新为：
~~~
package lightsword;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class lightsword {
public static void main(String[] args){
SpringApplication.run(lightsword.class, args);
}
}
~~~
而MainController.java的内容为：
~~~
package lightsword.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class MainController {
@RequestMapping("/hello")
public String hello(){
return "Hello world";
}
}
~~~
再次运行入口类，用浏览器访问http://127.0.0.1:9527/hello，结果还是正确输出Hello world。以后我们就可以对MainController类进行扩展，而不用将服务写在入口类里了。
### 改造hello方法
之前是直接使用return方法返回Hello world，现在我们将Hello world字符串渲染到模版，然后通过Velocity供前端页面使用。
新的hello方法如下：
~~~
package lightsword.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class MainController {
@RequestMapping("/hello")
public ModelAndView hello(Model model){
ModelAndView modelAndView = new ModelAndView("index");
String hello = "Hello world";
model.addAttribute("hello", hello);
return modelAndView;
}
}
~~~
通过Model类的addAttribute方法将数据渲染到模版中，名称为hello。其中ModelAndView类表示一个视图（对应一个前端页面）
另外，这里使用@Controller注解代替@RestController. 因为我们返回的是一个页面，而不是数据。
### 创建HTML页面
1. 在src->main->resources目录下创建一个子目录，名称为templates（SpringBoot会自动查找该目录，即templates目录为前端页面的默认目录。）
2. 在templates目录创建一个HTML页面，名称为index.html（这里的index需对应上面new ModelAndView("index")中的index.)
3. index.html内容如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>$hello</h3>
</body>
</html>
~~~
其中$hello是引用模版名称为hello的值。
### 运行
运行后，打开http://127.0.0.1:9527/hello
结果是访问index.html文件，输出h3字体的Hello world.
<br>
