用baas实现文章管理功能的例子

需求：实现从数据库中查询文章（包括内容和标题、日期等信息），在手机端显示。

技术实现：由于只需要进行“查询”，没有新增和修改、删除的操作，而且也没有对文章有权限方面的限制，所以没有必要用BIZ来做，BAAS即可实现。

具体步骤：

1、数据库中新建数据表，可以用BIZ的新建概念关系来实现，也可以在数据库直接新建表。

2、考虑到用BIZ的复杂性（权限、OAUTH转URL），用简单而直接的BAAS来建立action，在baas中新建一个"服务"，IDE会自动生成一个service.m文件，在该文件中新建数据表aciton，选择我们新建的表格，这里可以选择query和save（不包括新增和删除，这是baas和biz的最大差别），由于本案例只需要查询，所以这里只建立queryaction即可。至此，我们就有了一个可以直接查询数据库的action文件，当需要时就可以调用，然后通过过滤器（filter）来约束结果集。

3、有个aciton，下面就可以到UI2中建立前端页面。我们在对应目录下建立W文件，通过向导来实现，这里我选择的是“微网2”模板，根据向导指示填写必要参数后即可。

4、对生成内容进行裁剪和润色，首先按照编码规范，将“mainactivity.w”和"mainactivity.js"文件重命名为“index.w"和“index.js”，这样一眼就能看出来入口页面（默认为index）。

5、修改index.js里的参数。

（1）定义可被调用的页面，这里定义了main、content1和AAAA四个页面。

var Model = function() {

this.callParent();

var shellImpl = new ShellImpl(this, {

"contentsXid" : "pages",

"pageMappings" : {

"main" : {

url : this.transUrl('./main.w')

},

"content1" : {

url : this.transUrl('./contents/content1.w')

},

"AAAA" : {

url : this.transUrl('./list.w?title=AAAA')

}

"BBBB" : {

url : this.transUrl('./list.w?title=BBBB')

}

}

}

});

};

（2）定义页面初始化的时候，直接指向main页面

Model.prototype.modelLoad = function(event) {
justep.Shell.showPage("main");
};

（3）定义transUrl事件

Model.prototype.transUrl = function(url) {
return require.toUrl(url);
};

6、从上一步可以看出，当用户调用index.w的时候，在页面初始化的modeload事件响应中，直接跳转到了mian.w，所以我们再来main.w是如何继续执行的。

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");


var Model = function() {
this.callParent();
};


// 图片路径转换
Model.prototype.transUrl = function(row) {
var url = (typeof row === "object") ? "./img/" + row.val("imageName") : row
return require.toUrl(url);
};


Model.prototype.openPageClick = function(event) {
var row = event.bindingContext.$object;
var pagename = row.val("pagename");
// if ("bzqthb" === pagename) {
// window.location = "httP://xxxxx";
// return;
// }
if (pagename) {
justep.Shell.showPage(pagename);
}
};


Model.prototype.contentstoClick = function(event) {
var imgcontents = this.comp("imgcontents");
var activeXid = imgcontents.getActiveXid();
var content = imgcontents.getContent(activeXid);
var url = $(content.$domNode).attr("url");
if (url)
justep.Shell.showPage(require.toUrl(url));
};


return Model;
});

7、然后到list.w中进行设置。

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");


var Model = function() {
this.callParent();
};


Model.prototype.open = function(event) {
var row = event.bindingContext.$object;
var url = "./detail.w";
justep.Shell.sh.showPage(require.toUrl(url), {
rowid : row.val("FID")
});
};


Model.prototype.backBtnClick = function(event) {
justep.Shell.closePage();
};


Model.prototype.modelLoad = function(event){
var title=this.getContext().getRequestParameter('title');


var titleName="";
switch(title){
case 'AAAA':
titleName='页面一 ';break;
case 'BBBB':
titleName='页面二';break;
}
var o={"title":titleName};
this.comp("titleBar1").set(o);


var filter =" FLMBS='"+title+"' and FTYPE='true'";
this.comp("baasData").setFilter("_filter", filter);
this.comp("baasData").refreshData();
this.comp("list").refresh();
};


return Model;
});

8、最后到detail.w中进行设置。

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");


var Model = function() {
this.callParent();
};


Model.prototype.backBtnClick = function(event) {
justep.Shell.closePage();
};


Model.prototype.modelParamsReceive = function(event) {
var rowid = this.params.rowid;
if (!rowid){
alert("未获取到参数");
return;
}

var mainData = this.comp("baasData");
mainData.clear();
//var url = require.toUrl("./data.json");
//$.getJSON(url, function(data) {
// mainData.newData({
// defaultValues : data[rowid]
// });
//});

var filter =" FID ='"+rowid+"'";
this.comp("baasData").setFilter("_filter", filter);
this.comp("baasData").refreshData();
};


return Model;
});