Express.js 路由器下载 EJS 文件而不是显示它

Question

因此，我正在使用纯 Node.js 创建实时视频共享/观看功能，而不使用任何框架。

但是，在开发进行到一半时，我遇到了一个问题，Express 正在下载 EJS 文件而不是渲染它。

我是如何偶然发现这个问题的？好吧，我正在为我的应用程序构建一个类似 Zoom 房间的结构，其中会生成随机的数字字符串。然后将此字符串发送到服务器端以创建私人房间，允许具有相同 ID 的用户加入。作为 Express.js 的新手，这是我使用它的第一个项目。

下面，您将找到我来自 Room.ejs 和服务器端的代码片段。

So Here I am Linking My Modal(Which I Initially Used to Create and Join Room)

  $(document).ready(function() {
    $('#createPartyBtn').click(function () {
        $('#createJoinRoomModal').modal('show');
    });

    $('#createRoomBtn').click(function () {
        window.location.href = '/create-room';
    });

    $('#joinRoomBtn').click(function () {
        window.location.href = '/join-room';
    });
});

My Home.js File
$(document).ready(function() {

  $('#createPartyBtn').click(function() {
      $('#createJoinRoomModal').modal('show');
      $('#modalOverlay').show();
  });

  $('#createJoinRoomModal').on('hidden.bs.modal', function () {
      $('#modalOverlay').hide();
  });

  function generateRoomID() {
      return Math.random().toString(36).substr(2, 9);
  }

  $('#createRoomBtn').click(function() {
      var roomID = generateRoomID();
      window.location.href = '/room/' + roomID;
  });

  $('#joinRoomBtn').click(function() {
      var roomID = prompt('Enter Room ID:');
      if (roomID) {
          window.location.href = '/room/' + roomID;
      }
  });
});

My server.js File

const express = require("express");
const app = express();
const http = require("http").Server(app);
const path = require("path");
const io = require("socket.io")(http);

app.use(express.static("public"));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/src"));

app.get("/", (req, res) => {
  res.render("home");
});

app.get("/create-room", (req, res) => {
  const roomId = uuidv4(); // Generate a random room ID
  res.render("create-room", { roomId });
});


app.get("/join-room", (req, res) => {
  res.render("join-room");
});


app.post("/join", (req, res) => {
  const roomId = req.body.roomId;
  res.redirect(`/room/${roomId}`);
});

app.get("/room/:roomId", (req, res) => {
  const roomId = req.params.roomId;
  res.sendFile(__dirname + "/src/room.ejs");
});

以下是我的文件目录

- Node_modules
- public (Contains CSS and JS files)
- src
   |- home.ejs
   |- room.ejs
   And other EJS files
- git
- yarn.lock
- package.json
- server.js

我尝试将我的文件从 Room.ejs 重命名为 Room.html 但如果我使用 room.html 它不会让我使用套接字 io。总是显示一些错误。它也不能帮助我链接外部文件。

Answer 1

在您的

server.js

文件中，您将

"room.ejs"

文件作为静态文件发送。这将不允许 Express 使用 ejs 视图引擎渲染它，这就是为什么您在点击路线时会收到下载提示的原因。要修复此问题，请不要使用

res.sendFile()

，而是使用

res.render()

函数，就像对其他路线所做的那样。您可以将 roomId 传递给 EJS 文件，类似于在

app.get("/create-room")

中传递它的方式

示例：

app.get("/room/:roomId", (req, res) => {
  const roomId = req.params.roomId;
  res.render("room", { roomId });
});