Java Web学习(30)---Spring Boot的模板在快速(velocity)搭建网站中的应用

2017-01-14 19:44:36来源:CSDN作者:nofaker人点击

在Spring Boot中,如果后端在控制器中直接返回相应的html文件渲染前端页面,将会比较麻烦,代码复杂且无法重用。通常我们采用返回一个模板中的文件来渲染前端页面。


模板:模板文件保存在templates文件夹里边。在Controller中,通过返回一个模板文件(通常是html文件),渲染页面。如何编写一个返回模板文件的Controller呢?只需要去掉注解中的@ResponseBody,看一下下边这个函数:
@RequestMapping(path={/vm})public String template() {	return "home";}

这个函数将会通过返回的字符串来匹配templates中的模板文件,其中默认后缀是vm,所以寻找的是home.vm文件,但是我们可以在application.properties中更改默认后缀,添加如下代码:
spring.velocity.suffix=.html

这样我们就可以在templates文件夹下面新建一个home.html,当我们访问/vm的时候就会返回这个html文件渲染前端页面。


如果想从前端读取后端的数据,比如一些基本的变量,可以这样做,更改刚刚写过的template函数如下:
@RequestMapping(path={/vm})public String template(Model model) {	model.addAttribute("value1", "parameter1");	return "home";}

同时home.html要这样编写:
<html><head>    <title>Spring Boot is interesting!</title></head><body><pre>    $!{value1}    $!{value2}    ${value2}</pre>Welcome to Spring Boot World!</body></html>

其中$!{value1}代表读取名为value1从后端传递过来的变量,如果而value2是不存在的,如果加上感叹号,那么如果不存在的变量将视为空,如果不加上的话,不存在的变量将视为纯文本返回。


下面我们传入一个容器ArrayList:

    @RequestMapping(path={"/vm"}, method={RequestMethod.GET})    public String template(Model model) {        model.addAttribute("value1", "parameter1");        List<String> list = Arrays.asList(new String[] {"RED", "GREEN", "BLUE"});        model.addAttribute("value2", list);        return "home";    }

这样$!{value2}会以value2.toString()的形式输出,注意,所有的变量都要以$开始。
下面我们在前端页面遍历这个ArrayList:
<html><head>    <title>Spring Boot is interesting!</title></head><body><pre>    $!{value1}    $!{value2}    ${value2}    #foreach($color in $value2)    This is color $!(foreach.index):$color,$!{foreach.count}    #end</pre>Welcome to Spring Boot World!</body></html>

使用foreach即可完成,其中foreach.index和foreach.count是自带的变量,分别表示这个在ArrayList中的索引(下标)和第几个元素。下面我们尝试传入一个Map进行遍历,现在template方法中添加如下代码:
	Map<String, String> map = new Map<Stirng, String>();	for(int i = 0; i < 4; i++) {		map.put(String.valueOf(i), String.valueOf(i * i));	}

model.addAttribute("value3", map);
接着在html中添加:
    $!{value3}    #foreach($map in $value3.keySet())        Key=$map,value=$value3.get($map)    #end    #foreach($map in $value3.entrySet())        Key=$map.key,Value=$map.value    #end

这样便可以遍历Map容器。


下面我们传入一个名为User的类(存放在model文件夹下):

package com.nofaker.model;public class User {    private String name;    public User(String name) {        this.name = name;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }}

接着在template方法中添加:

model.addAttribute("value4", new User("nofaker"));


然后在html中添加:

$!{value4.name}


注意这里能否访问是根据User类是否有getName方法决定的,如果对于将要出的变量有get方法,那么可以输出。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台