如何在 PugJS 的路由器中触发 onclick 功能？

Question

我目前正在使用一个 expressJs 模板，该模板使用 pug 来制作一个简单的网站。网站上有一个按钮。我想单击按钮调用index.js 文件中的函数。

最初我有这样的代码。在index.pug 文件中：

extends layout

block content
  h1= title
  p Welcome to #{title}
  button#BubbleButton.button.hypeButton.button-3d.button-caution.button-circle.button-jumbo(onclick = 'buttonClick()') Click

在我的index.js 文件中，它看起来像这样：

var express = require('express');
var router = express.Router();
var PubNub = require('pubnub');
module.exports = router;

function buttonClick(){
  alert('test');
}

但是，我会得到这样的回应：

没有找到buttonClick函数。

坦率地说，我对 angular 比 pug 更熟悉。将视图端链接到路由器文件需要什么？我在 Pug 中了解，您可以添加端点 REST API 样式，但这不一定是 API。我可能只是想展示一些简单的东西而不是暴露它。但是，我可能误解了一些基本的东西。

谢谢！

Answer 1

您的 pug 文件中 script. 标签中包含的 JavaScript 代码只会在浏览器中运行，而 index.js 中的代码只会在服务器上运行。因此他们永远不能直接说话。

您需要在客户端（即在您的 pug 文件中）进行 ajax 调用。这是一个使用 jquery 的示例，但您可以使用许多 ajax 客户端包之一来做同样的事情：

script.
  function onButtonClick(){
    $.ajax({
      "url": "/service",
      "method": "POST"
    }); 
  }

那么你需要一个 index.js 中的路由处理程序：

router.post('/service', function(req, res){
  console.log('test');
});

请注意，这将输出到服务器上的控制台，而不是客户端。我相信这就是你想要做的。

要将 jquery 添加到您的页面，您可以使用 cdn（内容交付网络）快速将其引入您的代码。这是 pug 的语法：

script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous")

或者你可以axios 作为 jquery 的轻量级替代品，它所做的只是 ajax：

script(src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous")