现在我们已经做出了分类的增删改查功能，并且将设计与开发作为一级分类，下面我们要为一级分类添加二级分类。如平面设计、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谷歌插件下载与安装由于部分内容隶属于多个分类，下篇文章我们探究多个上级分类的添加。