如何在nodejs中使用sweetalert？答案

【问题标题】：How to use sweetalert in nodejs?如何在nodejs中使用sweetalert？
【发布时间】：2019-06-11 11:07:56
【问题描述】：

我有一个带有 html 代码的 nodejs 代码，我想在客户端显示一个甜蜜的警报，在 nodejs 中处理一个函数之后？

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

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

    Swal('Hello world!');

});

<!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>

【问题讨论】：

Sweet Alert 应该在浏览器中使用，而不是在服务器上，您需要将其包含在客户端代码中。
我知道，但是怎么样，我试过ajax...我想知道其他方法吗？@m90

标签： node.js express ejs sweetalert2

【解决方案1】：

这是显示弹出框的唯一方法

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

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

   res.json("Hello world!")
});


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

//import JQuery from script
//import swal script

$("#form").on("submit", function(e){
e.preventDefault();

$.ajax({
  url: "/add",
  method: "post"
}).done(d=>{
  swal(e.responseJSON);
});
})
</script>

【讨论】：

【解决方案2】：

这里你可以使用 EJS 来做

var express = require('express');
var router = express.Router();
router.post('/add', function(req, res, next) {
   res.status(201).render('new', { isAdded : true } );
});

在 HTML 端

<% if (isAdded) { %>
 <script>
  Swal.fire(
     'Good job!',
     'Data saved',
     'success'
 )
</script>
<% } %>

【讨论】：

【解决方案3】：

为了处理这个，你可以使用查询参数。

所以，这就是你可以做的事情

在服务器上

var express = require('express');
var router = express.Router();
router.post('/login', (req, res)=>{
   res.redirect("/login?success=true&message=Logged In Successfully")
});

在客户端 (EJS)

    <script>
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams.has('success') && urlParams.get('success')){
    swal({
    title: "Failed",
    text: `${message}`, 
    icon: "error",
    button: "Okay",
    }).then(()=>{
        console.log(window.location.hostname)
    window.location.replace(window.location.origin + '/login');

    })
}

这只会弹出 swal。并且您可以切换成功的值以呈现错误和成功消息。

【讨论】：