从 mongodb 检索数据并从 html 插入到脚本中答案

【问题标题】：retrieve data from mongodb and insert inside a script from a html从 mongodb 检索数据并从 html 插入到脚本中
【发布时间】：2019-12-26 12:26:02
【问题描述】：

大家好，我开发了一个 Android 应用程序，该应用程序 http 将一些数据（如纬度、经度和 IMEI）发布到数据库中的服务器。一切正常，但现在是项目的第二部分。我需要制作一个 Web 应用程序，在地图上向我显示一个市场，其中经纬度和长期保存在数据库中，我不明白如何。我知道我应该使用查询，但我不知道谁使用它们。

这是我的服务器端。

    var express = require('express');
    var mongoose = require('mongoose');
    var bodyParser = require('body-parser');
    var app = express();

  //connect to mongodb:

    /*mongoose.connect('mongodb+srv://tudorstanciulescu:19970826@test- 
    srqul.mongodb.net/test?retryWrites=true&w=majority', {useNewUrlParser: 
    true} );

   */
   var MongoClient = require('mongodb').MongoClient;
   var url = "mongodb://localhost:27017/mydb";




   //app.use(bodyParser.urlencoded({extended:true}));
   //app.use(bodyParser.json());
   app.use(bodyParser.json());

   //var mongoose = require('mongoose');
   app.post('/postBazaDate',(req,res)=> {
       var latitudine = req.body.latitudine;
       var longitudine = req.body.longitudine; 
       var imei = req.body.imei;
       var dateTime = new Date();
     ;
      var data = {
        "latitude" : latitudine,
        "longitute" : longitudine,
        "imei" : imei,
        "dateTime" : dateTime


      }
    //   data.save()
    //   .then(item => {

    //     res.send("item saved to database");
    //   })
    //   .catch(err => {
    //     res.status(400).send("unable to save to database");
    //   });

      MongoClient.connect(url, { useNewUrlParser: true }, function(err,               
  db)  {
        if (err) throw err;
        var dbo = db.db("mydb");
        dbo.collection("date_locatie").insertOne(data, function(err, res) 
  {
          if (err) throw err;
          console.log("1 document inserted");

        });
      });

我没有任何错误，一切正常，但我不明白如何在 html 脚本中使用数据库中的数据

【问题讨论】：

标签： android node.js mongodb http maps

【解决方案1】：

简单的 REST 解释

好的，首先，html 文件是静态的，其内容只能通过 javascript 或 css 或其他语言进行操作。因此，您要么在加载页面之前获取数据并与页面一起发送数据，要么创建一个 ajax 调用来获取数据。

在休息架构中，您有 GET、PUT、PATCH、POST、DELETE 请求，每个请求都是创建、读取或更新数据库。

GET 是从服务器 -> 客户端发送数据，因此客户端从服务器请求数据，服务器为客户端获取并准备数据并将其发送回。

PUT 和 PATCH 都更新数据库中的数据 POST 是从客户端 -> 服务器发送并保存数据 DELETE 从数据库中删除一行

有关restfull的更多信息，您可以访问此网站：https://www.restapitutorial.com/lessons/httpmethods.html

或者做一个快速的谷歌搜索休息教程，你会发现很多！

代码时间

服务器端（使用其中之一）：

// app.js

// THIS GETS ONE ROW AND RETURNS OBJECT FROM THE DATABASE ACCORDING TO YOUR QUERY
app.get("/", (req,res,next) {       
     dbo.collection("date_locatie").find({}, function(err, res) {
         if (err) throw err;
         res.send(data);
     });
})

// THIS GETS MANY ROWS AND RETURNS ARRAY FROM THE DATABASE ACCORDING TO YOUR QUERY
app.get("/", (req,res,next) {    
     dbo.collection("date_locatie").findAll({}, function(err, res) {
         if (err) throw err;
         res.send(data);
     });
})

现在您的服务器已设置为接受 GET 请求并发回数据您所要做的就是在 javascript 中使用 ajax 调用来调用 url，然后您的数据将被发送到客户端的 pc。

要显示需要循环的数据（如果是数组）并将数据附加到 HTML。

客户端：

在 html 文件中，您可以在脚本标记中编写 javascript。这允许操作 DOM 元素。假设你有一个空的 id locationData 你想用你保存的数据填充它

//index.html 
//Assuming you are using jQuery 
<div id="locationData"></div>
<script>

    // WHEN HTML IS FULLY LOADED SENDS A GET REQUEST TO YOUR SERVER TO FETCH 
    // THE DATA

    $( document ).ready(function() {
        $.ajax({url: "http://localhost:3000/", success: function(result){

        // PUTS THE DATA IN THE DIV WITH ID : locationData
           $("#locationData").html(result);
        }});
    });

<script>

【讨论】：

【解决方案2】：

在 Node.js 中，添加 app.post 的位置相同

app.get('/getBazaDate',(req,res)=> {

      MongoClient.connect(url, { useNewUrlParser: true }, function(err,               
  db)  {
        if (err) throw err;
        var dbo = db.db("mydb");
        dbo.collection("date_locatie").find({}, function(err, data) 
  {
          if (err) throw err;
          res.send(data); // here data is containing all saved data in array 
            //format

        });
      });


in html file
<!DOCTYPE html>
<html>
<body>

<h2>The = Operator</h2>

<p id="demo"></p>

<script>

const userAction = async () => {
fetch('http://localhost:3000/getBazaDate')
  .then(response => response.json())
  .then(json => console.log(json))
}
userAction();
document.getElementById("demo").innerHTML = response.json;
</script>

</body>
</html>

【讨论】：