+ 收藏我们

网站模板

网站模板搜索
404模板 营销型模板 外贸网站模板 单页模板 双语模板 标签大全
电话:18630701785
首页 > wordpress > 使用 JavaScript Mithril MVC 框架通过 WordPress Rest API 调用文章数据 >

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

时间:2024-08-01 09:33:44

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

 

有问题可以加入网站技术QQ群一起交流学习

本站会员学习、解决问题QQ群(691961965)

客服微信号:lpf010888

Title