技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-7.mongodb資料庫關聯多個分類（關聯多個資料）

技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-1.工具和本地環境 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-2.啟動項目 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-3.element-ui和vue-router路由的安裝和使用 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-4.使用axios，并建立接口上傳資料到mongodb資料庫 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-5.mongoodb資料庫的“删、改、查”操作 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-6.mongodb資料庫無限層級的資料關聯（子分類） 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-7.mongodb資料庫關聯多個分類（關聯多個資料） 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-8.server端使用通用CRUD接口 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-9.圖檔上傳 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-10.vue的富文本編輯器（vue2-editor） 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-11.動态添加分欄上傳多組資料

我們建立一個文章的添加與清單功能，當建立一篇文章時，讓它所屬設計和開發兩個分類。大家可以根據此方法的制作過程，應用到其他功能子產品中。

1.文章功能的所有頁面建立

按照之前分類功能頁面建立文章功能的所有頁面。

（1）設定文章頁面的路由

（2）在首頁面Main.vue元件的導航中加入文章頁面的跳轉按鈕

此時點選導航按鈕就可以跳轉了。

（3）建立文章頁面-ArticleSet.vue元件

整體架構不變與CategorySet.vue相同，将除查詢上級分類以外的接口名categories改為articles，上級分類parentOptions改成所屬分類categories。

<template>
    <div>
        <h1>{{id ? '編輯' : '建立'}}文章</h1>
        <el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
            <el-form-item label="所屬分類">
                <!-- 尋找上級分類categories -->
                <!-- 為了添加多個上級分類,需要在後邊加一個multiple,就可以進行多選了。傳輸資料為數組格式 -->
                <el-select v-model="model.categories" multiple>
                    <el-option v-for="item in categories" :key="item._id" :label="item.name" :value="item._id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章标題">
                <el-input v-model="model.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">儲存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        id: {}
    },
    data(){
        return {
            model: {},
            categories: [],
        }
    },
    methods: {
        async save(){
            let res
            if(this.id){
                res = await this.$http.put('articles/' + this.id, this.model)
            }else{
                res = await this.$http.post('articles', this.model)
            }
            console.log("en?",res)
            this.$router.push('/articles/list')
            this.$message({
                type: 'success',
                message: '儲存成功'
            })
        },
        async fetch(){
            const res = await this.$http.get('articles/' + this.id)
            this.model = res.data
        },
        async fetchCategories(){
            const res = await this.$http.get('categories')
            this.categories = res.data
        }
    },
    created(){
        this.id && this.fetch()
        this.fetchCategories()
    }
}
</script>           

（4）文章清單頁面-ArticleList.vue元件

<template>
    <div>
        <h1>分類清單</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220">
            </el-table-column>
            <el-table-column prop="categories.name" label="所屬分類">
            </el-table-column>
            <el-table-column prop="categories[0].name,categories[1].name" label="所屬分類">
                <template slot-scope="scope"> {{scope.row.categories[0].name}},{{scope.row.categories[1].name}} </template>
            </el-table-column>
            <el-table-column prop="name" label="文章标題">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="$router.push('/articles/edit/' + scope.row._id)">編輯</el-button>
                    <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        async fetch(){
            const res = await this.$http.get('articles')
            this.items = res.data
        },
        remove(row){
            this.$confirm('是否确定要删除文章"' + row.name + '"?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 要想使用await，函數必須使用async
                // await異步執行，待調用接口擷取資料完成後再将值傳給res，進行下一步操作
                const res = await this.$http.delete('articles/' + row._id)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                if(res.status == 200){
                    // 接口調用成功後，重新整理頁面
                    this.fetch()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {
        this.fetch()
    }
}
</script>           

（5）建立文章資料庫模型Article.js

server/models/Article.js:

// 引入mongoose插件，插件db.js已經用require引入到server的最高層檔案index.js，是以可以直接引用
const mongoose = require('mongoose')

// 使用mongoose的架構方法定義此資料表category，定義字段和類型
const schema = new mongoose.Schema({
    name: { type: String },
    // 因為以id為查詢依據，故使用mongodb特有的類型架構————objectId。
    // 并ref挂載到分類模型本身，指在分類模型Category中查找。
    categories: [{ type: mongoose.SchemaTypes.ObjectId, ref: 'Category' }],
})

// 導出mongoose模型
module.exports = mongoose.model('Article', schema)           

（6）文章功能接口

server/router/admin/index.js複制categories接口，改接口位址和接口名，引入Article模型

此時測試文章功能：

沒問題。

2.總結

（1）上傳多個上級分類

multiple标簽方法。以數組方式上傳到資料庫模型，模型中定義的字段和類型要用數組形式包括：

（2）顯示多個上級分類

el-table-column不能以數組方式顯示在頁面中，但可以使用prop将多個資料放在标簽中，然後用vue的v-model雙向綁定顯示該行内包含的資料。

資料來源在vue.js devtools中層層查找。

（3）關于服務端接口的整合

目前伺服器接口中，每增加一個子產品功能就需要新添加一系列相似接口。

是以下篇文章我們學習一下接口的整合：通用CRUD接口。将接口位址和接口名寫成變量，服務端接收admin端傳入的接口名指派到接口變量中，以實作接口的複用，減輕服務端接口頻繁雜亂的壓力。

更多設計、功能的學習經驗，大家也可以去我的公衆号檢視！

————