Blog

Blog

PHODAL

构建基于Javascript的移动web CMS——模板

在上一篇《构建基于Javascript的移动CMS——Hello,World》讲述了墨颀 CMS的大概组成,并进行了一个简单的示例,即Hello,World。这一次,我们将把CMS简单的放到一个可以运行的服务器环境中,也就是说我们需要一个简单的运行环境,以便于进行更有意思的东西——添加模板。

开始之前

环境准备

类Unix系统

因为电脑上已经装有python了,这里便用python起一个简单的server,对于GNU/Linux、Mac OS等类unix系统来说,都可以这样运行:

python -m SimpleHTTPServer 8000

Windows

对于Windows来说,如果你已经装有python的话,那自然是可以用上面的方式运行。如果没有的话,可以试一下mongoose,下载一个安装之。

JS库准备

需要准备的JS库有

  • Backbone
  • RequireJs的插件text.js
  • Mustache

只想要这次的代码

那么就这样子吧

 git@github.com:gmszone/moqi.mobi.git

接着切换到learing分支

 git checkout learning

checkout到这个版本

git checkout 62fbdaf

构建移动web CMS

文件列表如下所示

.
|____app.js
|____backbone.js
|____HomeView.js
|____index.html
|____jquery.js
|____main.js
|____mustache.js
|____require.js
|____router.js
|____text.js
|____underscore.js

在这里有些混乱,但是为了少去其中的一些配置的麻烦,就先这样讲述。

添加路由

用Backbone的一个目的就在于其的路由功能,于是便添加这样一个js——router.js,内容如下所示:

define([
    'jquery',
    'underscore',
    'backbone',
    'HomeView.js'
], function($, _, Backbone, HomeView) {

    var AppRouter = Backbone.Router.extend({
        routes: {
            'index': 'homePage',
            '*actions': 'homePage'
        }
    });
    var initialize = function() {
        var app_router = new AppRouter;

        app_router.on('route:homePage', function() {
            var homeView = new HomeView();
            homeView.render();
        });

        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

在这里我们先忽略掉HomeView.js,因为这是下面要讲的,在router.js中,我们定义了一个AppRouter,

  • index指向的是在初始化时候定义的homePage,这样就可以将主页转向HomeView.js。
  • *actions便是将其他未匹配的都转向homePage。

接着我们需要修改一下app.js,让他一运行地时候便可以进入路由选择

define(['jquery', 'underscore', 'router'], function($, _, Router) {
    var initialize = function() {
        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

也就是初始化一下路由。

创建主页View

使用Mustache的优点在于,后台仅仅只需要提供数据,并在前台提供一个位置。因此我们修改了下HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <script data-main="main" src="require.js"></script>
    </head>
    <body>
        <div id="aboutArea">{{project}}</div>
    </body>
</html

创建了aboutArea这样一个ID,于是我们便可以很愉快地在HomeView.js中添加project的数据。

define([
    'jquery',
    'underscore',
    'mustache',
    'text!/index.html'
], function($, _, Mustache, indexTemplate) {

    var HomeView = Backbone.View.extend({
        el: $('#aboutArea'),

        render: function() {
            var data = {
                project: "My Sample Project"
            };
            this.$el.html(Mustache.to_html(indexTemplate, data));
        }
    });

    return HomeView;
});

在HomeView.js中,定义了data这样一个object,代码最终的效果便是用"My Sample Project"替换到HTML中的{{project}}。

这样我们便完成了一个真正意义上的移动web CMS平台的Hello,World,剩下的便是添加一个又一个的脚手架。

CMS最后的效果

CMS: http://cms.moqi.mobi/

源码 Github: https://github.com/gmszone/moqi.mobi

QQ讨论群: 344271543

Release版下载0.2.tar.gz

关于我

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

微信公众号: 与我沟通

标签