現在我們已經做出了分類的增刪改查功能，并且將設計與開發作為一級分類，下面我們要為一級分類添加二級分類。如平面設計、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谷歌插件下載與安裝