Nodejs怎样在前端测试模板引擎？

Nodejs怎样在前端测试模板引擎？

我和别人一起写东西，我想用express，然后小伙伴负责弄静态页面，但是不知道怎样让他去用ejs或者jade，或者直接html

7 回复

Node.js 怎样在前端测试模板引擎？

在使用 Node.js 和 Express 开发 Web 应用时，我们经常需要处理前端的视图层。常见的模板引擎有 EJS、Jade（现在称为 Pug）以及原生的 HTML。本文将介绍如何配置和使用这些模板引擎，并提供一些简单的示例代码。

1. 安装依赖

首先，确保你已经安装了 express 和相应的模板引擎模块。例如，如果你想使用 EJS 或者 Pug，可以通过以下命令安装：

npm install express ejs
# 或者
npm install express pug

2. 配置模板引擎

接下来，在你的 Express 应用中配置模板引擎。这里以 EJS 和 Pug 为例进行说明。

EJS 示例

const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 创建一个路由来渲染 EJS 模板
app.get('/', (req, res) => {
    res.render('index', { title: 'Express with EJS' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

Pug 示例

const express = require('express');
const app = express();

// 设置模板引擎为 Pug
app.set('view engine', 'pug');

// 创建一个路由来渲染 Pug 模板
app.get('/', (req, res) => {
    res.render('index', { title: 'Express with Pug' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

3. 创建模板文件

在项目中创建一个 views 目录，然后在这个目录下创建相应的模板文件。例如，对于 EJS 和 Pug，你可以创建 index.ejs 和 index.pug 文件。

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
</body>
</html>

index.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    title #{title}
  body
    h1 Welcome to #{title}

4. 运行应用

启动你的 Express 应用：

node app.js

然后访问 http://localhost:3000，你应该能看到渲染后的页面。

总结

通过上述步骤，你可以轻松地在 Node.js 和 Express 中集成和使用 EJS 或 Pug 等模板引擎。这样，你的前端开发者可以专注于编写静态页面，而无需担心后端逻辑。如果你希望使用纯 HTML，也可以通过设置不同的中间件来实现。

以上就是如何在 Node.js 中使用 EJS 或 Pug 模板引擎的基本步骤。希望这对你有所帮助！


看不懂。这些模板引擎运行时会解析过来，你不用管的。

ejs 可以直接在浏览器跑…

最好还是写html，原生的，主要是好改，jade就算了

那些数据怎么测试呢？ 自己写一些假代码么？

怎么直接用呢？ 不用模板引擎传数据么

在前端测试模板引擎通常涉及到后端逻辑与前端展示的交互。使用Express框架可以很好地处理这一问题。你可以选择EJS、Jade（Pug）或者直接使用HTML作为模板引擎。

示例代码

假设我们选择使用EJS作为模板引擎，并且你的小伙伴需要开发一个静态页面。我们可以创建一个简单的Express应用来演示如何在前端使用EJS模板引擎。

  1. 安装必要的包

首先，确保你已经安装了Node.js和npm。然后，在项目根目录下安装Express和EJS：

npm init -y
npm install express ejs
  1. 创建基本的Express服务器

在项目的根目录下创建一个server.js文件，并添加以下内容：

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

// 设置模板引擎为EJS
app.set('view engine', 'ejs');

// 静态文件夹路径
app.use(express.static('public'));

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { title: '首页', message: '欢迎来到我们的网站！' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});
  1. 创建EJS模板

在项目根目录下创建一个名为views的文件夹，然后在该文件夹中创建一个名为index.ejs的文件。在这个文件中，你可以使用EJS语法来插入变量或执行简单的逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
    <!-- 其他静态内容 -->
</body>
</html>
  1. 创建静态资源

为了使小伙伴可以专注于静态页面的设计，可以在public文件夹中存放静态资源如CSS、JavaScript文件和图片。在项目根目录下创建一个名为public的文件夹，并在其中创建相应的文件。

例如，创建一个style.css文件：

body {
    background-color: #f0f0f0;
}

并在index.ejs中引入它：

<link rel="stylesheet" href="/style.css">

通过这种方式，小伙伴可以直接在静态文件夹中编辑和测试他们的HTML、CSS和JavaScript文件，而不需要担心后端逻辑。同时，他们也可以利用EJS中的变量和条件语句来自定义静态页面的显示效果。

总结

这样，你们就可以在前后端分离的情况下进行开发。后端提供API接口和模板渲染逻辑，而前端专注于页面设计和用户体验。使用EJS模板引擎可以使页面的动态内容变得灵活，同时保持良好的可维护性。

回到顶部