lua-web快速开发指南5-利用template库构建httpd模板引擎

jiezi

6 年前

模板引擎是为了使用户界面与业务数据（内容）分离而产生的, 其本身并不是一种深奥的技术.

template 模板引擎首先会将合法的模板编译为 lua 函数, 然后将模板文件和数据通过模板引擎生成一份 HTML 代码.

cf 的 admin 库整使使用了 template 来构建服务端渲染页面, 并利用单页面 +iframe 模式快速完成 lua 后台开发.

在真正使用之前, 我们先来学习一下 template 常见的一些基本语法:

{{lua expression}} – lua expression是一段 lua 表达式; 作用为输出表达式的结果, 一些特殊符号将会被转义;
{* lua expression *} – lua expression是一段 lua 表达式; 作用为输出表达式的结果, 不会转义任何符号;
{% lua code %} – 执行一段 lua 代码, 如: {% for i = x, y do %} ... {% end %};
{# comments #}– comments 仅作为注释, 不会包含在输出字符串内. 这段语法的作用类似 lua 内的 -- 与--[[]];
{(template)} – 导入其它模板文件; 同时支持传参: {(file.html, { message = "Hello, World"})};

& 将会转义为 &
< 将会转义为 <
> 将会转义为 >
" 将会转义为 "
' 将会转义为 '
/ 将会转义为 /

template.compile(html)
参数 html 为字符串类型, 可以是: 模板文件路径、

此方法返回一个渲染函数, 调用这个函数并传入一个 table(key-value)作为参数则可以在模板文件内直接引用.
template.precompile(view, path, strip)
此方法用来将 view 预编译为 lua 的二进制代码块, strip 是一个 bool 类型用来确定是否包含调试信息.
template.load(path)
此方法用来重写 template 内部的加载行为; 默认的模板加载流程为: 检查缓存 -> 读取文件 -> 解析文件 -> 渲染 -> 输出;

path 字段为需要加载的文件路径或模板、html 代码;
template.print(html)
此方法用来重写 template 内部渲染后的输出行为; 默认的输出行为: print
template.caching(Enable)
此方法用来告诉 template 是否缓存; 默认为 true.

现在尝试使用模板引擎完成一个静态页面的数据导入工作渲染一个页面并展示给用户看.

首先, 导入 template 库local template = require "template". 并且将目前我们熟知的编程语言名称都罗列出来.

local languages = {'C', 'C++', 'Java', 'golang', 'Rust', 'Ruby', 'Python', 'perl', 'Lua'}

然后, 我们在 app 目录下新建一个 view 目录, 并在 view 目录下新建一个名字为 base.html 的文件。内容如下:

<html>
  <head>
    <title>{*title*}</title>
  </head>
  <body>
    <span><b>{*title*}:</b></span>
    <ul>
      {% if type(languages) == 'table' then %}
        {% for index, lang in ipairs(languages) do %}
          <li>{*index..'.'..lang*}</li>
        {% end %}
      {% end %}
    </ul>
    {# 没错, 注释不会展示给用户看到! #}
  </body>
</html>

最后完成一个 /languages 的路由注册, 将我们刚刚完成的模板渲染出来.

local template = require "template"
app:use('/languages', function(content)
  template.cache = {}
    local languages = {'C', 'C++', 'Java', 'golang', 'Rust', 'Ruby', 'Python', 'perl', 'Lua'}
  return template.compile("view/base.html"){
        title = '语言列表',
    languages = languages
  }
end)

template.cache = {}的意思是, 每次都重新刷新缓存去读取文件, 这样方便我们进行调试.

最后打开http://localhost:8080/languages 查看效果.

当一个项目的业务需求变得非常多的时候, 即是一个单纯的模板页面也会变得非常庞大并且不容维护与阅读.

现在我们来尝试将上面的模板进行模块化.

首先, 我们继续在 app 目录新建 head.html 与content.html. 然后将这些代码拷贝进去:

{# 这是 head.html 的内容 #}
<title>{*title*}</title>

{# 这是 content.html 的内容 #}
<span><b>{*title*}:</b></span>
<ul>
  {% if type(languages) == 'table' then %}
    {% for index, lang in ipairs(languages) do %}
      <li>{*index..'.'..lang*}</li>
    {% end %}
  {% end %}
</ul>
{# 没错, 注释不会展示给用户看到! #}

然后将原来的 base.html 修改为:

<html>
  <head>
    {(view/head.html)}
  </head>
  <body>
    {(view/content.html)}
  </body>
</html>

最后, 由于服务器会自动刷新模板缓存, 我们只需要再次刷新浏览器就能查看效果.

-- main.lua
local httpd = require "httpd"
local app = httpd:new("app")

local template = require "template"
app:use('/languages', function(content)
    local languages = {'C', 'C++', 'Java', 'golang', 'Rust', 'Ruby', 'Python', 'perl', 'Lua'}
    template.cache = {}
  return template.compile("view/base.html"){
        title = '语言列表',
    languages = languages
  }
end)

app:listen("0.0.0.0", 8080)

app:run()

更多 template 用法可以参考 cf 的 admin 库.

下一章我们继续学习如何使用缓存与数据库.

lua-web快速开发指南5-利用template库构建httpd模板引擎

介绍 template

1. template 基础语法

2. 转义字符

3. API

开始使用

将一个模板分解到多个文件中

完整代码示例

更多

继续学习