現在我們已經做出了分類的增删改查功能，并且将設計與開發作為一級分類，下面我們要為一級分類添加二級分類。如平面設計、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谷歌插件下載下傳與安裝由于部分内容隸屬于多個分類，下篇文章我們探究多個上級分類的添加。