将 sweetalert2 与 node.js 和 express.js 一起使用答案

【问题标题】：Use sweetalert2 with node.js and express.js将 sweetalert2 与 node.js 和 express.js 一起使用
【发布时间】：2018-10-03 14:37:10
【问题描述】：

我正在尝试在我的项目节点和 express.js 中使用 sweetalert2 加上我猜配置不成功。

我收到以下消息：

swal 未定义

ReferenceError: swal 未定义

我的设置

index.js

var express = require('express');
var router = express.Router();
const Swal = require('sweetalert2');

router.post('/add', function(req, res, next) {

    Swal('Hello world!');

});

HTML

<!DOCTYPE html>
<html lang="pt_br">
<head>
</head>
<body>
    <h1 class="text-center title-1"> Cad </h1>
    <form action="/add" method="post">
        <input type="submit" value="Save"/>
    </form>
</body>
</html>

包.json

{
  "name": "festiva",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "mysql": "^2.16.0",
    "sweetalert2": "^7.28.4"
  }
}

如果有人可以指导...

【问题讨论】：

你安装npm模块了吗？试试npm install sweetalert2
是的 Jamie Syme，安装是使用这个命令 npm install --save sweetalert2 完成的。我通过添加我的 package.json 编辑了我的问题
您是否将index.js 包含在您的html 某个地方的脚本标记中？还是使用节点运行？
如果你想显示它，你不能在服务器（代码后面）中使用它，然后在客户端 js 文件中调用它。例如，您使用 ajax 请求将表单数据发送到服务器并在响应后显示 swall。
我的目标@A.kadir olmez 是在成功保存记录时显示 sweetalert 的消息。所以我这样做的方式是不正确的。您将有一个示例通过后端演示此功能。我正在查看我正在研究的库的文档。

标签： javascript html node.js express sweetalert2

【解决方案1】：

SweetAlert2 似乎是一个客户端库，但在您的示例中，您在服务器上使用它。

要让您的示例正常工作，并且不会变得复杂，请尝试以下操作：

HTML

<!DOCTYPE html>
<html lang="pt_br">
<head>
</head>
<body>
    <h1 class="text-center title-1"> Cad </h1>
    <button type="button" onclick="swal('Hello, world!')">
        Click me
    </button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.28.2/sweetalert2.all.min.js"></script>
</body>
</html>

脚本标签将包含客户端上的库，并将消除对任何节点/express 的需要。

【讨论】：

效果很好。我怀疑并且肯定是我的问题，是我认为可以在后端调用 swol，例如，当成功保存记录时。