# 第五章 使用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>
