Building a JavaScript-based mobile cms--Generation blog (i)

Source: Internet
Author: User

The dynamic article in the Qi CMS is loaded from the API of my blog because there is no other good CMS as interface at present. Before directly taking the blog's db file +nodejs+restify generated a blog API, and can support cross-domain requests.

Simple Blog composition

This time we can simply do a mobile platform to read the blog, in addition to not writing (PS: Can't write can also call a blog?). For the people who write the blog more just write, and for the reader, they only need to read, so in a sense, the blog can be written and read separate.

For a user, a blog is built from two pages:

    1. List of posts (blogposts lists)
    2. Blog content (blogposts detail)

Here we look at the list of posts first

List of posts

The contents of the blog list are generally:

  1. Author (Author)
  2. Caption (title)
  3. Time of creation/modification (time)
  4. Keywords (Keywords)
  5. Abstract (Description)
  6. Links (Slug)

A simple example below, which is part of the 1.json We're going to use next.

[{    "title": "Getting Started with building JavaScript-based mobile Web cms-Introduction",    "slug": "use-jquery-backbone-mustache-build-mobile-app-cms" ,    "description": "See the project on the mobile framework, online search for a bit, found that the original has." So, find an example to start building a mobile platform of the cms--Qi CMS, easy to understand the project at the same time, you can also maintain a CMS system. ",    " keywords ": [        " backbone ",        " jquery ",        " underscore ",        " mustache "    ],    " created ":" 2014-07-17 14:16:18.035763 "}"

Here basically there is the above elements, in addition to the author, of course, because the author only one, so in the writer is a waste of traffic and money AH. Then we just have to read the above content and put it in the CMS. Unlike before, although we can use the same method as the Qi CMS file json file, it is obvious that this method will not be applicable soon.

Mobile CMS to get online data

Backbone model is used here, we 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 pass in a URL at initialization time in order to getblog when used, in order to facilitate debugging to change the URL to the same path 1.json file

Getblog:function () {        var url = '/1.json ';        var = this;        collection = new Blogpostmodel;        Collection.initialize (URL);        Collection.fetch ({            success:function (collection, response) {                That.render (response);            }}        );    

This will render the page when the data is successfully obtained. The final homeview.js code is as follows:

define ([' jquery ', ' underscore ', ' mustache ', ' text!/index.html ', ' text!/blog.html '], function ($, _, Mustach E, indextemplate, blogtemplate) {var Blogpostmodel = Backbone.Model.extend ({name: ' Blog Posts ', Url:fu        Nction () {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 = 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 means that we need to create a div with ID aboutarea in index.html. Then we need to create a new template--blog.html, its content is relatively simple, just simple mustache use.

{{#.}} 

{{#.}}And{{/.}}Can be used in JSON arrays, that is, loops, or to determine whether they exist.

The final result is:

Remove the description, and then modify a CSS, that is, we see the results on the home page.

Next time we'll open these URLs.

Other ways to see if JSON cross-domain 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 look at

Curl-i-S HTTP://API.PHODAL.NET/BLOG/PAGE/1

Should return to Access-control-allow-origin: *

http/1.1 Okserver:mokcy/0.17.0date:thu, 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: Ink qi cms

QQ Discussion Group: 344271543

Project: Https://github.com/gmszone/moqi.mobi

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.