如何在我的前端显示mongodb数据库的内容?

时间:2018-12-21 04:38:47

标签: javascript node.js mongodb express mongoose

基本上,我需要从html检索用户输入。使用该输入通过mongoose搜索我的mongoDB数据库。然后检索该信息并将其显示在前端。我不知道该怎么做。

2 个答案:

答案 0 :(得分:2)

检索数据意味着将“获取请求”发送到您的节点端点

由于我使用axios,因此我建议您也使用axios(如果使用React或任何其他框架,请使用npm install axios),也可以简单地复制它的脚本CDN

从前端开始,您就可以

axios.get("Your url address" + "api route address").then((response) => {
         //do whatever with your response
        }).catch(error => {
         //Do something in case of error 
       })

以一个实际的地址为例,假设我有一个连接到运行在本地主机8000上的mongoose的节点服务器,我的api端点看起来像这样(后端

我在其中导入了用户模式的地方

const User = require("./../models/userSchema.js")
const User = require("./../models/userSchema.js")

router.get("/",  async (req, res) => {
  const contactList  = await User.find({}) //coming from mongoose 
  res.send(contactList)
})

通过axios,我的api请求将是这样的( frontend

axios.get("http://localhost:8000/").then((response) => {

后端部分->发布请求

首先像这样定义并导出猫鼬模式

const mongoose = require('mongoose')

const userSchema = new mongoose.Schema({
    firstName: String,
    lastName: String,
    address: String, 
    email: {
        type: String,
        default: "www.xyz@abc.com"
    },
    number: Number,
    OTP: Number,
    createdAt: {type: Date, default: Date.now},
    DateOfBirth: {
        type: String,
        default: "1/01/2001"
    },
    image: {
        type: String,
        default: "http://icons.iconarchive.com/icons/graphicloads/100-flat/256/contact-icon.png"
    }, 

})


module.exports = mongoose.model("User", userSchema)

然后,希望您已使用MVC模式配置了节点,然后将其导入到需要使用模式的路由中

const express = require("express")
const router = express.Router() 
const User = require("./../models/userSchema.js")

在该架构内创建一个API路由或端点,以接受发布请求(或放置请求)

  router.post("/message", async (req, res) => {
  const newMessage = new User({
     firstName: req.body.(whatever from your request contains firstName
    .....
    ......
    )}
  })

一旦您填写了要获取的数据(req.body包含数据),就需要保存它,并沿着上述路线进行扩展

 router.post("/message", async (req, res) => {
  const newMessage = new User({
     firstName: req.body.(whatever from your request contains firstName
    .....
    ......
    )}
newMessage.save().then((response) => {
if (error) {
      console.log(error)
      throw  new Error (error)
      } else {
        console.dir(responseData)
        res.send(responseData)
      }
  })
  })

前端部分

由于我使用axios,因此我建议您也使用axios(如果使用React或任何其他框架,请使用npm install axios),也可以简单地复制它的脚本CDN

在axios内部,我们发送发布请求

 axios.post("Your port address" + Message , object).then(response => {   
          console.log(response)
          }).catch(error => {
            console.log(error)  
          })

答案 1 :(得分:0)

这是一个更大的问题。让我帮您指出一些细节。

  1. 使用猫鼬连接器定义mongo模型。
  2. 在nodejs代码中创建获取路由以处理来自客户端的呼叫。
  3. 使用提取或任何客户端http包装器来调用您的节点服务器。
  4. 分别为模型或服务编写模型。查找并返回响应。