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

Question

我是网络/服务器开发的新手，我对从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文件发出请求到你在app.js页面上设置的特定路由，然后从你的服务器，你可以向你的数据库发出请求。假设您使用快递，请按照以下步骤操作。如果您不使用快递，请告诉我，我可以引导您完成设置。

首先，您需要页面底部的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 });
        });