Blog

Blog

PHODAL

构建基于Javascript的移动CMS——生成博客(一)

墨颀 CMS中的动态的文章是从我博客的API加载过来的,因为当前没有其他好的CMS当接口。之前直接拿博客的DB文件+Nodejs+RESTify生成了一个博客的API,而且可以支持跨域请求。

简单的博客构成

这次我们可以简单的做一个可以供移动平台阅读的博客,除了不能写作以外(ps:不能写作还能叫博客么)。对于写博客的人来说更多的只是写,而对于读者来说,他们只需要读,所以在某种意义上可以将博客的写和读分离开来。

对于用户来说,博客是由两个页面构建的:

  • 博文列表(blogposts list)
  • 博客内容(blogposts detail)

在这里我们先关注博文列表

博文列表

博文列表的内容一般有:

  • 作者(Author)
  • 标题(title)
  • 创建时间/修改时间(Time)
  • 关键词(Keywords)
  • 摘要(Description)
  • 链接(Slug)

一个简单的示例如下,也就是我们接下来要用到的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 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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签