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

Posted 2020-09-22 slgkaifa

在有了上部分的基础之后。我们就能够生成一个博客的内容——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