在墨颀 CMS中的动态的文章是从我博客的API加载过来的，因为当前没有其他好的CMS当接口。之前直接拿博客的DB文件+Nodejs+RESTify生成了一个博客的API，而且可以支持跨域请求。
简单的博客构成
这次我们可以简单的做一个可以供移动平台阅读的博客，除了不能写作以外(ps:不能写作还能叫博客么)。对于写博客的人来说更多的只是写，而对于读者来说，他们只需要读，所以在某种意义上可以将博客的写和读分离开来。
对于用户来说，博客是由两个页面构建的:
- 博文列表(blogposts list)
- 博客内容(blogposts detail)
在这里我们先关注博文列表
博文列表
博文列表的内容一般有:
- 作者(Author)
- 标题(title)
- 创建时间/修改时间(Time)
- 关键词(Keywords)
- 摘要(Description)
- 链接(Slug)
一个简单的示例如下，也就是我们接下来要用到的1.json中的一部分。
[{
"title": "构建基于Javascript的移动web CMS入门——简介",
"slug": "use-jquery-backbone-mustache-build-mobile-app-cms",
"description": "看到项目上的移动框架，网上寻找了一下，发现原来这些一开始都有。于是，找了个示例开始构建一个移动平台的CMS——墨颀 CMS，方便项目深入理解的同时，也可以自己维护一个CMS系统。",
"keywords": [
"backbone",
"jquery",
"underscore",
"mustache"
],
"created": "2014-07-17 14:16:18.035763"
}]
这里基本上也就有了上面的要素，除了作者，当然因为作者只有一个，所以在里面写作者就是在浪费流量和钱啊。接着我们就是要把上面的内容读取出来放到CMS里。和之前不同的是，虽然我们可以用和墨颀CMS文件 JSON文件一样的方法，但是显然这种方法很快就会不适用。
移动CMS 获取在线数据
这里会用到Backbone的Model，我们先创建一个Model
var BlogPostModel = Backbone.Model.extend({
name: ‘Blog Posts‘,
url: function(){
return this.instanceUrl;
},
initialize: function(props){
this.instanceUrl = props;
}
});
我们需要在初始化的时候传入一个URL，以便在getBlog的时候用到，为了方便调试将url改为同路径的1.json文件
getBlog: function() {
var url = ‘/1.json‘;
var that = this;
collection = new BlogPostModel;
collection.initialize(url);
collection.fetch({
success: function(collection, response){
that.render(response);
}
});
},
这样当成功获取数据的时候便render页面。最后的HomeView.js代码如下所示:
define([
‘jquery‘,
‘underscore‘,
‘mustache‘,
‘text!/index.html‘,
‘text!/blog.html‘
], function($, _, Mustache, indexTemplate, blogTemplate) {
var BlogPostModel = Backbone.Model.extend({
name: ‘Blog Posts‘,
url: function(){
return this.instanceUrl;
},
initialize: function(props){
this.instanceUrl = props;
}
});
var HomeView = Backbone.View.extend({
el: $(‘#aboutArea‘),
initialize: function(){
this.getBlog();
},
getBlog: function() {
var url = ‘/1.json‘;
var that = this;
collection = new BlogPostModel;
collection.initialize(url);
collection.fetch({
success: function(collection, response){
that.render(response);
}
});
},
render: function(response) {
this.$el.html(Mustache.to_html(blogTemplate, response));
}
});
return HomeView;
});
这样也就意味着我们需要在index.html中创建一个id为aboutArea的div。接着我们需要创建一个新的Template——blog.html，它的内容就比较简单了，只是简单的Mustache的使用。
{{#.}}
<h2><a href="{{slug}}" alt="{{title}}">{{title}}</a></h1>
<p>{{description}}</p>
{{/.}}
{{#.}}及{{/.}}可以用于JSON数组，即循环，也可以是判断是否存在。
最后的结果便是:
<h2><a href="use-jquery-backbone-mustache-build-mobile-app-cms" alt="构建基于Javascript的移动web CMS入门——简介">构建基于Javascript的移动web CMS入门——简介</a></h2> <p>看到项目上的移动框架，网上寻找了一下，发现原来这些一开始都有。于是，找了个示例开始构建一个移动平台的CMS——墨颀 CMS，方便项目深入理解的同时，也可以自己维护一个CMS系统。</p>
把description去掉，再修改一个CSS，便是我们在首页看到的结果。
下一次我们将打开这些URL。
其他
如何查看是否支持JSON跨域请求
本次代码下载:https://github.com/gmszone/moqi.mobi/archive/0.1.1.zip
一个简单的工具就是
curl I -s http://example.com
在这里我们查看
curl -I -s http://api.phodal.net/blog/page/1
应该要返回 Access-Control-Allow-Origin: *
HTTP/1.1 200 OK Server: mokcy/0.17.0 Date: Thu, 24 Jul 2014 00:38:19 GMT Content-Type: application/json; charset=utf-8 Content-Length: 3943 Connection: keep-alive Vary: Accept-Encoding Access-Control-Allow-Origin: * Access-Control-Allow-Headers: X-Requested-With Cache-Control: max-age=600
CMS效果: 墨颀 CMS
QQ讨论群: 344271543
项目: https://github.com/gmszone/moqi.mobi
构建基于Javascript的移动CMS——生成博客(一),布布扣,bubuko.com