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访问，否则会跨域，那样你就只能看到框框了。