道招

wordpress的restfulAPI接口返回数据的几点分析与处理

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

wordpress的restfulAPI接口返回数据的几点分析与处理

想让wordpress作为后端提供数据,必不可少的就是调用xxx.com/wp-json/wp/v2/posts这个接口了,(具体内容请参考官方文档)该接口返回一个文章列表,数组中的每条文章返回了该文章的详细信息,其中自然办好文章的分类categories和标签tags了,做过项目的都知道,这类数据一般也不推荐直接返回文字信息,一般都是返回码值,根据映射关系找到对应的文字。 接口数据 从图中可以看到:分类categories和标签tags返回的都是数组,里面的数字代表了对应内容的id,需要根据id在调用相应的查询接口获得文字信息。 分类信息和标签信息里面相对麻烦点的是分类信息,因为分类信息可能有父子级的关系,而标签则不存在,是扁平化返回。下面说说我是怎么处理分类的,最实际的应用场景就是博客上方的导航菜单。 首先我们肯定是调用接口xxx.com/wp-json/wp/v2/categories获取博客里面的所有分类categories信息,这里最好将每页返回的数据条数设置大一点,方便一致性返回全部分类信息,看下接口返回格式 截图屏幕有限,具体的大家自行调用,我说一下吧,分类信息全是扁平化返回,用一个数据返回,比如你有2个大分类,里面各有3个消费,则接口换返回里面有2+2*3=8个对象的数组,唯一的区别是父分类的parent字段为0,子分类的parent字段则是对应的父分类的id。估计后端同事都喜欢这么干,确实很方便。但是前端的同志就苦逼了。扁平化数组?循环?该怎么样渲染更方便? 本例中有五个大的分类,id分别是39、54、477、600、1020其中54、600、1020有子分类,进行处理后返回一个大的对象,每个大类有children字段,其为数组,里面是一堆他的子分类。 图中id为127的就是54这个大分类的子分类。处理代码如下:
function postsHandle(data) {
    let categoriesObj = {};
    let categoriesMap = {};
    if (data && data.length) {
        data.map((item, index) => {
            categoriesMap[item.id] = {
                name: item.name,
                slug: item.slug
            };
            if (item.parent != '0') { //子分类
                if (!categoriesObj[item.parent]) { //其父分类不存在
                    categoriesObj[item.parent] = {
                        id: item.id,
                        item: '',
                        children: [{
                            id: item.id,
                            item
                        }]
                    };
                } else {
                    categoriesObj[item.parent].children.push({
                        id: item.id,
                        item
                    })
                }
            } else {
                if (categoriesObj[item.id]) { //已由分类创建
                    categoriesObj[item.id].id = item.id;
                    categoriesObj[item.id].item = item;
                } else {
                    categoriesObj[item.id] = {
                        id: item.id,
                        item,
                        children: []
                    };
                }
            }
        })

    }
    return {
        categoriesObj,
        categoriesMap
    }
}
categoriesObj就是上面所说的大分类,大家可能发现还有个categoriesMap,什么鬼?这个是我用来记录分类id和展示名称及路径 手疼,今天先写这么多。 可以让大家看看昨天做的效果,没有美化,另外wordpress的restfulAPI返回数据很慢(我在本地连接本地数据库也是很慢),为了大家感受到这种慢,我做的菜单导航设置了边框,哈哈。 网址: http://vue.w.daozhao.com/,切记不要用https访问,否则会跨域,那样你就只能看到框框了。
更新时间:
上一篇:前端框架vue+wordpress做后端下一篇:前端模拟后端接口进行调试之easy-mock篇

相关文章

前端模拟后端接口进行调试之node+mysql篇

有时前端在开发过程中肯定是会跟后端联调的,但是如果此时后端可能没有开发好,或者因为其它优先级高的事情无法联调,又或者是前端需要确保当前项目无明显bug后着手开发其他项目。这个时候如果能模拟后端接口数据 阅读更多…

关注道招网公众帐号
道招开发者二群