技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-7.mongodb数据库关联多个分类(关联多个数据)

本文涉及的产品
云数据库 MongoDB,通用型 2核4GB
简介: nodejs模型关联如何关联多个分类?
技能学习:学习使用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端传入的接口名赋值到接口变量中,以实现接口的复用,减轻服务端接口频繁杂乱的压力。

更多设计、功能的学习经验,大家也可以去我的公众号查看!

————
在这里插入图片描述

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。 &nbsp; 相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校实习信息发布网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校实习信息发布网站附带文章源码部署视频讲解等
53 20
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校汉服租赁网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校汉服租赁网站附带文章源码部署视频讲解等
12 0
|
8天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
62 1
前端JS发起的请求能暂停吗?
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的七彩云南文化旅游网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的七彩云南文化旅游网站附带文章源码部署视频讲解等
37 16
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
25 9
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的宠物商城网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的宠物商城网站系统附带文章源码部署视频讲解等
35 10
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的三国之家网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的三国之家网站附带文章源码部署视频讲解等
21 4
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的热门网游推荐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的热门网游推荐网站附带文章源码部署视频讲解等
15 4
|
8天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
9天前
|
NoSQL 测试技术 MongoDB
使用同步和异步方式更新插入MongoDB数据的性能对比
在这篇文章中,我将探讨如何使用同步和异步方式插入数据到MongoDB,并对两种方式的性能进行对比。并将通过Python中的 pymongo 和 motor 库分别实现同步和异步的数据插入,并进行测试和分析。

热门文章

最新文章