5分钟学会springboot中beetl模版引擎的基本使用

技术交流
1

5分钟学会springboot中beetl模版引擎的基本使用

Beetl是一款优秀的模版引擎，它借鉴了js的语法，大大降低的学习的成本。因为是国产，所以有详细的中文文档。更是降低了的学习的门槛。

官网

http://ibeetl.com/

在SpringBoot中整合Beetl

导入依赖

<!-- https://mvnrepository.com/artifact/com.ibeetl/beetl -->
<dependency>
    <groupId>com.ibeetl</groupId>
    <artifactId>beetl</artifactId>
    <version>3.1.7.RELEASE</version>
</dependency>

配置类

import org.beetl.core.resource.ClasspathResourceLoader;
import org.beetl.ext.spring.BeetlGroupUtilConfiguration;
import org.beetl.ext.spring.BeetlSpringViewResolver;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class BeetlConfiguration {
	
	@Value("${beetl.templates-path}")
	private String templatesPath;

	@Bean(initMethod = "init", name = "beetlConfig")
	public BeetlGroupUtilConfiguration getBeetlGroupUtilConfiguration() {
		BeetlGroupUtilConfiguration beetlGroupUtilConfiguration = new BeetlGroupUtilConfiguration();
		ClassLoader classLoader = Thread.currentThread().getContextClassLoader();
		if (classLoader == null) {
			classLoader = BeetlConfiguration.class.getClassLoader();
		}
		ClasspathResourceLoader classpathResourceLoader = new ClasspathResourceLoader(classLoader, templatesPath);
		beetlGroupUtilConfiguration.setResourceLoader(classpathResourceLoader);
		beetlGroupUtilConfiguration.init();
		beetlGroupUtilConfiguration.getGroupTemplate().setClassLoader(classLoader);
		return beetlGroupUtilConfiguration;
	}

	@Bean(name = "beetlViewResolver")
	public BeetlSpringViewResolver getBeetlSpringViewResolver(
			@Qualifier("beetlConfig") BeetlGroupUtilConfiguration beetlGroupUtilConfiguration) {
		BeetlSpringViewResolver beetlSpringViewResolver = new BeetlSpringViewResolver();
		beetlSpringViewResolver.setContentType("text/html;charset=UTF-8");
		beetlSpringViewResolver.setOrder(0);
		beetlSpringViewResolver.setSuffix(".btl");
		beetlSpringViewResolver.setConfig(beetlGroupUtilConfiguration);
		return beetlSpringViewResolver;
	}
}

配置项

# 配置模板引擎所在的目录
beetl:
  templates-path: templates

模板引擎所在目录

image
classpath路径下的 templates 目录

Hello World

Controller

@RequestMapping("/helloworld")
@Controller
public class HelloworldController {
	
	@GetMapping
	public Object helloworld () {
		return new ModelAndView("/helloworld/helloworld");
	}
}

模版引擎

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello World！</title>
	</head>
	<body>
		<%
			var message = "Hello World!";
		%>
		<h1>${message}</h1>
	</body>
</html>

渲染效果

image

基本的语法

使用 <% %> 作为模板语言的定界符，使用 ${name} 渲染数据

通过Controller设置变量

@RequestMapping("/demo1")
@Controller
public class Demo1Controller {
	
	@GetMapping
	public Object demo1 () {
		ModelAndView modelAndView = new ModelAndView("/demo1/demo1");
		/**
		 * 填充变量到Model，相当于在模板引擎中定义了全局变量。可以在任意地方使用，
		 */
		modelAndView.addObject("name", "SpringBoot");
		return modelAndView;
	}
}

视图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Demo1</title>
	</head>
	<body>
		<%
			// 在定界符里面，就完全当js来写模板引擎的代码
			/*
			 * 支持多行注释语法
			 */
			 
			 // 在定界符外面，通过 ${name} 来读取到模板变量的值
		%>
	
	
		<%
			// 字符串的拼接
			var finalName = "Hello "  + name; // 对字符串进行拼接。name 变量来自于 Controller中对ModelAndView的填充
		%>
		<div>${finalName}</div>
		
		<%
			// 基本的运算
			var a = 2;
			var b = 3;
			var result = a + b;
		%>
		<div>${result}</div>
	</body>
</html>

如你所见，当js写。不需要额外的学习成本。支持基本的运算，拼接

渲染结果

image

渲染集合

Controller


@RequestMapping("/demo2")
@Controller
public class Demo2Controller {
	
	@GetMapping
	public Object demo1 () {
		ModelAndView modelAndView = new ModelAndView("/demo2/demo2");
		// 集合
		modelAndView.addObject("list", Arrays.asList("选项1", "选项2", "选项3"));
		return modelAndView;
	}
}

视图

使用下标遍历

.~size 是集合类型的一个虚拟属性。它返回集合的长度。 ${} 表达式，支持通过下标取值。与js无异。

<ul>
	<%
		for (var i = 0; i < list.~size; i ++){
	%>
		<li>${list[i]}</li>
	<%
		}
	%>
</ul>

image

使用forEeach遍历
<ul>
	<%
		for (var item in list){
	%>
		<li>${item}</li>
	<%
		}
	%>
</ul>

使用forEeach遍历的时候，可以通过一些预定义的属性，来获取迭代状态

<ul>
	<%
		for (var item in list){
	%>
		<li>${item} - ${itemLP.index} - ${itemLP.size} - ${itemLP.first} - ${itemLP.last} - ${itemLP.even} - ${itemLP.odd}</li>
	<%
		}
	%>
</ul>

image

LP是Beetl隐含定义的变量，能在循环体内使用。其命名规范是item名称后加上LP，他提供了当前循环的信息，如
userLP.index	当前的索引，从1开始
userLP.size		集合的长度
userLP.first	是否是第一个
userLP.last		是否是最后一个
userLP.even		索引是否是偶数
userLP.odd		索引是否是奇数

渲染Map/对象

Controller

@RequestMapping("/demo3")
@Controller
public class Demo3Controller {
	
	@GetMapping
	public Object demo3 () {
		ModelAndView modelAndView = new ModelAndView("/demo3/demo3");
		// Map
		modelAndView.addObject("map", Collections.singletonMap("我是key", "我是value"));
		// 对象
		modelAndView.addObject("user", new User(1, "KevinBlandy", new Date()));  // public User(Integer id, String name, Date createdDate) {...}
		return modelAndView;
	}
}

视图

Map的迭代，使用forEach。在循环体中通过key和value获取对应的值。
<ul>
<%
	for(entry in map) {
		var key = entry.key;  // 获取到key属性
		var value = entry.value; // 获取到value属性
%>
	<li>key=${key}, value=${value}</li>
<%
	}
%>

image

Map属性的访问，支持类似于数组的访问方式
<div>${map["我是key"]}</div>

image

访问对象的属性
<ul>
	<li>${user.id}</li>
	<li>${user.name}</li>
	<li>${user.createdDate}<</li>
</ul>

image

更多的内容，查看官方文档

以上简单的介绍了整合springboot，以及对于集合，Map，对象这类基本的数据处理。对于一般的应用而言，满足基本的渲染要求。毕竟模板引擎的任务只是读取数据和基本的判断。

Beetl的功能不仅仅于此，还支持如下的功能

  • 自定义函数/标签/虚拟属性
  • 自定义异常处理
  • 布局
  • …

需要深入学习，可以参阅官方文档。beetl，不难。好使！ :+1: