Build a Javascript-based mobile CMS-generate a blog (1) and javascriptcms

Build a Javascript-based mobile CMS-generate a blog (1) and javascriptcms

The dynamic articles in mojicms are loaded from the APIs of my blog, because there are no other good CMS interfaces. Previously, the database file + Nodejs + RESTify of the blog was used to generate a blog API and support cross-origin requests.

Simple blog Composition

This time, we can simply create a blog that can be read by the mobile platform. Apart from being unable to write (ps: can it be called a blog without writing ). For those who write a blog, they only need to read the blog. In a sense, they can separate the write and read of the blog.

For users, a blog is built on two pages:

Here we will first focus on the blog list

Blog list

The blog list includes the following content:

A simple example is as follows:1. json.

[{"Title": "getting started with Javascript-based mobile web CMS -- Introduction", "slug ": "use-jquery-backbone-mustache-build-mobile-app-cms", "description": "You can find the mobile framework of the project on the Internet, it turns out that all of these are available at the beginning. As a result, I found an example to build a mobile platform CMS-modemcms, which facilitates in-depth understanding of the project. At the same time, I can maintain a CMS system on my own. "," Keywords ": [" backbone "," jquery "," underscore "," mustache "]," created ":" 14:16:18. 035763 "}]

Here, there are basically the above elements, except the author, of course, because the author only has one, it is a waste of traffic and money to write the author in it. Then we want to read the above content and put it in CMS. The difference is that although we can use the same method as the JSON file of the modemcms file, it is clear that this method will not be applicable soon.

Mobile CMS obtains online data

The Model of Backbone is used here. First, create a Model.

var BlogPostModel = Backbone.Model.extend({    name: 'Blog Posts',    url: function(){        return this.instanceUrl;    },    initialize: function(props){        this.instanceUrl = props;    }});

We need to input a URL during initializationgetBlogTo facilitate debugging, you can change the url to a 1. json file in the same path.

getBlog: function() {        var url = '/1.json';        var that = this;        collection = new BlogPostModel;        collection.initialize(url);        collection.fetch({            success: function(collection, response){                that.render(response);            }        });    },

In this way, the render page is displayed when data is obtained successfully. The final HomeView. js code is as follows:

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;});

This also indicates that you want to create a div with the id of aboutArea in index.html. To create a new template--blog.html, the content of the template is simple, but the use of Mustache is simple.

{{#.}}

{{#.}}And{{/.}}It can be used for JSON arrays, that is, loops, or to determine whether a JSON array exists.
The final result is:

<H2> <a href = "use-jquery-backbone-mustache-build-mobile-app-cms" alt = "getting started with Javascript-based mobile web CMS-Overview"> build javascript-based mobile web CMS entry-Overview </a> 

Remove the description and modify the CSS. The result is displayed on the homepage.
We will open these URLs next time.
How can I check whether JSON cross-origin requests are supported?
This code download: https://github.com/gmszone/moqi.mobi/archive/0.1.1.zip
A simple tool is

curl I -s http://example.com

Here we can view

curl -I -s http://api.phodal.net/blog/page/1

You should return 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 effect: moji CMS
QQ group: 344271543
Project: https://github.com/gmszone/moqi.mobi

How to create a class using javascript, which is used to generate a single-choice button
I have roughly written one, and the basic functions have been implemented.
<Script type = "text/javascript">
/**
* Class operation functions
*/
Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}

/**
* Definition class
*/
Var Div2Radio = Class. create ();
Div2Radio. prototype = {
Initialize: function (){
This. panel = new Object;
This. groupName = "";
This. radioImages = new Array ();
This. radioInputs = new Array ();
},
 
/**
* Set the container
* @ Param string container name
*/
SetPanel: function (panelName ){
This. panel = this. $ (panelName );
If (! This. panel ){
Return false;
}
},
 
/**
* Add a new group
* @ Param string group name
*/
AddGroup: function (groupName ){
This. groupName = groupName;
 
This. radioImages [groupName] = new Array ();
This. radioInputs [groupName] = new Array ();
},
 
/**
* Add button
* @ Param String button Value
* @ Param String button Image
*/
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 ...... remaining full text>

How does javascript dynamically generate an html page, click a button, and generate a webpage, which is first unavailable
Principle: fso reads the html source code after asp runs the page, and then overwrites the html source code to an html file using the fso Write File function.