使用 JavaScript Mithril MVC 框架通过 WordPress Rest API 调用文章数据

Mithril 是一个小巧的高性能 JavaScript MVC 框架，著名的开源论坛程序Flarum的前端使用的就是 Mithril，Mithril 的 API 极其简洁。我们可以使用 Mithril 直接通过 WordPress Rest API 调用 WordPress 的数据。下面我们直接用调用 WordPress 文章的例子说明一下具体的方法。
使用Mithril MVC 通过 WordPress Rest API 获取 WordPress 文章

var posts = {};

//model 模型，使用 Ajax 方法获取 WordPress 文章
var Post = {

    list: function () {
        return m.request({
            method: "GET",
            url: "/wp-json/wp/v2/posts/"
        });
    }

};

//controller 控制器，在 model 和 view 之间传递数据
posts.controller = function () {

    var posts = Post.list();
    return {
        posts: posts
    }

};


//view 视图，渲染数据
posts.view = function (ctrl) {

    return m("div.list-group", [
        ctrl.posts().map(function (post) {
            return m("a.list-group-item", {href: '#single/' + post.id}, [
                    m("h4.list-group-item-heading", post.title.rendered),
                    m("p.list-group-item-text", m.trust(post.excerpt.rendered))
                ]
            );
        }),
        m.component( title, {data: "所有文章"})
    ]);

};

通过 m.route配置路由
有了上面的应用，数据还显示不了，通过m.route路由把应用挂载到页面上就可以了。下面代码做的工作就是把上面应用的数据显示到 id 为 ucenter 的 DOM 上。

m.route.mode = "hash";

m.route(document.getElementById("ucenter"), "https://www.wpzhiku.com/", {
    "https://www.wpzhiku.com/": posts
});

上面是最简单的 Mithril MVC 框架结合 WordPress Rest API 的使用方法，一眼看上去，咋感觉这么麻烦呀！其实 Rest API 的方便之处在于把前端代码和后端分离开了，后端只需要提供好接口，前端想怎么玩都可以，对于小型应用，这可能看不出来什么优势，对于大型应用，这能使代码结构更清晰，更方便维护。