codecamp

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

介绍template

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

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

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

1. template基础语法

在真正使用之前, 我们先来学习一下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" })};

2. 转义字符

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

3. API

  • 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.htmlcontent.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快速开发指南(4) - 详细了解httpd库的作用
Lua web快速开发指南(6) - Cache、DB介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }