在 Handlebars 中使用带有按钮的 Javascript 函数

Question

我有一个具有以下结构的车把项目：

Project
 |
 +-- server.js
 +-- package.json
 +-- package-lock.json
 |    
 +-- public
 |  |  
 |  |-- css
 |      |
 |      + -- style.css
 |
 +-- views
 |  |  
 |  |-- layouts
 |  |   |
 |  |   + -- main.handlebars
 |  +-- index.handlebars

在我的 server.js 文件中，我在 localhost:3000 上为运行创建了应用程序，并在 / 上为 index.handlebars 提供服务。我了解如何从 api 获取信息，因此为了学习如何在车把应用程序中导航显示来自 API 的数据，我创建了一个 GetInsult(); 函数来检索来自 API 的随机侮辱一个 API 我在网上找到的（纯粹用于学习目的）。我用函数抓取数据，然后将数据传递给res.render()函数。你可以在我的 server.js 文件中看到它是如何工作的：

//import modules
import dotenv from 'dotenv';
dotenv.config();

import http from 'http';
import path from 'path';
import { dirname } from 'path';
import express from 'express';
import { engine } from 'express-handlebars';
import axios from 'axios';


//other variables
const port = process.env.PORT;
const hostname = process.env.HOSTNAME;
const __dirname = path.resolve();

//store data in variable
var insult = await GetInsult();


const app = express();

//Create http server to run and listen on localhost:3000
var server = http.createServer(app).listen(port, hostname, () => {
    console.log(`Server is running at http://${hostname}:${port}`);
})

app.engine('handlebars', engine());
app.set('view engine', 'handlebars')
app.set('views', './views')

//Use Static Files
app.use('/public', express.static(__dirname + '/public'));
app.use('/css', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css')));
app.use('/js', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/js')));
app.use('/js', express.static(path.join(__dirname, 'node_modules/jquery')));

app.get('/', (req, res) => {
    res.render('index' , {insult})
});



export async function GetInsult() {
    var response = await axios('https://insult.mattbas.org/api/insult')
    var data = response.data
    return data
}

console.log(insult)

然后在我的 index.handlebars 文件中，我可以像这样成功地显示侮辱：

<main>
    <div style="text-align: center;">
        <h1 id="insult">{{insult}}</h1>
        <button id="insult-button" class="btn btn-dark">Get New Insult</button>
    </div>
</main>

我无法弄清楚如何将 GetInsult(); 功能添加到 <h1>{{insult}}</h1> 标签下方的按钮。我尝试了很多方法，感觉我错过了一些简单的东西。我希望按钮执行 GetInsult(); 函数并显示从 API 检索到的新侮辱。我不确定我是否需要将函数放在别处并从另一个文件调用它，或者是否有可能使用异步函数。任何指导将不胜感激。谢谢！

Answer 1

I would like the button to execute the GetInsult(); function and display the new insult that is retrieved from the API.

基本步骤如下：

1 - 创建一些客户端 Javascript，在浏览器中进行 Ajax 调用（使用 fetch() 接口），向您的新路由发出 GET 请求服务器。如果你想区分 return JSON 的路由和浏览器的路由，你可以使该路由类似于 /api/insult。

2 - 在您的服务器上为 /api/insult 实现一个看起来像这样的路由：

app.get("/api/insult", async (req, res) => {
    try {
        let insult = await GetInsult();
        res.json({insult});
    } catch(e) {
        console.log(e);
        res.sendStatus(500);
    }
});

3 - 然后，在您的客户端代码中获取侮辱，从 fetch() 调用中获取结果并将其插入您当前的网页以替换当前的侮辱。

您的客户端代码可能如下所示：

document.getElementById("insult-button").addEventListener("click", async (e) => {
    try {
        let response = await fetch("/api/insult");
        let data = await response.json();
        document.getElementById("insult").innerHTML = data.insult;
    } catch(e) {
        console.log(e);
        alert("Request for new insult failed.")
    }
});

确保此客户端代码位于 index.handlebars 模板中 <script> 标记中的 insult-button 之后。

工作原理总结：

因此，每次单击该按钮时，它都会向您的服务器发出新的 API 请求。您的服务器将在 API 响应中收到新的侮辱 return。然后您的客户端代码将获得响应，将其解析为 JSON，然后将侮辱插入到先前侮辱所在的网页中。

在 Handlebars 中使用带有按钮的 Javascript 函数

Using Javascript functions with a button in Handlebars

javascript

event-handling

node.js

express

handlebars.js