SpringBoot中如何自定义Thymeleaf标签

阅读原文
在使用Thymeleaf模板引擎开发页面时，我们可以自定义一些通用的标签，来简化开发、降低代码量，下面我以开发中常见的下拉选为例，使用Thymeleaf自定义一个下拉选的公共组件。

一、引入依赖

<dependencies>
​
    <!-- web启动依赖 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
​
    <!-- thymeleaf依赖 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
​
    <!-- commons-lang3依赖 -->
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.9</version>
    </dependency>
​
    <!-- commons-collections依赖 -->
    <dependency>
      <groupId>commons-collections</groupId>
      <artifactId>commons-collections</artifactId>
      <version>3.2.2</version>
    </dependency>
​
    <!-- lombok依赖 -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
    </dependency>
​
    <!-- jdbc依赖 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
​
    <!-- mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
    </dependency>
  </dependencies>

二、基础配置

# 关闭thymeleaf缓存
spring.thymeleaf.cache=false
# web模块的日志为debug级别，便于分析问题
logging.level.web = debug
​
# 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/spring-boot-demo?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
#数据库用户名
spring.datasource.username=root
#数据库密码
spring.datasource.password=123580
#数据源
spring.datasource.type=com.mysql.cj.jdbc.MysqlDataSource
#数据库驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

三、创建数据表

-- ----------------------------
-- Table structure for dict_demo
-- ----------------------------
DROP TABLE IF EXISTS `dict_demo`;
CREATE TABLE `dict_demo` (
  `dict_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `dict_type` varchar(256) NOT NULL COMMENT '字典类型',
  `dict_value` varchar(256) NOT NULL COMMENT '字典值',
  `dict_label` varchar(256) DEFAULT NULL COMMENT '字典描述',
  PRIMARY KEY (`dict_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4;
​
-- ----------------------------
-- Records of dict_demo
-- ----------------------------
INSERT INTO `dict_demo` VALUES ('1', 'sex', '1', '男');
INSERT INTO `dict_demo` VALUES ('2', 'sex', '2', '女');

四、自定义标签

1、创建自定义标签注册类

@Component
public class CustomTag extends AbstractProcessorDialect{
  /**
   * 定义方言名称
   */
  private static final String NAME="系统自定义标签";
  
  /**
   * 定义方言属性
   */
  private static final String PREFIX="Fw";
  
  protected CustomTag() {
    super(NAME, PREFIX, StandardDialect.PROCESSOR_PRECEDENCE);
  }
 
  @Override
  public Set<IProcessor> getProcessors(final String dialectPrefix) {
    final Set<IProcessor> processor=new HashSet<>();
    //<Fw:select>标签
    processor.add(new CustomTagSelect(PREFIX));
    return processor;
  }
}

2、创建自定义标签构建类

public class CustomTagSelect extends AbstractElementTagProcessor {
  // 标签名
  private static final String TAG_NAME = "select";
​
  // 优先级
  private static final int PRECEDENCE = 10000;
​
  public CustomTagSelect(String dialectPrefix) {
    super(
        // 模板类型为HTML
        TemplateMode.HTML,
        // 标签方言前缀
        dialectPrefix,
        // 标签名称
        TAG_NAME,
        // 将标签前缀应用于标签名称
        true,
        // 无属性名称：将通过标签名称匹配
        null,
        // 没有要应用于属性名称的前缀
        false,
        // 优先级
        PRECEDENCE
    );
  }

  /**
   * 处理自定义标签 DOM 结构
   *
   * @param iTemplateContext            模板页上下文
   * @param iProcessableElementTag      待处理标签
   * @param iElementTagStructureHandler 元素标签结构处理器
   */
  @Override
  protected void doProcess(ITemplateContext iTemplateContext, IProcessableElementTag iProcessableElementTag, IElementTagStructureHandler iElementTagStructureHandler) {
    // 获取 Spring 上下文
    ApplicationContext applicationContext = SpringContextUtils.getApplicationContext(iTemplateContext);
    // 获取注入bean工厂
    AutowireCapableBeanFactory autowireCapableBeanFactory = applicationContext.getAutowireCapableBeanFactory();
    // 获取所需的bean，一般情况下这里我们直接使用Jdbc来操作数据库，因为它是一个公共组件，数据源不确定，所以要使用动态sql
    JdbcOperations jdbcOperations = autowireCapableBeanFactory.getBean(JdbcOperations.class);
    //select的id属性
    String id = iProcessableElementTag.getAttributeValue("id");
    //select的name属性
    String name = iProcessableElementTag.getAttributeValue("name");
    //option中value的值在数据表中的对应字段
    String colVal = iProcessableElementTag.getAttributeValue("colVal");
    //option中文本的值在数据表中的对应字段
    String colText = iProcessableElementTag.getAttributeValue("colText");
    //默认值
    String value = iProcessableElementTag.getAttributeValue("value");
    value = StringUtils.isBlank(value) ? "" : value;
    //select的扩展属性
    String otherAttrs = iProcessableElementTag.getAttributeValue("otherAttrs");
    //sql where之后的部分
    String options = iProcessableElementTag.getAttributeValue("options");
    //是否显示请选择
    String selectFlag = iProcessableElementTag.getAttributeValue("selectFlag");
    //表名称
    String tableName = iProcessableElementTag.getAttributeValue("tableName");
    StringBuffer result = new StringBuffer("<select><option value=''>--请选择--</option></select>");
    if(validParamIsNotNull(id,name,colText, colVal, tableName)) {
      //最终拼接的sql语句，这里可以使用jdbc来查询
      String selectSql = "select " + colVal + "," + colText + " from " + tableName + options;
      List<Map<String, Object>> mapList = jdbcOperations.queryForList(selectSql);
      if (mapList != null && mapList.size() >= 0) {
        result = new StringBuffer("<select ");
        result.append(" id='").append(id).append("'");
        result.append(" name='").append(name).append("'");
        if(StringUtils.isNotBlank(otherAttrs)) {
          result.append(" " + otherAttrs +" ");
        }
        result.append(">");
        if(StringUtils.isBlank(selectFlag) || (StringUtils.isNotBlank(selectFlag) && "true".equalsIgnoreCase(selectFlag))) {
          result.append("<option value=''>--请选择--</option>");
        }
        for (Map<String, Object> vo : mapList) {
          String dictValue = MapUtils.getString(vo, colVal);
          String dictName = MapUtils.getString(vo, colText);
          if (value.equals(dictValue)) {
            result.append("<option value='").append(dictValue).append("' selected>").append(dictName).append("</option>");
          } else {
            result.append("<option value='").append(dictValue).append("'>").append(dictName).append("</option>");
          }
        }
        result.append("</select>");
      }
    }
    // 创建将替换自定义标签的 DOM 结构
    IModelFactory modelFactory = iTemplateContext.getModelFactory();
    IModel model = modelFactory.createModel();
    // 这里是将字典的内容拼装成一个下拉框
    model.add(modelFactory.createText(result));
    // 利用引擎替换整合标签
    iElementTagStructureHandler.replaceWith(model, false);
  }
​
  /**
   * 验证参数是否不为空
   * @param params
   * @return true,不为空；false，为空
   */
  public static Boolean validParamIsNotNull(String ... params) {
    for(String param : params) {
      if(StringUtils.isBlank(param)) {
        return false;
      }
    }
    return true;
  }

3、使用自定义标签

<Fw:select id="sex" name="sex" colVal="dict_value" colText="dict_label" tableName="dict_demo" options=" where dict_type = 'sex'" value="1"/>

4、渲染效果

五、总结

1、在创建标签注册类时，需声明该类为Spring的一个组件类，即使用@Component注解，否则标签将不会生效。

2、自定义标签的优先级需和th标签同级，否则会导致和其他th标签连用时的数据解析问题。

3、自定义标签的实质就是通过标签实现了一个动态SQL的拼接，并将查询的数据组装成一个组件域，所以需要注意SQL拼接时的语法规范问题。

更多最新技术文章，请关注“冰点IT”公众号