正文

掌握Express+EJS，轻松构建动态网页秘籍大公开

/0 浏览量
0414

在互联网高速发展的今天，构建一个动态网页已经成为许多开发者的需求。Express.js和EJS（嵌入式JavaScript模板）是两个强大的工具，它们可以帮助你轻松地搭建一个功能丰富的动态网站。下面，我就来为你揭秘如何掌握Express+EJS，轻松构建动态网页。

了解Express.js

Express.js是一个流行的Node.js框架，它提供了一个极简的API，用于快速构建单页、多页或混合型应用程序。Express.js以其轻量级和灵活性而闻名，可以与多种模板引擎和中间件无缝集成。

安装Express.js

首先，确保你的计算机上安装了Node.js。然后，通过以下命令安装Express.js：

npm init -y
npm install express

创建一个简单的Express应用

以下是一个简单的Express应用示例：

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

这段代码创建了一个基本的Express服务器，它会在访问根路径时返回“Hello World!”。

熟悉EJS模板引擎

EJS是一个简单的模板语言，它允许你将逻辑代码嵌入到HTML中，并动态地渲染页面。EJS与Express.js结合使用，可以生成动态的HTML页面。

安装EJS

在你的项目中安装EJS：

npm install ejs

配置Express使用EJS

在app.js中配置Express使用EJS：

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

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

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

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

创建EJS模板

创建一个名为index.ejs的文件在你的项目中的views文件夹里：

<!DOCTYPE html>
<html>
<head>
  <title>My First EJS Page</title>
</head>
<body>
  <h1>Hello, <%= title %></h1>
</body>
</html>

现在，当访问根路径时，它会渲染这个EJS模板，并显示“Hello, My First EJS Page”。

实践动态网页构建

1. 用户数据展示

假设我们要展示一个用户列表。首先，在数据库中获取用户数据，然后在Express应用中渲染这些数据。

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

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

// 假设的用户数据
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

app.get('/users', (req, res) => {
  res.render('users', { users: users });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

创建一个名为users.ejs的文件在你的views文件夹里：

<!DOCTYPE html>
<html>
<head>
  <title>User List</title>
</head>
<body>
  <h1>User List</h1>
  <ul>
    <% users.forEach(function(user) { %>
      <li><%= user.name %> - <%= user.age %> years old</li>
    <% }); %>
  </ul>
</body>
</html>

现在，当你访问/users时，它会渲染用户列表。

2. 动态表单和POST请求

创建一个简单的表单，允许用户提交数据，并在服务器端处理这些数据。

首先，创建一个名为form.ejs的文件在你的views文件夹里：

<!DOCTYPE html>
<html>
<head>
  <title>Submit Form</title>
</head>
<body>
  <h1>Submit Your Name</h1>
  <form action="/submit" method="post">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

然后，在app.js中添加处理POST请求的代码：

// ...之前的代码

app.post('/submit', (req, res) => {
  const name = req.body.name;
  console.log(`Received name: ${name}`);
  res.redirect('/form');
});

// ...之后的代码

现在，当你填写表单并提交时，服务器会打印出你的名字，并将你重定向回表单页面。

总结

通过以上内容，你已经掌握了Express+EJS的基础知识，并能够构建简单的动态网页。当然，这只是冰山一角，Express和EJS还有很多高级功能等待你去探索。继续实践和学习，你会成为一个构建动态网页的高手！

-- 展开阅读全文 --