koa-demo

## 简介

koa-demo

koa-demo助力前端开发,提供动静结合的前端项目server功能;配合狸猫使用,可以将demo项目模板翻译成VM、PHP、Node等目标项目模板,促进前后端分离。

tap命令行工具集成了koa-demo,支持通过命令行启动前端项目server,具体请参考tap文档。

通过tnpm安装:

tnpm install koa-demo

在nodejs代码中使用:

var koa = require('koa');
var app = koa();
var demo = require('koa-demo');
app.use(demo({
  path: '/Users/xhowhy/dev/tm/detail-m'
}));
app.listen(3000);

koa-demo支持基本的静态资源访问,用来在本地访问项目静态资源,例如:

http://127.0.0.1/demo/index.html
http://127.0.0.1/src/seed.js
http://127.0.0.1/src/base.css

koa-demo基于nunjucks、feloader和if提供了动态页面开发的功能,可以用在动态demo的开发过程中,动态文件以.ntpl为扩展名:

http://127.0.0.1/src/page/index.ntpl?param=1

模板语法请参考狸猫(Civet)制定的标准模板语法。

当动态页面开发完成后,可以通过狸猫(Civet)对项目模板进行转换,转换成VM、PHP等项目模板。

以tm/sample为例,基于koa-demo开发的项目,具有以下目录结构:

└── src                      #源码目录                  
    ├── global.json            #mui-seed 【FELoader也需要依赖该文件分析依赖关系】
    ├── index.css              #页面css文件
    ├── index.js               #页面js文件
    ├── mod1.css               #模块css文件
    ├── mod1.js                #模块js文件
    ├── mod1.ntpl              #模块模板文件
    ├── page                   
    │   ├── index.ntpl         #页面模板文件
    │   └── layout
    │       └── index.ntpl     #页面layout模板文件
    ├── seed.js                #项目依赖关系(用于同步加载)
    └── seed.json              #项目依赖关系(用于异步加载)
├── data                     #模拟模板数据目录
    ├── page                   
    │   └── index.json         #页面数据文件
    └── mod1.json              #模块数据文件
    
  1. 在src目录下创建page目录,在page目录下创建index.ntpl文件
  2. 在src/page目录下创建layout目录,在layout目录下创建index.ntpl
  1. 在src下创建mod1.ntpl,在page/index.ntpl通过{% template "mod1" %}引入
  2. 在page/layout/index.ntpl中补充完整的html框架代码后,在<body></body>之间添加{{page_placeholder}}
  3. 修改page/index.ntpl后,就可以访问你创建的页面:http://127.0.0.1:3000/src/page/index.ntpl
  1. 新增seed文件

    1. 在项目根目录下新增global.json,内容为最新版的mui-seed,用来引入公共组件(例如kissy、mui)
    2. 通过gulp-code的依赖生成功能(dep),生成项目依赖文件seed.json
  2. 在模板中声明依赖,例如:

    • 在mod1.ntpl中声明依赖mod1.js:{% require "sample/mod1", "head" %}

    • 在mod1.ntpl中声明依赖mod1.css:{% require "sample/mod1.css", "head" %}

    • 在page/index.ntpl中依赖index.js:{% require "sample/index", "foot" %}

    • 在page/index.ntpl中依赖index.css:{% require "sample/index.css", "foot" %}

      注:
      ① 第二个分组参数决定assets的输出位置(“head” or “foot”,目前仅支持这两这种);
      ② 针对css,如果不带第二个参数,内置的默认值为“head”;
      ③ 针对js,如果不带第二个参数,内置的默认值为“foot”。

  3. 插入assets占位

    • 说明:css的占位在页头,js的占位在页尾

    • 步骤:

      1. src/page/layout/index.ntpl中的head标签之间添加{% injectStyle "head" %},在</body>标签前添加{% injectScript "foot" %}
      2. 这时候再访问http://127.0.0.1:3000/src/page/index.ntpl,就可以看到页头和页尾分别插入了模板中依赖的css和js

      注:
      ① injectScript、injectStyle的参数“head”或“foot”必带

  • requestURL: 当前请求的url,通常用于环境判断,在模板中通过__request.requestURL获取
  • user-agent: ua,通常用于设备判断,在模板中通过__request.headers.get('user-agent')获取
  • query: url中的QueryString Map,例如在模板中通过{{__request.url.query["xxx"]}}访问xxx参数的值

具体请看内网的tm/sample仓库。