如何从 EJS、Javascript 写入 MongoDB 数据库？

Question

我是 web/服务器开发的新手，我对从 ejs 调用代码有点困惑。我有一张桌子，我想在每一行都有按钮。我希望在单击按钮后它会从 MongoDB 中删除特定项目（我使用的是 Mongoose、NodeJS、Bootstrap Table、EJS）。 这是我的代码和按钮

'<a class="remove" href="javascript:void(0)" title="Remove">',
        '<i class="fa fa-trash"></i>',
        '</a>' 

是删除行的按钮：

<table id="table">
    <thead>
      <tr>
        <th data-field="name">Device name</th>
        <th data-field="receivingKey">Receiving key</th>
        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents"></th>
      </tr>
    </thead>
  </table>

  <script>
    var $table = $('#table');
    var data = <%- JSON.stringify(devices) %>;

    function operateFormatter(value, row, index) {
      return [
        '<a class="like" href="javascript:void(0)" title="Like">',
        '<i class="fa fa-heart"></i>',
        '</a>  ',
        '<a class="remove" href="javascript:void(0)" title="Remove">',
        '<i class="fa fa-trash"></i>',
        '</a>'
      ].join('')
    }

    window.operateEvents = {
      'click .like': function (e, value, row, index) {
        alert('You click like action, row: ' + JSON.stringify(row))
      },
      'click .remove': function (e, value, row, index) {
        // I want the delete action here.
      }
    }

    $(function () {
      $('#table').bootstrapTable({ data: data });
    });
  </script>
  <% } else { %>
  <div>You don't have any connected devices.</div>
  <% } %>
</div>

问题是，我不知道该怎么做。我可以在 nodejs 后端编写代码，但我不知道如何从 EJS 调用它。我尝试使用 app.local 将函数传递给那里，但是由于内部的异步调用而引发错误。

如果您认为这段代码不好，我可以使用不同的代码，也请告诉我。谢谢。

Answer 1

澄清一下，ejs 不用于执行查询！

ejs 用于：

• 制作可用于任何页面的html模板（如header.ejs）
• 将变量从服务器传递到 html 文件

要做你想做的事，你需要从你的 javascript 文件发出一个 request 到你在 app.js 页面上设置的特定路由，然后从你的服务器，你可以对您的数据库的请求。假设您使用的是 express，请按照以下步骤操作。如果您不使用 express，请告诉我，我可以指导您完成设置。

首先，您需要页面底部的 jQuery 脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

<!-- make sure this script is above all your other scripts! -->

接下来，编写如下脚本：

$.ajax({url:'/somePathHere', success: function(data) {

    //code you want to execute in the clients browser after the request is made goes here

}});

最后，在您的 app.js 页面上：

app.get('/somePathHere', function(req, res) {
    //make your call to the db here
}):

Answer 2

你可以参考这个链接：

http://dreamerslab.com/blog/en/write-a-todo-list-with-express-and-mongodb/

因为 ejs 用于为所有页面制作页眉、页脚、导航等模板。您可以使用 javascript 从 EJS 生成 HTML。

Answer 3

这个问题的答案根本无法给出这样的答案......我能做的就是引导您找到学习这项技术的正确方法

here 您将看到 express 是什么以及如何使用它来配置支持的 API..

here你将进一步了解这个完整的堆栈以及它如何完美地与每项技术一起下降。这是 Brad traversy 的教程。我也从他那里学到了......

所以试一试，我是带着信任说这句话的……看看我的名声……这证明了我从他身上学到了多少……

干杯伙伴:)

Answer 4

谢谢大家的帮助。我没有意识到我可以在不渲染或重定向到某个页面的情况下使用 POST 方法。我还发现 AJAX 可以很容易地发送 POST 请求。

后端：

const express = require('express');
const router = express.Router();

router.post('/remove-device', (req, res) => {
    //some code for deleting from mongo DB
    console.log('Success');
    res.send('ok');
});

module.exports = router;

前端：

<table id="table">
        <thead>
          <tr>
            <th data-field="name">Device name</th>
            <th data-field="receivingKey">Receiving key</th>
            <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents"></th>
          </tr>
        </thead>
      </table>

      <script>
        var $table = $('#table');
        var data = <%- JSON.stringify(devices) %>;

        function operateFormatter(value, row, index) {
          return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="fa fa-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-trash"></i>',
            '</a>'
          ].join('')
        }

        window.operateEvents = {
          'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row))
          },
          'click .remove': function (e, value, row, index) {
            $.ajax({
              method: "POST",
              url: "/intr/remove-device",
              data: { deviceName: row.name },
            }).done(function (data) {});
          }
        }

        $(function () {
          $('#table').bootstrapTable({ data: data });
        });