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

使用MithrilMVC 通过WordPressRestAPI获取WordPress文章

Mithril是一款小型高性能JavaScript MVC框架。Flarum是一款著名的开源论坛程序，其前端就使用了Mithril。Mithril具有极其简洁的API，我们可以使用Mithril框架直接通过WordPressRestAPI来调用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() {
  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路由把应用挂载到DOM上。

m.route.mode = "hash";

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

MithrilMVC框架结合WordPressRestAPI的使用方法就是这样简单明了。就算是初学者，也只需要简单地调用一下API，就能实现前后端分离，并快速方便地开发出自己想要的应用程序。当然，如果您在使用过程中遇到了问题，可以多看看Mithril和WordPress的文档，也可以在社区论坛上寻找答案。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。