你能使用 Express JS 渲染纯 HTML 而不使用 Ejs 或其他吗

问题描述 投票:0回答:1

大家好,我希望你们一切都好。我是一名大学生,我只是在一个简单的 Express 应用程序上练习 JavaScript。在这里我面临一个问题,右边我有简单的 HTML,其中包含引导表单,而且我在那里编写了一个简单的 API,当我在 server.js 中请求 /about 时,它应该将我重定向到 about.html 页面,但是它给了我一个错误,我也提供了这个错误。我知道我可以使用 ejs 或其他东西,但我想使用纯 html 并在可能的情况下处理它。请任何人告诉我解决方案,我将非常感谢你😇

这是 Express js 后端代码。

import express  from "express";
import path from "path";
import { fileURLToPath } from "url"

const app = express();
const port = 3000;

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

app.use(express.static(__dirname + '\\public'));

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

app.get('/about', (req, res) => {
    res.render('about.html');
    console.log(`Request Granted`);
});

app.listen(port, () => { console.log('App listening on port ', port)});

这是位于 public 文件夹内的 Index.html 代码。

<script>
        const btns = document.getElementById('suc');
        const btnd = document.getElementById('dan');

        btns.addEventListener('click', async ()=>{
            let response = await fetch('http://localhost:3000/about');
            let request = await response.json();
        })
</script>

我尝试过在这里发送文件

app.get('/about', (req, res) => {
res.render('about.html'); //<-------------HERE
console.log(`Request Granted`);
});

我也尝试了 ChatGPT 的补救措施,但没有发生我预期的情况。

javascript html node.js express ejs
1个回答
0
投票

纯 HTML 文件也是有效的 EJS 文件。只需配置您的视图引擎

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

将您的

index.html
放在 './views' 下,重命名为 'index.ejs' 并使用

进行渲染
res.render('index');

如果您实在无法忍受 EJS 扩展名并且希望您的文件具有 HTML 扩展名,只需告诉 Express 您使用 EJS 但具有 HTML 文件扩展名即可:

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set('views', './views');

使用此配置,您可以将

index.html
放入
./views
中并以相同的方式渲染它

res.render('index');
© www.soinside.com 2019 - 2024. All rights reserved.