javascript - 将 Javascript 函数与 Handlebars 中的按钮一起使用

Question

我有一个具有以下结构的 Handlebars 项目:

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 获取信息，因此为了学习如何在 Handlebars 应用程序中导航显示来自 API 的数据，我创建了一个 GetInsult();函数从我在网上找到的 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() 接口(interface))，从而向服务器上的新路由发出 GET 请求。您将该路线设置为类似 /api/insult如果您想区分返回 JSON 的路由与适用于浏览器的路由。

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.")
    }
});

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

---

工作原理总结:

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