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文件向您在app.js页上设置的特定路由进行请求，然后从服务器进行对您的数据库的请求。假设您使用快递，请按照以下步骤操作。如果您不使用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，您将看到表达的内容以及如何使用它来配置支持的API。

here，您将进一步了解完整的堆栈，以及每种技术如何完美地将其丢弃。这是Brad遍历的教程。我也从他那里学到了。

所以放手吧，我是在信任地说这话...看看我的声誉..这证明了他从他那里学到了多少..

欢呼队友：）

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 });
        });

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

4 个答案: