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

时间:2018-10-03 14:37:11

标签: javascript html node.js express sweetalert2

我想在我的项目节点和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>

Package.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"
  }
}

如果有人可以指导...

1 个答案:

答案 0 :(得分:0)

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>

script标签将包括客户端上的库,并且将不需要任何节点/表达式。