Как запустить функцию onclick в роутере для PugJS? - PullRequest
Новая
       8

Как запустить функцию onclick в роутере для PugJS?

0 голосов
/ 30 сентября 2018

В настоящее время я использую шаблон 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 функция не найдена.

Честно говоря, я больше знаком с угловатым, чем с мопсом.Что нужно, чтобы связать сторону просмотра с файлом роутера?Я понимаю, что в Pug можно добавить стиль API REST для конечной точки, но это не обязательно будет API.Я могу просто показать что-то простое, а не разоблачить это.Однако я могу неправильно понять что-то фундаментальное.

Спасибо!

1 Ответ

0 голосов
/ 30 сентября 2018

Код JavaScript, содержащийся в тегах script. в вашем файле pug, будет работать только в браузере, а код в 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 (Content Delivery Network), чтобы быстро внедрить его в свой код.Вот синтаксис 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")
...