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:
- List of posts (blogposts lists)
- Blog content (blogposts detail)
Here we look at the list of posts first
List of posts
The contents of the blog list are generally:
- Author (Author)
- Caption (title)
- Time of creation/modification (time)
- Keywords (Keywords)
- Abstract (Description)
- 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 supportedThis 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