PandaJS 使用说明(1.5)：页面渲染与数据库操作
PandaJS 在服务器端的页面渲染也采用 JQuery Template 的语法，而数据库操作接口的语法与 Mongo Shell 上直接执行的原生语法非常接近。这使得我们可以在服务器端和客户端共用页面渲染代码，并且可以直接使用从前端传递过来的 JavaScript 对象与数据库进行交互。
不过，对客户端提交的数据进行校验也是必要的，这部分代码也可以在服务器端和客户端之间共用，这个话题将在后面的文章中提及，这里暂不考虑。
运行效果
代码编写完成后，可以启动应用并输入
http://localhost 访问页面。
界面如下图所示：
这个例子非常简单，只包括一个 users 列表，对每条数据可以执行两个操作：
1. 修改 description，并点击 Save 进行保存
2. 点击 Delete 删除对应的 user
最后一行用于增加 user ，可以执行两个操作：
1. 输入 name 和 description，并点击 Save 增加记录
2. 点击 Clear ，清空 name 和 description ，重新输入
第一次请求返回的是已经在服务器端渲染过的页面，而更新 users 列表后将会使用客户端 JS 重新渲染界面。
包含页面模板的 HTML
以下是包含模板的 html 文件，也就是后续需要进行操作的文件(webapp/index.html)：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>DBO Example</title>
</head>
<body>
<div align="center">
<h1>DBO Example</h1>
<div id="error"> </div>
<table id="content"> </table>
</div>
<script id="content-tmpl" type="tmpl">
<tr align="left">
<th class="w100">User</th>
<th class="w150">Description</th>
<th class="w100" colspan="2">Operation</th>
</tr>
<tr align="left">
<td> <input class="w90"/> </td>
<td> <input class="w140" /> </td>
<td> <a href="##">Save</a> </td>
<td> <a href="##">Clear</a> </td>
</tr>
</script>
<script id="user-tmpl" type="tmpl">
<tr align="left">
<td> ${name} </td>
<td> <input class="w140" value="${desc}" /> </td>
<td> <a href="##">Save</a> </td>
<td> <a href="##">Delete</a> </td>
</tr>
</script>
<script src="js/lib/jquery.js"> </script>
<script src="js/lib/jquery.tmpl.js"> </script>
<script src="js/lib/json.js"> </script>
<script src="js/lib/panda.js"> </script>
<script src="js/both/views.js"> </script>
<script src="js/index.js"> </script>
</body>
</html>
【content-tmpl】：包含表格的列标题和最后一行（用于增加 user ）。
【user-tmpl】：表格的一行，包含 user 数据。
需要注意的是，内容为空的 div、table、script 元素中都增加了空格，这是因为服务器端渲染的序列化实际上使用的是 JAVA XML DOM 操作，会将这些内容为空的元素的起始标记和结束标记合并，如合并为 "<div />"、"<table />"、"<script />"，这在浏览器中显示时会带来一些问题。
页面渲染代码
在 webapp/js/both/views.js 中，我们可以看到如下代码：
// @include "../../../scripts/spket.js"
var views = {};
views.index = function($, users) {
var content = $("#content-tmpl").tmpl(),
rows = $("#user-tmpl").tmpl(users);
$("#content").html(content);
$("#content tr:first").after(rows);
$("#error").hide();
};
这里实现了 views.index(...) 方法，接收两个参数：jQuery 对象和 users 数据，然后完成对页面的渲染。
客户端 JS
客户端与该页面对应的 JS 文件是 webapp/js/index.js ：
// @include "../../scripts/spket.js"
$(function(){
bind();
// 绑定事件
function bind() {
var rows = $("#content tr:not(:last) a"),
last= $("#content tr:last a");
rows.filter(":even").click(update);
rows.filter(":odd").click(remove);
last.eq(0).click(add);
last.eq(1).click(clear);
}
// 修改 user
function update() {
var $tr = $(this).parent().parent(),
name = $tr.find("td:first").html().trim(),
desc = $tr.find("input").val();
save("users.update", { name: name, desc: desc });
}
// 删除 user
function remove() {
var $tr = $(this).parent().parent(),
name = $tr.find("td:first").html().trim();
var req = { action: "users.remove", params: name };
panda.post(req, show);
}
// 增加 user
function add() {
var $input = $(this).parent().parent().find("input"),
name = $input.eq(0).val(),
desc = $input.eq(1).val();
save("users.add", { name: name, desc: desc });
}
// 清空输入
function clear() {
var $input = $(this).parent().parent().find("input");
$input.val("").eq(0).focus();
}
// 在修改或增加 user 时调用
// 发送请求到服务器端，返回后渲染页面
function save(action, user) {
var req = { action: action, params: user };
panda.post(req, show);
}
// 每次修改数据时重新渲染页面、绑定事件
function show(users) {
views.index($, users);
bind();
}
});
服务器端 JS （DBO）
数据库相关的服务器端 JS 位于 scripts/app/dbo/users.js。
它将根据获得的参数，对 MongoDB 的 conllection 进行操作 。
dbo.users 对象实现了以下四个方法：
1. list ：获取 users 列表；当 users 为空时，进行数据初始化
2. add：创建 user，返回 users 列表
3. update：更新 user，以 name 作为查询条件，更新特定的 user ，返回 users 列表
4. remove ： 删除 user，以 name 作为查询条件移除特定的 user ，返回 users 列表
// @include "../../../scripts/spket.js"
dbo.users = function(){
var users = panda.db.get("users");
return {
list: function() {
if (!users.count()) { init(); }
return users.list().$sort({ name: 1 });
},
add: function(user) {
users.insert(user);
return this.list();
},
update: function(user) {
var q = { name: user.name };
users.update(q, user, true, false);
return this.list();
},
remove: function(name) {
users.remove({ name: name });
return this.list();
}
};
function init() {
panda.db.eval(function(){
var users = db.users;
users.drop();
users.ensureIndex({ name: 1 }, { unique: true });
users.insert({ name: "user1", desc: "desc1" });
users.insert({ name: "user2", desc: "desc2" });
users.insert({ name: "user3", desc: "desc3" });
});
}
}();
服务器端 JS （PAGE）
页面请求默认映射到 page.index，url 格式为
http://baseURL/method/params[0]/params[1]/...
baseURL 这里对应的是 localhost，method 这里对应的是 index （省略），method 之后的参数以 "/" 分隔，作为 params 数组；
也可以结合传统的传参方式：
http://baseURL/method/params[0]/params[1]?a=xxx&b=yyy，
然后用 req,getParameter(...) 获取参数。
服务器端页面渲染 JS 位于 scripts/app/page/index.js：
// @include "../../../scripts/spket.js"
page.index = function(params, req, res) {
return panda.render("index", function($){
views.index($, dbo.users.list());
});
};
通过 dbo.users.list() 获取 users 列表，并在 panda.render 的回调函数中调用公共的页面渲染函数进行界面渲染。
服务器端 JS （API）
供客户端 JS 调用的服务器端 API 的实现位于 scripts/app/api/users.js：
// @include "../../../scripts/spket.js"
api.users = {
add: function(params, req, res) {
return dbo.users.add(params);
},
update: function(params, req, res) {
return dbo.users.update(params);
},
remove: function(params, req, res) {
return dbo.users.remove(params);
}
};
页面渲染 API 简述
页面渲染 API 的使用可以参考 scripts/test/lib/render 中的测试案例（通过 scripts/test/lib/render.js 运行） 。
首先，PandaJS 在服务器端提供对 jQuery 和 jQuery Template 语法的支持，但不包括 data 和 event。
请参考：
http://api.jquery.com/
http://api.jquery.com/category/plugins/templates/
这里不再重复说明。
下面以子页面的组装为例进行说明。
我们可以用两种方式实现页面组装：
方式一：
1.对子页面进行渲染，渲染目标为一个临时的 div，渲染完成后将 body 的内容替换为这个临时的div。
2.将子页面渲染结果插入到父页面中的指定位置
var htmlData = { htmlBody: "<b>HTML</b>" },
textData = { textBody: "Text" };
// 第一个参数为 true 表示渲染为子页面，不加入 doctype 等
var childHtml = pure.render(true, "child", function($) {
var $html = $("#child-html-tmpl" ).tmpl(htmlData),
$text = $("#child-text-tmpl" ).tmpl(textData)
var $target = $("#target").append($html).append($text);
$("body").html($target.html());
});
return pure.render("test", function($) {
$("#b").append(childHtml);
});
输入:
test.html
<div id="a" name="pre-middle-aend" words="word xxx">
<div id="b" name="pre" words="xxxx word" class="clz">
<h1 id="h1">John</h1>
</div>
</div>
child.html
<div id="target"></div>
<script id="child-html-tmpl" type="text/x-jquery-tmpl">
<p>{{html htmlBody}}</p>
</script>
<script id="child-text-tmpl" type="text/x-jquery-tmpl">
<p><b>${textBody}</b></p>
</script>
输出：
<DIV id="a" name="pre-middle-aend" words="word xxx">
<DIV class="clz" id="b" name="pre" words="xxxx word">
<H1 id="h1">John</H1>
<P><B>HTML</B></P>
<P><B>Text</B></P>
</DIV>
</DIV>
方式二：
1.将子页面的模板添加到父页面中
2.在父页面中统一进行渲染
var htmlData = { htmlBody: "<b>HTML</b>" },
textData = { textBody: "Text" };
var childTmpl = pure.render(true, "child-tmpl");
context.html = pure.render("test", function($) {
$("body").append(childTmpl);
var $html = $("#child-html-tmpl" ).tmpl(htmlData),
$text = $("#child-text-tmpl" ).tmpl(textData)
$("#b").append($html).append($text);
});
输入：
test.html （同上，略）
child-tmpl.html
<script id="child-html-tmpl" type="text/x-jquery-tmpl">
<p>{{html htmlBody}}</p>
</script>
<script id="child-text-tmpl" type="text/x-jquery-tmpl">
<p><b>${textBody}</b></p>
</script>
输出：（同上，略）
数据库操作 API 简述
页面渲染 API 的使用可以参考 scripts/test/lib/db 中的测试案例（通过 scripts/test/lib/db.js 运行） 。
这里选择其中的几个重要的 API 进行介绍。
【通过 eval 进行数据的初始化】
数据初始化的脚本 before.js 调用 pure.db.eval(func) 进行数据的初始化，传入一个函数，函数中的代码将直接在 MongoDB 运行，可以在这里查看原生的 MongoDB js 的写法：
http://www.mongodb.org/display/DOCS/SQL+to+Mongo+Mapping+Chart
pure.db.eval(function(){
var users = db.users;
users.ensureIndex({ name: 1 });
users.insert({ name: "user1", desc: "desc1" });
users.insert({ name: "user2", desc: "desc2" });
users.insert({ name: "user3", desc: "desc3" });
});
虽然 eval 很酷，但根据官方文档说明，运行 eval 时将阻塞所有的其他操作。
因此，最好只在数据初始化、数据迁移等特殊应用场景使用它。
【list (find)】
list 是我根据自己的习惯为 MongoDB 原生 JS 中的 find 方法起的一个别名，仍然使用find也是可以的。
list 函数名前带上 “$” 表示将结果转换为 JavaScript 数组，否则将继续保留 DBCursor 形式，以便进行排序等后续操作。
// 通过 pure.db.get 获取名为 "users" 的 collection
var users = pure.db.get("users"),
// 获取所有 user
listAll = users.$list(),
// 获取第 2-4 个 user
listWithLimit = users.list().skip(1).$limit(2),
// 获取 name 大于 "user1"，小于 "user3" （按字典序）的 user
listWithCompare = users.$list({ name:{ $gt:"user1", $lt:"user3" } }),
// 获取 name 等于 "user1"，或者 desc 等于 "desc2" 的 user
listWithOr = users.$list({ $or:[{ name:"user1"}, {desc:"desc2"} ] }),
// 获取所有 user，并按 desc 升序排列
listWithOrder = users.list().$sort({ desc: 1 }),
// 获取所有 user，并按 desc 排除重复，保持 desc 唯一性
listWithDistinct = users.distinct("desc"),
// 只获取 desc 字段，并且按 desc 升序排列
// 第一个参数，也就是条件参数为空， 表示不进行过滤，获取所有记录
listSomeField = users.$list({}, { desc:1 }),
// 用正则表达式进行获取，获取 name 中包含 "user" 的 user
listWithLike = users.$list({ name: /user/ }),
// 获取存在 "age" 属性的 user
listWithExists = users.$list({ age: { $exists: true } });
【insert,update,remove】
使用 insert 插入数据，update 更新数据，remove 删除数据；也可以使用 save 插入或更新数据。
// 插入 name 为 "user4", desc 为 "desc4" 的 user
users.insert({ name: "user4", desc: "desc4" });
// 更新 name 为 "user1" 的 user
var query = { name: "user1" };
users.update(query, { $set: { desc: "new desc" } });
// 更新 name 包含 "user" 的所有 user
// 第三个参数表示是否在记录不存在的情况下插入一条记录
// 第四个参数表示批量更新
var query = { name: /user/ };
users.update(query, { $set: { desc: "new desc" } }, false, true);
// 删除 name 为 "user1" 的 user
users.remove({ name: "user1" });
关于 upate 的更多用法，可以参考这里：
http://www.mongodb.org/display/DOCS/Updating
分享到：
相关推荐
第三章：页面渲染架构设计与性能优化.pdf
VRay Adv 1.5 RC5 渲染器，是一款在 3ds max 上的高级光能传递渲染插件，无任何限制的版本。本 VRay版本支持 3dsmax9 32bit/64bit 版本。 【安装及使用方法】 使用方法： 1.在安装前必须卸载先前安装过的 Vray 英文...
VRay Adv 1.5 RC5 渲染器，是一款在 3ds max 上的高级光能传递渲染插件，无任何限制的版本。本 VRay版本支持 3dsmax9 32bit/64bit 版本
VRVray Adv1.5 SPMAX 2009渲染器
VRay_1.5 3Dmax渲染工具
VRay Adv 1.5 SP2 高级渲染器，这是一款众所周知的，运行在 3ds max 上的高级光能传递渲染插件，无水印，无任何限制的版本。本 VRay版本支持 3dsmax2009_32bit 版本。 --------------------------------------------...
max 2009高级渲染器 VR1.5简体中文版
系统分为管理员和普通用户两种角色。...使用themeleaf进行模板渲染 ## 运行步骤 第一步：sql导入mysql数据库 .sql 第二步：导入项目 第三步：配置jdk环境 第四步：配置maven环境 第五步：配置你得数据库
3Dmax 渲染器 玻璃 Ray Adv 1.5 RC3 渲染器，是一款在 3ds max 上的高级光能传递渲染插件，无任何限制的版本。本 VRay版本支持 3dsmax6~7~8~9 版本。
Maya教程：海龟渲染器(for_maya)渲染烘焙流程
完整的3DMAX的插件，有注册文件和说明。用于VR渲染。
VR1.5中文破解版3DMax渲染器vray高级渲染器简体中文版VRay1.5RC3，为你解决渲染器的烦恼
V-RAY1.5渲染器 max2009，包含注册机
很好的渲染器，用与3dsmax2009英文版。这是目前比较好的一款渲染软件。
内容全部是以案例操作为主，案例全部精选国外高手最为经典的案例，经典案例一网打尽，为您带来最为全面、经典、详尽的案例盛宴。 本书是材质渲染部分，全书共有20个大型材质案例组成，内容全面而详实，包括了各种...
VRay渲染器的特点与版本 1、真实性 完全可以得到照片级效果、阴影、材质真实 2、全面性 完全可以胜作室内、建筑外观、建筑动画、工业造型、影视动画等个领域 3、灵活性、高效性 可根据实际需要调整参数，从面自由...
VRay[1].Adv.1.5.RC3.渲染器汉化版
vray adv v1.5 rc5 高级渲染器下载