WebX实践指南_页面模板(二)

简介: 正如前面所讲的,WebX中View使用Velocity模板引擎来实现的。VelocityVelocity是一个基于Java的模板引擎,它可以让视图的设计者在web页面中引用java代码中定义的数据对象和命令,从而实现真正意义上的MVC模式,保证了系统长期可维护性。下面简单地介绍下,Velocity的使用,关于Velocity的更详细介绍参考:http://velo

正如前面所讲的,WebX中View使用Velocity模板引擎来实现的。

Velocity

Velocity是一个基于Java的模板引擎,它可以让视图的设计者在web页面中引用java代码中定义的数据对象和命令,从而实现真正意义上的MVC模式,保证了系统长期可维护性。下面简单地介绍下,Velocity的使用,关于Velocity的更详细介绍参考:http://velocity.apache.org/engine/devel

Velocity中语句都是#开头的,变量的定义都是$开头的
注释代码:## #* *#
模板的引用: #include() #parse()

变量

变量定义和使用

    定义:#set($a="velocity")
    使用:$a $!a

变量名规范:字母开头,中间可以由下划线、连接符或者数字组成
!的作用是,为空的时候输出为空;如果不加velocity莫波引擎不会解析空的变量

    变量的属性: $customer.Address $customer.name #set($customer.name="liujiajie")
    变量的方法: $customer.getAddress() $customer.getName()

对变量属性的操作间接使用了对象的get/set方法

Q: Velocity模板变量都是var这样的字符?
A: 使用\转义, #set(var="hello");$var=var,对应的$var=hello

Q: 单引号双引号区别?
A: 单引号里的变量不会被解析。#literal() … #end可以用与一段代码的中,这样引擎也不会解析其中的内容。

变量类型

数组: {"A", "B", "C"} 访问.get(0)
Map: {"key1":"val1", "key2":"val2"}  
串: 连字符 $firstname$secondname

内置变量

[1..2] //range操作

变量操作

#set($id=1)
#set($id=$id+1)

语句

  • foreach
 #foreach( $name in $names)
     #if($name)
     #elseif()
     #end
 #end
  • if elseif else end
    逻辑的与或非 ! && ||
  • stop
    #stop 用于停止模板解析
  • macro
    定义宏 #macro(d) #end, 使用宏的时候 #d()
    当然宏中可以传递参数 #macro(tablerows colorsomelist)

关于更多Velocity的内容参照官网的介绍,这里的说明基本上能满足常见的业务处理,后续会针对Velocity模板的处理做专题的说明。

Velocity结合Html/CSS/JS

在实际的使用中,Velocity语法都是嵌入到HTML/CSS/JS文件中,其作用主要是实现动态数据的渲染控制。例如,典型的Table表处理时,对数据的渲染:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  #foreach($item in $items)
  <tr>
    <td>$item.month</td>
    <td>$item.savings</td>
  </tr>
  #end
</table>

WebX中的扩展

WebX中能够很好地支持Velocity模板引擎,同时添加了很多的服务支持,这里主要介绍page服务和url服务 。在webx-component.xml文件中有相关的配置:

<!-- 将beans暴露给模板。 -->
<services:pull>
    <pull-factories:utils />
    <pull-factories:rundata-tool />
    <pull-factories:csrfToken />
    <pull-factories:form-tool />
    <pull-factories:control-tool />
    <pull-factories:uris-tool />
</services:pull>

这方面的资料比较少,后续用到的时候再补全

page

$page的处理, web.xml page-tool用于处理$page对象
常见的使用方法:

$page.setTitle("")

uri

在示例程序中会看到:

#set($url = "$app1Link.setTarget('simple/download.do').addQueryData('filename', 'blob')")
<a href="$url">$url</a>

这里的$app1Link是哪里来的?又有啥作用?现在可以明确的是app1Link这个变量肯定不是velocity模板提供的,grep命令看一下,找到对应的代码在uris.xml文件中配置的。仔细看之后发现这里实际上是使用了URIBrokerService。

UriBrokerService简介

Web由有许多资源组成,比如HTML文档,图片,视频, css/javascript等。每一种资源都由一种叫做资源标示符(URI)的符号来定位。URI除了出现在Web页面上,对于程序员来说,有时也会将它作为字面值常量定义在程序当中。

这类静态录入的URI,在早期的系统开发过程中,的确让程序员屡试不爽。但随着系统功能的不断扩充,复杂性越来越高,静态录入URI使得整套系统变得难以扩展和维护。为了有效解决静态录入URI带来的维护和扩展性问题,URIBroker Service应运而生。

URIBroker Service的特点是以统一的配置和动态渲染的方式来生成URI字符串。在系统重构或移植时,你只需要修改URIBroker Service的统一配置文件 ,无需修改一行代码即可完成全系统URI的无缝迁移。URLBroker Service从本质上,解决了URI移植性,扩展性差等问题,同时也简化了开发人员的编码工作量。

Velocity模板中如何使用

常见的使用方式如下:

$applLink.setTarget("simple/download.do")
$applLink.setTarget("simple/download.do").addQueryData('filename', 'name')
目录
相关文章
|
8月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
159 10
|
8月前
|
消息中间件 运维 Cloud Native
UU 跑腿云原生化,突围同城配送赛道
UU跑腿自2015年上线以来,已覆盖全国200余座城市,拥有超过850万“跑男”,成为同城即时生活服务行业的头部企业。面对激烈竞争,UU跑腿通过创新获客方式和数字化业务平台建设,实现了波浪式用户增长。为应对快速增长的业务需求,UU跑腿积极推进云原生化,优化IT基础设施,实现了80%的微服务无缝迁移、1分钟内弹性伸缩、80%的运维成本降低及80%的变更稳定性提升,显著提高了系统的稳定性和效率,成为行业内的黑马。
338 16
|
11月前
|
存储 人工智能 搜索推荐
推荐 8 款必备生产力的实用工具与网站✨
【10月更文挑战第2天】大家好!今天我想和大家分享一些我每天使用的超级实用工具。这些工具已经成为我工作流程中不可或缺的一部分,帮助我更好地保持条理,提高效率,并完成更多任务!
237 1
推荐 8 款必备生产力的实用工具与网站✨
|
10月前
|
数据采集 存储 监控
Java爬虫:数据采集的强大工具
在数据驱动的时代,Java爬虫技术凭借其强大的功能和灵活性,成为企业获取市场信息、用户行为及竞争情报的关键工具。本文详细介绍了Java爬虫的工作原理、应用场景、构建方法及其重要性,强调了在合法合规的前提下,如何有效利用Java爬虫技术为企业决策提供支持。
|
SQL 分布式计算 DataWorks
dataworks常见问题之通过sql查询查看任务依赖关系如何解决
DataWorks是阿里云提供的一站式大数据开发与管理平台,支持数据集成、数据开发、数据治理等功能;在本汇总中,我们梳理了DataWorks产品在使用过程中经常遇到的问题及解答,以助用户在数据处理和分析工作中提高效率,降低难度。
217 1
|
关系型数据库 MySQL 数据安全/隐私保护
mysql密码正确但无法连接【彻底解决方案】
mysql密码正确但无法连接【彻底解决方案】
1753 0
mysql密码正确但无法连接【彻底解决方案】
VOSviewer分析知网文献以及图片导出
VOSviewer分析知网文献以及图片导出
2036 0
|
编解码 监控 算法
视频监控 智能交通 数据集(目标检测、跟踪)
总结一下视频监控的数据集,用于目标检测、跟踪,持续跟新中..........
2036 0
|
Linux Shell 数据格式
Linux脚本丨批量提取VCF文件指定样本数据
Linux脚本丨批量提取VCF文件指定样本数据
|
机器学习/深度学习 算法 异构计算
掌握机器学习中的“瑞士军刀”XGBoost,从入门到实战
XGBoost(eXtreme Gradient Boosting)是一种集成学习算法,它可以在分类和回归问题上实现高准确度的预测。XGBoost在各大数据科学竞赛中屡获佳绩,如Kaggle等。XGBoost是一种基于决策树的算法,它使用梯度提升(Gradient Boosting)方法来训练模型。XGBoost的主要优势在于它的速度和准确度,尤其是在大规模数据集上的处理能力。