EJS
EJS（Embedded JavaScript templating）是一个流行的模板引擎，用于在Node.js和浏览器中生成HTML标记。EJS通过嵌入的JavaScript代码，使得HTML页面的创建变得灵活和动态。它没有复杂的逻辑，关注点在于将JavaScript代码嵌入到HTML模板中。
如何在ejs中使用if语句？
在EJS（Embedded JavaScript）模板中，您可以使用JavaScript的控制结构，包括`if`语句，来控制页面的内容显示。`if`语句允许您根据条件决定是否渲染某个部分的HTML。
### 使用`if`语句的基本语法
在EJS中，您可以使用`<% if (condition) { %>`来开始一个条件判断，使用`<% } %>`来结束这个判断。如果条件为真（true），则执行和渲染`if`语句块内的EJS和HTML代码。
#### 示例
假设您有一个用户登录系统，您希望根据用户是否登录显示不同的消息。您可以在EJS模板中这样写：
```ejs
<% if (user.isLoggedIn) { %>
<h1>Welcome back, <%= user.name %>!</h1>
<% } else { %>
<h1>Welcome, guest!</h1>
<% } %>
```
在这个例子中：
- `user.isLoggedIn` 是一个布尔值，表示用户是否已经登录。
- 如果用户登录了（`user.isLoggedIn` 为 `true`），页面将显示欢迎信息，并使用 `user.name` 显示用户的名字。
- 如果用户没有登录（`user.isLoggedIn` 为 `false`），则显示一般欢迎信息给访客。
### 为什么使用`if`语句
使用`if`语句可以让您的应用更动态，根据不同的数据状态显示不同内容。这在创建个性化的用户体验或在显示数据前进行条件判断时非常有用。
### 注意事项
- 确保在使用`if`语句时正确关闭每个标签，避免模板错误。
- 保持逻辑清晰，尽量不要在模板中嵌入过于复杂的逻辑，这样可以保持代码的可维护性和可读性。
通过在EJS模板中有效地使用`if`语句，您可以创建更加互动和个性化的Web页面。
阅读 34 · 7月20日 11:33
如何在EJS中包含带参数的模板？
在 EJS (Embedded JavaScript templating) 中，包含带参数的模板是一个非常有用的功能，它可以让你重用代码并保持你的项目的整洁和组织性。下面我将详细解释如何实现这一功能，并给出一个具体的例子。
### 步骤 1: 创建主模板和被包含的模板
首先，你需要有两个模板文件：一个是主模板，另一个是你想要包含的模板。假设我们有一个主模板 `main.ejs` 和一个被包含的模板 `user.ejs`。
### 步骤 2: 在被包含的模板中使用参数
在 `user.ejs` 中，我们可以定义一些将要接收的参数。例如，这个模板可能需要显示用户的信息，参数可以是用户名和用户年龄。
**user.ejs**
```html
<p>用户名: <%= username %></p>
<p>年龄: <%= age %></p>
```
### 步骤 3: 在主模板中包含并传递参数
在主模板 `main.ejs` 中，你可以使用 `<%- include('user', {username: '张三', age: 28}) %>` 语法来包含 `user.ejs` 模板，并传递需要的参数。
**main.ejs**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户信息</title>
</head>
<body>
<h1>欢迎查看用户信息</h1>
<%- include('user', {username: '张三', age: 28}) %>
</body>
</html>
```
### 示范例子
假设我们运行上述的 EJS 模板，最后在浏览器中显示的结果将是：
```
欢迎查看用户信息
用户名: 张三
年龄: 28
```
### 总结
通过这种方式，你可以在 EJS 模板中灵活地包含其他模板，并传递任何你需要的参数。这种技术非常适合于需要多次重用相同布局或组件的情况，如用户信息卡片、导航栏等。这不仅可以提高代码的复用性，还可以使项目结构更清晰、更易于维护。
阅读 20 · 7月20日 11:32
如何使用EJS模板引擎直接打印变量？
在EJS（Embedded JavaScript）模板引擎中打印变量是一个非常基础且常见的操作。EJS将数据与模板结合生成HTML内容，这在服务器端渲染（SSR）应用中非常实用。
### 基本语法
在EJS中，如果你想在HTML模板中直接输出一个变量的值，你可以使用 `<%= %>` 标签。这个标签会对包含的JavaScript表达式进行求值，并将结果转换为字符串后插入到模板输出中。例如：
```ejs
<p>用户名: <%= username %></p>
```
在这个例子中，`username` 是一个变量，它的值将被直接插入到 `<p>` 标签中。
### 示例
假设我们有一个简单的Express.js服务器，我们想在服务器端使用EJS模板引擎来渲染一个页面，显示用户的名字。我们可以这样设置：
1. **设置Express和EJS**
安装Express和EJS：
```bash
npm install express ejs
```
设置Express以使用EJS作为模板引擎：
```javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
```
2. **创建EJS模板**
在项目的 `views` 文件夹中创建一个叫 `profile.ejs` 的文件，内容如下：
```ejs
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>Welcome to your profile!</h1>
<p>用户名: <%= username %></p>
</body>
</html>
```
3. **渲染模板**
在Express中，当请求 `/profile` 路径时，渲染我们的 `profile.ejs` 模板，并传递一个包含用户名的对象：
```javascript
app.get('/profile', (req, res) => {
res.render('profile', { username: '张三' });
});
```
这里，当用户访问 `/profile` 时，他们会看到一个页面，上面写着 "用户名: 张三"。
### 总结
通过使用 `<%= %>` 标签，EJS允许你在HTML模板中直接输出JavaScript变量。这使得动态生成基于用户数据的内容变得非常直接和高效。在实际项目中，这种方式可以用来显示用户信息、文章内容、动态表格数据等。
阅读 17 · 7月20日 11:29
如何从ejs页面重定向到另一个页面
在EJS页面中进行重定向通常不是直接在EJS模板里进行的，而是在处理HTTP请求的服务器端代码中实现。EJS（Embedded JavaScript templating）是一个模板引擎，用来从服务器端渲染HTML页面，它本身不处理客户端或服务器端的重定向。重定向通常是在服务器端的路由处理逻辑中完成的。
假设您使用的是Node.js和Express框架，下面是一个如何实现重定向的示例：
### 步骤 1: 创建Express服务器
首先，我们需要设置一个基本的Express服务器。如果您还没有安装Express，可以通过npm安装它：
```bash
npm install express
```
然后，创建一个简单的Express服务器，如下所示：
```javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
// 首页路由
app.get('/', (req, res) => {
res.render('index');
});
// 重定向路由
app.get('/redirect', (req, res) => {
// 这里执行重定向到另一个路由
res.redirect('/new-page');
});
// 新页面路由
app.get('/new-page', (req, res) => {
res.render('new-page');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});
```
### 步骤 2: 创建EJS模板
在您的项目中的`views`文件夹里，您需要有两个EJS模板文件：`index.ejs`和`new-page.ejs`。
例如，`index.ejs`可能看起来像这样：
```html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1>欢迎来到首页</h1>
<a href="/redirect">去新页面</a>
</body>
</html>
```
而`new-page.ejs`可以是：
```html
<!DOCTYPE html>
<html>
<head>
<title>新页面</title>
</head>
<body>
<h1>这是新页面</h1>
<a href="/">回到首页</a>
</body>
</html>
```
### 步骤 3: 测试重定向
现在一切都设置好了，您可以启动服务器并在浏览器中访问 `http://localhost:3000`。点击“去新页面”的链接，您应该会看到浏览器被重定向到新页面。
在这个例子中，当用户访问`/redirect`路由时，服务器处理逻辑会调用`res.redirect('/new-page')`来重定向用户到`/new-page`路由，这个路由再渲染并显示`new-page.ejs`模板。这样，重定向过程是在服务器端完成的，而不是在EJS模板中。
阅读 18 · 7月20日 11:24
如何对 HTML 元素属性进行编码
在Web开发中，对HTML元素的属性进行编码是一个保护网站免受跨站脚本攻击（XSS）的重要安全措施。XSS攻击通常是通过注入恶意脚本到HTML页面来实现的，通过编码HTML属性可以有效阻止这类攻击。
### 1. 为什么需要对HTML属性进行编码？
当我们将用户输入直接插入到HTML代码中时，如果用户输入包含HTML代码或脚本，这些代码可能会被浏览器执行。例如，如果一个用户在一个输入字段中输入了`<script>alert('Hacked!');</script>`，并且这个输入被未加处理地直接插入到HTML页面中，那么这段脚本将会被执行。通过对属性进行编码，我们可以确保任何特殊字符都被转化成HTML实体，这样就不会被浏览器作为代码执行。
### 2. 如何进行HTML属性编码？
HTML属性编码主要是将属性值中的特殊字符转换成HTML实体。比如：
- `"` (双引号) 应该被编码为 `"`
- `'` (单引号) 应该被编码为 `'` 或 `'`
- `&` (和号) 应该被编码为 `&`
- `<` (小于号) 应该被编码为 `<`
- `>` (大于号) 应该被编码为 `>`
例如，如果用户的输入是`O'Reilly & "Associates"`，那么这个输入在被插入HTML属性时，应该被编码为`O'Reilly & "Associates"`。
### 3. 实际例子
假设我们有一个用户输入框，用户可以在里面输入他们的名字，然后这个名字会被显示在网页上。以下是使用JavaScript来处理并安全插入这个名字的代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<input type="text" id="userInput" placeholder="Enter your name">
<button onclick="updateName()">Submit</button>
<p id="displayName">Your name will appear here.</p>
<script>
function updateName() {
var userInput = document.getElementById('userInput').value;
var encodedInput = userInput.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
document.getElementById('displayName').innerText = encodedInput;
}
</script>
</body>
</html>
```
在这个例子中，每当用户提交他们的名字时，JavaScript函数`updateName`会被触发，它先对用户的输入进行编码，然后安全地将编码后的文本显示在页面上。
### 结论
对HTML属性进行编码是防止XSS攻击的有效方法之一。这不仅限于用户输入，任何动态生成并插入HTML属性的数据都应该进行编码，以确保Web应用的安全。通过常规的安全测试和代码审查来进一步增强安全性也是很重要的。
阅读 20 · 7月20日 11:23
如何将数据从.ejs文件发送到.js文件？
在web开发中，从 `.ejs` 文件（即Embedded JavaScript模板）向 `.js` 文件（通常是服务端的JavaScript文件或客户端的JavaScript脚本）发送数据通常涉及几个步骤。这里主要区分两种情况：一种是在服务器端使用Node.js和Express框架，另一种是在客户端处理数据。
### 服务器端：Node.js + Express
在这种场景下，`.ejs`文件作为模板文件，用于生成HTML。而`.js`文件通常是指服务端的脚件，比如Express的路由处理文件。在这种情况下，我们通常是在`.js`文件中将数据传递给`.ejs`文件，而不是反过来。下面是一个常见的例子：
1. **设置Express和EJS**
首先，你需要在你的Node.js项目中安装并设置Express和EJS。
```javascript
const express = require('express');
const app = express();
// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 设定视图文件夹
app.set('views', path.join(__dirname, '/views'));
```
2. **路由处理**
在Express的路由文件中，我们可以把数据传递给`.ejs`模板进行渲染。
```javascript
app.get('/', (req, res) => {
const data = { message: "Hello from server" };
res.render('index', data);
});
```
这里`data`对象包含了要传递给`index.ejs`模板的数据。
3. **在EJS模板中使用数据**
在`index.ejs`文件中，你可以使用`<%= message %>`来显示从`.js`文件传递过来的数据。
```html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
```
### 客户端
如果你想从客户端的`.ejs`生成的HTML向客户端的`.js`文件发送数据，通常的做法是在`.ejs`文件生成的HTML中嵌入数据，然后在`.js`文件中读取这些数据。
1. **嵌入数据到HTML**
在`index.ejs`中，你可以将数据嵌入到HTML元素的数据属性中，或者在`<script>`标签中定义全局变量。
```html
<div data-message="<%= message %>"></div>
<script>
var messageFromServer = "<%= message %>";
</script>
```
2. **在JavaScript中读取数据**
在客户端的`.js`文件中，你可以通过查询DOM元素的数据属性或使用全局变量来获取这些数据。
```javascript
// 使用数据属性
const message = document.querySelector('div').dataset.message;
// 使用全局变量
console.log(messageFromServer);
```
总结：通常情况下，我们是从`.js`文件向`.ejs`文件发送数据，尤其是在服务端渲染的场景中。如果需要在客户端处理，通常是通过HTML中间来传递数据。
阅读 14 · 7月20日 11:22
如何从 ejs 模板中访问 localStorage ？
在执行服务端渲染（例如使用EJS模板引擎）时，通常是在服务器环境下进行的，而`localStorage`是一个仅存在于浏览器环境的Web API，用于在用户的浏览器上存储数据。由于服务器端没有访问浏览器`localStorage`的能力，EJS模板直接访问`localStorage`是无法实现的。
但是，您可以在EJS模板中嵌入客户端JavaScript代码，该代码在模板被发送到客户端并在浏览器中解析后运行。在这个客户端代码中，您可以正常地访问`localStorage`。下面是一个如何在客户端JavaScript中使用`localStorage`的例子：
```html
<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Example</title>
</head>
<body>
<h1>Welcome to our website</h1>
<script type="text/javascript">
// 检查localStorage是否可用
if (typeof(Storage) !== "undefined") {
// 尝试从localStorage获取数据
var data = localStorage.getItem('someKey');
if (data) {
console.log('Data retrieved from localStorage:', data);
// 这里可以将获取到的数据用于各种用途，例如显示在页面上
// document.getElementById('someElement').textContent = data;
} else {
console.log('No data in localStorage for key "someKey"');
}
} else {
console.log('Sorry, your browser does not support Web Storage...');
}
</script>
</body>
</html>
```
在上面的例子中，当EJS模板在服务器端渲染并发送到客户端浏览器时，JavaScript代码将会检查浏览器是否支持`localStorage`，然后尝试从中获取键为`someKey`的数据。如果找到了数据，它会在控制台中打印出来，否则，它会打印出一条消息说没有找到数据。
如果你想在服务器端与客户端之间共享数据，通常的做法是在服务器端渲染模板时将数据嵌入到模板中，然后在客户端通过JavaScript将数据保存到`localStorage`中。这样，数据在客户端可以被进一步使用，而不是直接在服务器端尝试访问`localStorage`。
例如，在EJS模板中，您可以这样插入数据：
```ejs
<script type="text/javascript">
// 假设我们从服务器端传递了一个变量 `serverData`
var serverData = <%- JSON.stringify(serverData) %>;
// 存储到localStorage
localStorage.setItem('serverData', serverData);
</script>
```
在上面的EJS代码段中，`serverData`是从服务器端传递到模板的变量。模板在插入这些数据时将其转换为一个JSON字符串，然后这段客户端JavaScript代码会在页面加载时运行，将数据存储到`localStorage`中以供后续使用。
阅读 50 · 6月27日 12:14
如何将EJS模板引擎与NestJS一起使用？
在NestJS中使用EJS模板引擎并不是一个非常常见的场合，因为NestJS主要用于构建API，通常与前后端分离的场景更为契合。不过，如果你需要在NestJS中使用EJS作为服务器端模板引擎来渲染HTML，你可以按照以下步骤进行：
1. **安装相关依赖**:
你需要首先安装`ejs`包作为项目的依赖。
```bash
npm install ejs
```
2. **配置NestJS以使用EJS**:
在你的NestJS应用中，需要配置`ViewEngine`以使用EJS。这通常在`main.ts`文件中完成。
```typescript
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as express from 'express';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.use(express.static('public')); // 如果你有静态文件（如样式表、JavaScript文件、图像等）。
app.setViewEngine('ejs'); // 设置EJS为模板引擎。
await app.listen(3000);
}
bootstrap();
```
3. **创建EJS模板文件**:
在你的项目目录中，你需要创建一个文件夹来存储EJS模板文件（例如`views`），并在里面创建EJS模板文件（例如`index.ejs`）。
```
/src
/views
index.ejs
```
在`index.ejs`文件中，你可以编写HTML代码，并使用EJS的模板语法：
```html
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
```
4. **在控制器中渲染EJS模板**:
接下来，在你的控制器中，你可以使用`@Render`装饰器或者`res.render`方法来渲染EJS模板并发送响应。
```typescript
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index') // 指向views文件夹下的index.ejs文件。
root() {
return { title: 'Hello World', message: 'Welcome to NestJS with EJS!' };
}
}
```
以上步骤提供了一个基本的指南，说明了如何在NestJS应用程序中集成EJS模板引擎。重要的是要记住，这种整合通常用于服务端渲染（SSR）的场景，这在现代Web开发中越来越少见，因为现代前端框架（如React、Angular、Vue等）通常负责视图层的渲染。如果你的NestJS应用需要与这些前端框架协作，你可能会倾向于构建一个纯API服务，而不是使用EJS来渲染HTML。
阅读 60 · 6月27日 12:14