学习 MERN Stack 第 46 天

我学习 MERN stack 的旅程已经开始了 46 天。

昨天我配置了 Tailwind CSS。今天我学习了 EJS 模板引擎。

在今天之前,我的 HTML 页面都是静态的。它们无法显示来自服务器的变化。

EJS 支持服务端渲染。它利用来自后端的实时数据来生成 HTML。你可以直接在 HTML 中编写 JavaScript 逻辑。

以下是我今天的配置步骤:

  • 我告诉 Express 使用 EJS 作为视图引擎。
  • 我为模板创建了一个 views 目录。
  • 我使用 res.render 方法将数据发送到前端。

代码如下:

const express = require("express");
const app = express();
const users = require("./MOCK_DATA.json");

app.set("view engine", "ejs");

app.get("/users-list", (req, res) => {
    res.render("users", { allUsers: users }); 
});

app.listen(8000);

这种方法可以实现数据与 UI 的即时连接。

来源:https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh