技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-6.mongodb数据库无限层级的数据关联（子分类）

2021-07-16 00:18:08

现在我们已经做出了分类的增删改查功能，并且将设计与开发作为一级分类，下面我们要为一级分类添加二级分类。如平面设计、3D设计为二级分类关联到设计分类中，将网站开发、小程序开发归属到开发分类中。

1.更改新建分类页面

CategorySet.vue设置上级分类parent，位于分类名之上:

<el-form-item label="上级分类">
    <el-select v-model="model.parent">
    <!-- 使用select获取分类名name和该分类的id,后期如果修改分类名自动更新子分类的上级分类 -->
    <!-- 其中label获取分类名，发送到数据库的值为该分类的id————以id为分类寻找依据 -->
        <el-option v-for="item in parentOptions" :key="item._id" :label="item.name" :value="item._id"></el-option>
    </el-select>
</el-form-item>

2.使用查询接口

下方js使用categories查询分类接口获取分类信息，将获取到的数据传入分类数据parentOptions中：

async fetchParentOptions(){
    const res = await this.$http.get('categories')
    this.parentOptions = res.data
}

此时页面已接收到分类信息，并可以显示分类名了。

3.改动分类模型

接口使用模型上传，所以接收到的数据不变，无需改动。但要想接收到上级分类的数据，我们需要在模型中添加字段和类型。
在server/model/Category.js中找到分类模型，对分类模型进行改动：

parent: { type: mongoose.SchemaTypes.ObjectId, ref: 'Category' },

这样就可以了，测试一下：

成功，下一步在分类列表中把上级分类展示出来。

4.更改分类列表页面

由于我们以id为依据传值，所以上级分类显示的就不是上级分类名，而是上级分类id。
此时我们就要改动分类列表的查询数据接口。

5.改动查询接口

在server/route/admin/index.js文件中，找到查询数据接口，添加一个populate()方法：

// 查询数据（查）
router.get('/categories', async(req, res) => {
    // populate()方法用于在用到schama架构关联时，取出关联的内容，查询到改内容关联到的对象
    const items = await Category.find().populate('parent').limit(10)
    res.send(items)
})

对比一下populate()方法使用前后的数据。
使用前是查询到的parent值：

使用后是根据parent查询到的关联对象：

此时我们把CategoryList.vue页面中上级分类的prop值改一下就可以了：

5.vue.js devtools插件

具体什么是ObjectId呢，这里我使用vue的vue.js devtools谷歌插件给大家展示一下：

在vue开发过程中，我们应时刻观察数据的变化，所以就要用到vue的开发者面板插件了，分享给大家：
技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-vue.js devtools谷歌插件下载与安装

由于部分内容隶属于多个分类，下篇文章我们探究多个上级分类的添加。

码农公寓