技能学习：学习使用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端传入的接口名赋值到接口变量中，以实现接口的复用，减轻服务端接口频繁杂乱的压力。
更多设计、功能的学习经验，大家也可以去我的公众号查看！————
