我有一個具有以下結構的把手專案：
Project
|
-- server.js
-- package.json
-- package-lock.json
|
-- public
| |
| |-- css
| |
| -- style.css
|
-- views
| |
| |-- layouts
| | |
| | -- main.handlebars
| -- index.handlebars
在我的server.js檔案中，我創建了在 localhost:3000 上運行的應用程式，并提供index.handlebarsat /. 我了解如何從 api 中獲取資訊，所以只是為了學習如何在車把應用程式中從 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 檢索到的新侮辱。我不確定是否需要將函式放在其他地方并從另一個檔案呼叫它，或者是否可以使用異步函式。任何指導將不勝感激。謝謝！
uj5u.com熱心網友回復：
我想要按鈕執行 GetInsult(); 函式并顯示從 API 檢索到的新侮辱。
基本步驟如下：
1 - 創建一些客戶端 Javascript，fetch()在瀏覽器中進行Ajax 呼叫（使用介面），向服務器上的新路由發出 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-buttonin a<script>標記之后index.handlebars。
作業原理總結：
因此，每次單擊該按鈕時，它都會向您的服務器發出一個新的 API 請求。您的服務器將收到新的侮辱并在 API 回應中回傳。然后您的客戶端代碼將獲得回應，將其決議為 JSON，然后將侮辱插入到先前侮辱所在的網頁中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377434.html
標籤：javascript 节点.js 表达 事件处理 把手.js
上一篇：在兩個日期之間過濾文本檔案