Express.js 是一个简洁而灵活的 Node.js Web 应用程序框架,它提供了一组强大的特性帮助你构建高性能、可扩展的网络应用。在本文中,我们将从零开始学习 Express.js,并构建一个简单的 Node.js 应用。
准备工作
在开始之前,我们需要确保以下环境已经安装并配置好:
- Node.js
- npm (Node.js 的包管理器)
你可以通过在命令行中运行 node -v 和 npm -v 来验证它们是否正确安装。
创建一个新的 Express.js 应用
首先,我们需要创建一个新的 Express.js 应用。按照以下步骤进行操作:
- 打开命令行工具,并进入你想要创建应用的目录。
- 运行以下命令来创建一个新的 Express.js 应用:
$ npx express-generator
这将创建一个名为 myapp 的新目录,并在其中生成了 Express.js 的基本文件结构。
- 进入
myapp目录:
$ cd myapp
- 安装应用所需的依赖:
$ npm install
- 启动应用:
$ npm start
现在,你的应用应该已经在本地启动,并监听当前系统上的默认端口。在浏览器中访问 http://localhost:3000,你将看到一个欢迎页面。
探索 Express.js 应用结构
现在,让我们来深入了解一下 Express.js 应用的结构。
app.js: 这是应用的主要文件,其中包含了应用的配置和路由信息。bin/www: 这是应用的入口文件,它将创建一个 HTTP 服务器并启动应用。public/: 这个目录中存放了应用的公共资源,如样式表和脚本文件。routes/: 这个目录中包含了应用的路由文件,每个路由文件对应一个或多个路由路径。views/: 这个目录中存放了应用的视图文件,比如 HTML 文件。package.json: 这个文件包含了应用的元数据和依赖信息。
添加一个新的路由
现在,我们将向应用中添加一个新的路由和对应的页面。
- 在
routes/目录中创建一个新的文件,命名为users.js。 - 在
users.js文件中,添加以下代码:
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
这段代码定义了一个简单的路由,当访问 /users 路径时,将返回 "respond with a resource"。
- 在
app.js文件中,将以下代码添加到路由部分的末尾:
var usersRouter = require('./routes/users');
app.use('/users', usersRouter);
这将告诉 Express.js 应用在 /users 路径下使用 usersRouter 这个路由。
- 重新启动应用并访问
http://localhost:3000/users,你将看到 "respond with a resource"。
构建动态页面
在现实世界的应用中,页面通常是动态生成的。让我们来创建一个返回动态内容的页面。
- 在
views/目录下创建一个名为user.ejs的文件,并添加以下代码:
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>User Profile</h1>
<p>User ID: <%= userId %></p>
<p>Username: <%= username %></p>
</body>
</html>
这是一个简单的 EJS 模板,它将根据传入的 userId 和 username 渲染页面内容。
- 在
users.js文件中修改/路由的处理函数:
router.get('/', function(req, res, next) {
res.render('user', { userId: 1, username: 'John' });
});
这将告诉应用在访问 /users 路径时使用 user.ejs 模板渲染页面,并传入 userId 和 username。
- 重新启动应用并访问
http://localhost:3000/users,你将看到一个包含用户信息的页面。
总结
通过这篇博客,我们学习了如何从零开始使用 Express.js 构建一个简单的 Node.js 应用。我们了解了 Express.js 的基本结构和用法,并学会了添加路由和构建动态页面。希望这篇博客对你学习 Express.js 有所帮助!

评论 (0)