如何使用 node js、mongoDB 和 vue js 实现动态依赖选择下拉菜单？

Posted 2023-02-22

【中文标题】如何使用 node js、mongoDB 和 vue js 实现动态依赖选择下拉菜单？

【英文标题】：How implement dynamic dependent select dropdown with node js, mongoDB and vue js?

【发布时间】：2021-12-07 21:30:50

【问题描述】：

我想用 node js、mongoDB 和 Vue js 实现动态依赖下拉列表，但我不知道从哪里开始（对不起，我是这个话题的新手），下面是我的场景：

我有 2 个下拉框 country 和 state，我希望 state 每次都根据所选的 country强>

那么您对如何实现这一点有任何想法吗？ 任何想法将不胜感激。谢谢。

【参考方案1】：

我认为你应该采取一些小步骤。

1 - 首先你需要规划你的基本 API，一开始我不会为后端而烦恼，只需从一个简单的 Vue 应用程序开始，这就是你所需要的。

2 - Countries and Cities JSON repository 下载这个，这将是您的 API 的形状，并将该 JSON 对象直接导入您的 Vuejs 应用程序。

现在这是一些基本代码，给你一个想法，你可以处理实现。

import countries from './countries.json'

const countryNames = Object.keys(countries)

const citiesOfGermany = countries.Germany

3 - 一旦你完成了基本的前端，我将从 Nodejs 开始，设置一个基本的端点并提供这个确切的 JSON。即：GET /countries

4 - 现在从您的 Vuejs APP 向此端点发出请求。

5 - 最后将此 JSON 文件迁移到 MongoDB，并将 nodejs 服务器中的 json 文件替换为 MongoDB 实现。

祝你好运！

【讨论】：

非常感谢您花时间解释这一点，好吧，让我从您上面提到的简单前端内容开始，一旦完成前端设置，我会回复您

您好，您能告诉我后端部分如何实现其架构设计以及示例路由 API 吗？

const countries = require('./countries.json') const express = require('express') const app = express() const port = 3000 app.use(express.json()) app.get('/countries', (req, res) => res.json(countries)) app.listen(port, () => console.log(Example app监听$port！))但实际上，阅读Express docs，不要盲目复制粘贴。有很多关于这方面的信息，谷歌，你会找到一切。

我知道那个，您能否详细介绍一下国家和州之间的 mongoDB 模式设计，因为它可能相互关联。谢谢

我不记得上次使用 MongoDB 是什么时候了，请阅读Mongoose docs ^^。提示：如果您查看它已经在 J​​SON 文件中定义的架构，您只需将其转换为 Mongoose 架构。