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

Question

我目前正在使用一个使用 pug 的 expressJs 模板来制作一个简单的网站。在网站上有一个按钮。我想点击按钮调用 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 function not found.

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

谢谢!

Answer 1

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

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

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

然后在 index.js 中需要一个路由处理程序:

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

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

要将 jquery 添加到您的页面，您可以使用 cdn(内容分发网络)快速将其引入您的代码。这是哈巴狗的语法:

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")