技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-6.mongodb数据库无限层级的数据关联(子分类)

本文涉及的产品
云数据库 MongoDB,通用型 2核4GB
简介: nodejs中模型的关联非常方便。

现在我们已经做出了分类的增删改查功能,并且将设计与开发作为一级分类,下面我们要为一级分类添加二级分类。如平面设计、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谷歌插件下载与安装

由于部分内容隶属于多个分类,下篇文章我们探究多个上级分类的添加。

相关实践学习
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
相关文章
|
12天前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
|
14天前
|
消息中间件 Java 数据库连接
【消息队列开发】 对核心类实现数据库管理
【消息队列开发】 对核心类实现数据库管理
|
1天前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
7天前
|
SQL 存储 数据库
掌握SQL:数据库查询与管理的关键技能
一、引言 在信息化快速发展的今天,数据库已成为存储、处理和查询数据的重要工具
|
11天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
14 0
|
11天前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
20 1
|
11天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
13天前
|
JSON JavaScript 数据格式
1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
15 0
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
11 0
|
SQL JavaScript 前端开发

热门文章

最新文章