NetilerUI 非权威指南

  • A+
所属分类:前端

目录结构

下面的目录结构可能是目前已有文档中最全的,它在通过 netiler 插件生成的目录结构的基础上又手动添加了一些目录结构,不过它们都是被后台支持解析的,在了解其目录的作用后你便可放心食用。

起步

Hello World

1). 在 web 目录下新建 project.xml 文件:

2). 在 nsp 目录下新建 index.nsp 文件:

注意: 这里我并没有创建 index/index.nsp 来对应 index/index.vm
原因:为了保证访问地址为:http://127.0.0.1:8080/example.demo/index.nsp 而不是 http://127.0.0.1:8080/example.demo/index/index.nsp

3). 在 velocity 目录下新建 index/index.vm 文件:

4). 打开火狐浏览器,在地址栏上输入 http://127.0.0.1:8080/example.demo/index.nsp 并回车。

至此,一个简单的 Hello World 项目就建立完了,只用了简单的 3 步。

现在我们来回顾一下步骤:

  1. 创建项目入口文件 project.xml
  2. 创建静态页面映射文件 index.nsp
  3. 新建了一个静态页面 index/index.vm

如果我们在 project.xml 文件中设置 vm2nsp=true 的话,我们第 2 步都可以省去了。
不过此时,你的访问路径应该与你的 velocity 下静态页面所在的路径一致。这里如果省去第 2 步就应该访问: http://127.0.0.1:8080/example.demo/index/index.nsp

project.xml

project.xml 是整个项目的入口文件,通过 project.xml 文件我们可以配置项目的访问路径:

nsp

关于 nsp 的作用,我认为公司很多人都理解错了:

之前我单纯的认为 nsp 文件有路由的功能,比如我访问 127.0.0.1:8080/ui.demo/index.nsp 它就会帮我路由到 index.vm 文件,其实这个是错误的。

它的本质其实是将你的 vm 文件原封不动的引入到 nsp 文件中,且它的作用远远不止如此,它还可以作为拦截器的入口,在访问页面之前触发后台的 action 方法。你甚至还可以在 nsp 文件写静态页面和引入脚本:

这里我们将前面写好的 nsp 文件稍作修改,然后还是访问刚才的地址。你会发现页面成功渲染,此时此刻我只想说 "wow!It's awesome!" (ps: 内心独白:酷毙了!)。看看效果吧:

NetilerUI 非权威指南

那么现在来看一看页面渲染后的源代码是什么样的:

当然,你在 nsp 页面中用多个 velocity 标签也是可以的。怎么样,看到这里你是不是就有很多想法了呢?如果你现在脑子里还没有很多骚想法也不要紧,后面我会讲讲我的骚思路,不一定符合公司目前的规范,但是肯定骚!

vm

vm 文件就是我们主要编写的页面文件了,它支持 velocity 模板语法。除此之外,其它语法与写 html 一模一样。

ultravires

发表评论

您必须才能发表评论!