JavascriptベースのモバイルCMSの構築——ブログの生成(一)

墨高CMSの動的な文章は私のブログのAPIからロードされたもので、現在他の良いCMSがインタフェースになっていないからです.以前にブログを直接持っていたDBファイル+Nodejs+RESTifyは、ブログのAPIを生成し、ドメイン間リクエストをサポートすることができます.

簡単なブログ構成

今回は、モバイルプラットフォームで読むことができるブログを簡単に作ることができます.書くことができない以外は(ps:書くことができないのにブログと呼ぶことができますか).ブログを書く人にとっては書くだけで、読者にとっては読むだけなので、ある意味でブログの書くことと読むことを分離することができます.
ユーザーにとって、ブログは2つのページで構築されています.
ブログリストブログコンテンツ(blogposts detail)ここではまずブログリストに注目します

ブログリスト

ブログリストの内容は一般的に次のとおりです.
著者(Author)タイトル(title)作成時間/変更時間(Time)キーワード(Keywords)要約(Description)リンク簡単な例は以下の通りです.つまり、次に使用する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を同じパスの1に変更するには、getBlogで使用するために初期化時にURLを入力する必要があります.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ページが表示されます.最後のホームビュー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にaboutAreaのidを持つ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