如何通过单击前端按钮在 mongoDB 上添加 Collection？答案

【问题标题】：How can I add Collection on mongoDB by clicking button on frontend?如何通过单击前端按钮在 mongoDB 上添加 Collection？
【发布时间】：2021-04-08 05:13:29
【问题描述】：

我正在构建一个聊天应用程序，我需要在其中添加更多房间（组）。我使用 MongoDB 作为数据库。

这是我的架构。

import mongoose from "mongoose";

const Schema = mongoose.Schema( {
      message: String,
      name: String,
      timestamp: String,
      received: Boolean,
});

const messageContent = mongoose.model('messageContent', Schema);
                                
export default messageContent;

我可以通过 Mongodb.com 轻松添加集合，但我想通过使用前端的按钮来添加它。

这是我在前端创建了一个按钮并单击它，出现提示，我们必须写下房间名称。但在那之后，我的代码给了我一个错误。

import { Avatar } from '@material-ui/core';
import React from 'react';
import mongoose from "mongoose";
import "./SidebarChat.css";
import Schema from "./messages";

function SidebarChat({adddNewChat}) {

    const db = mongoose.connection;

    const createChat = e => {
        const roomname = prompt("Add a new chat name");

        if(roomname){
            console.log("roomName is created : ", roomname);
            mongoose.model('room', Schema);
        }
    }

    return !adddNewChat ? (
        <div className="sidebarChat">
            <Avatar />
            <div className="sidebarChat__right">
                <h2>Room Name</h2>
                <p>Last Message</p>
            </div>
        </div>
    ) :
    (
        <div className="sidebarChat" onClick={createChat}>
            <h2> Add new Chat</h2>
        </div>
    )
}

export default SidebarChat

请告诉我该怎么做。

【问题讨论】：

你正在混合你的前端和后端代码更多关于这个答案的见解stackoverflow.com/questions/17469237/…。
如果我从前端删除后端代码。那我怎样才能实现我的功能呢。
你的前端和mongodb之间需要使用API进行通信，你可以通过我发送的链接。

标签： javascript html reactjs mongodb express

【解决方案1】：

将react和mongoose放在一起似乎不是一个好方法。

这是因为“react”预计将由诸如 firefox、chrome 等浏览器运行。而且那些浏览器不完全支持“猫鼬”的功能，反之亦然。

Mongoose 的浏览器库不支持保存文档、查询、填充、鉴别器或除架构和验证文档之外的任何其他 Mongoose 功能。

Mongoose in browser

另一方面，“mongoose”将由纯“node.js”运行，它没有要渲染的 DOM 结构。

【讨论】：