Blog

Blog

PHODAL

构建基于Javascript的移动CMS——生成博客(二).路由

在有了上部分的基础之后,我们就可以生成一个博客的内容——BlogPosts Detail。这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了。

获取每篇博客

于是我们照猫画虎地写了一个BlogDetail.js

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

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

    var BlogDetailView = Backbone.View.extend ({
        el: $("#content"),

        initialize: function () {
        },

        getBlog: function(slug) {
            url = "http://api.phodal.net/blog/" + slug;
            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(blogDetailsTemplate, response));
        }
    });

    return BlogDetailView;
});

又写了一个blog_details.html,然后,然后

<div class="information pure-g">
    {{#.}}
    <div class="pure-u-1 ">
        <div class="l-box">
            <h3 class="information-head"><a href="#/blog/{{slug}}" alt="{{title}}">{{title}}</a></h3>
            <p>
                发布时间:<span>{{created}}</span>
            <p>
                {{{content}}}
            </p>

            </p>
        </div>
    </div>
    {{/.}}
</div>

我们显然需要稍微地修改一下之前blog.html的模板,为了让他可以在前台跳转

{{#.}}
<h2><a href="#/{{slug}}" alt="{{title}}">{{title}}</a></h2>
<p>{{description}}</p>
{{/.}}

问题出现了,我们怎样才能进入最后的页面?

添加博文的路由

在上一篇结束之后,每个博文都有对应的URL,即有对应的slug。而我们的博客的获取就是根据这个URL,获取的,换句话说,这些事情都是由API在做的。这里所要做的便是,获取博客的内容,再render。这其中又有一个问题是ajax执行的数据无法从外部取出,于是就有了上面的getBlog()调用render的方法。

Backbone路由参数

我们需要传进一个参数,以便告诉BlogDetail需要获取哪一篇博文。

    routes: {
        'index': 'homePage',
        'blog/*slug': 'blog',
        '*actions': 'homePage'
    }

*slug便是这里的参数的内容,接着我们需要调用getBlog(slug)对其进行处理。

    app_router.on('route:blog', function(blogSlug){
        var blogDetailsView = new BlogDetail();
        blogDetailsView.getBlog(blogSlug);
    });

最后,我们的router.js的内容如下所示:

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

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

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

        app_router.on('route:blog', function(blogSlug){
            var blogDetailsView = new BlogDetail();
            blogDetailsView.getBlog(blogSlug);
        });

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

接着我们便可以很愉快地打开每一篇博客查看里面的内容了。

其他

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

微信公众号: 与我沟通

标签