構建基於Javascript的移動CMS——產生部落格(一)，javascriptcms

構建基於Javascript的移動CMS——產生部落格(一)，javascriptcms

在墨頎 CMS中的動態文章是從我部落格的API載入過來的，因為當前沒有其他好的CMS當介面。之前直接拿部落格的DB檔案+Nodejs+RESTify產生了一個部落格的API，而且可以支援跨域請求。

簡單的部落格構成

這次我們可以簡單的做一個可以供移動平台閱讀的部落格，除了不能寫作以外(ps:不能寫作還能叫部落格麼)。對於寫部落格的人來說更多的只是寫，而對於讀者來說，他們只需要讀，所以在某種意義上可以將部落格的寫和讀分離開來。

對於使用者來說，部落格是由兩個頁面構建的:

在這裡我們先關注博文列表

博文列表

博文列表的內容一般有:

一個簡單的樣本如下，也就是我們接下來要用到的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 OKServer: mokcy/0.17.0Date: Thu, 24 Jul 2014 00:38:19 GMTContent-Type: application/json; charset=utf-8Content-Length: 3943Connection: keep-aliveVary: Accept-EncodingAccess-Control-Allow-Origin: *Access-Control-Allow-Headers: X-Requested-WithCache-Control: max-age=600

CMS效果: 墨頎 CMS

QQ討論群: 344271543

項目: https://github.com/gmszone/moqi.mobi

怎用javascript建立一個類，這個類用來產生選項按鈕

大致寫了一個，基礎的功能已經實現
<script type="text/javascript">
/**
* 類操作函數
*/
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

/**
* 定義類
*/
var Div2Radio = Class.create();
Div2Radio.prototype = {
initialize: function() {
this.panel = new Object;
this.groupName = "";
this.radioImages = new Array();
this.radioInputs = new Array();
},

/**
* 設定容器
* @param string 容器名
*/
setPanel: function(panelName) {
this.panel = this.$(panelName);
if (!this.panel) {
return false;
}
},

/**
* 添加新組
* @param string 組名
*/
addGroup: function(groupName) {
this.groupName = groupName;

this.radioImages[groupName] = new Array();
this.radioInputs[groupName] = new Array();
},

/**
* 添加按鈕
* @param String 按鈕值
* @param String 按鈕圖片
*/
addRadio: function(value, imgSrc) {
var img = document.createElement("img");
img.id = this.groupName + "_input_" + value;
img.src = imgSrc;
img.width = 150;
img.border = null;
this.radioImages[this.groupName].push(img);

var input = document.createElement("input");
input.id = this.groupName + "_input_" + value;
input......餘下全文>>
 
javascript怎動態產生一張html頁面，點擊某個按鈕後，產生一張網頁，這張網頁最先是沒有的

原理：fso讀取asp運行頁面後的html原始碼，然後把讀取到的html原始碼再使用fso的寫檔案功能重寫入一個html檔案