1. 引言
Express.js 是一个流行的 Node.js Web 应用框架,它可以帮助开发者快速创建高性能的 Web 应用。本文将带领您从 Express.js 的基本概念入手,逐步深入到实战应用,帮助您轻松搭建高效 Web 应用。
2. Express.js 简介
Express.js 是由 TJ Holowaychuk 开发的一个简洁、灵活的 Node.js Web 应用框架。它提供了中间件、路由、模板引擎等功能,使得开发者可以专注于业务逻辑的实现,而无需关心底层细节。
3. 安装 Node.js 和 npm
在开始学习 Express.js 之前,您需要确保已经安装了 Node.js 和 npm。可以通过以下命令检查您的 Node.js 版本:
node -v
npm -v
如果您的系统中没有安装 Node.js 和 npm,请前往 Node.js 官网 下载并安装。
4. 创建 Express.js 应用
创建一个 Express.js 应用非常简单,只需要执行以下命令:
mkdir my-express-app
cd my-express-app
npm init -y
npm install express
这将创建一个名为 my-express-app 的文件夹,并在其中初始化一个 npm 项目,然后安装 Express.js 框架。
5. 编写 Express.js 应用
在项目根目录下,创建一个名为 app.js 的文件,并编写以下代码:
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 on http://localhost:${port}`);
});
这段代码创建了一个简单的 Express.js 应用,当访问根路径 / 时,会返回 “Hello World!“。
6. 路由和中间件
路由是 Express.js 中用于处理不同请求的方法。以下是几个常见的路由:
app.get():处理 GET 请求app.post():处理 POST 请求app.put():处理 PUT 请求app.delete():处理 DELETE 请求
中间件是 Express.js 中的一个重要概念,它允许您在请求处理链中插入自定义功能。以下是一个简单的中间件示例:
app.use((req, res, next) => {
console.log('中间件处理');
next();
});
7. 模板引擎
Express.js 支持多种模板引擎,如 EJS、Pug、Handlebars 等。以下是一个使用 EJS 模板引擎的示例:
app.set('view engine', 'ejs');
app.get('/about', (req, res) => {
res.render('about', { title: '关于我们' });
});
在 views 文件夹中创建一个名为 about.ejs 的文件,并编写以下代码:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
</body>
</html>
8. 实战案例:博客应用
以下是一个使用 Express.js 搭建的简单博客应用示例:
- 安装必要的依赖项:
npm install express ejs mongoose
- 创建一个名为
models的文件夹,并在其中创建一个名为article.js的文件,用于定义文章模型:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ArticleSchema = new Schema({
title: String,
content: String,
author: String,
created_at: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Article', ArticleSchema);
- 在
app.js文件中,添加以下代码:
const express = require('express');
const mongoose = require('mongoose');
const Article = require('./models/article');
mongoose.connect('mongodb://localhost:27017/myblog', { useNewUrlParser: true });
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
Article.find({}).sort({ created_at: -1 }).exec((err, articles) => {
if (err) {
res.send(err);
} else {
res.render('index', { articles: articles });
}
});
});
app.get('/about', (req, res) => {
res.render('about');
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
- 创建一个名为
views的文件夹,并在其中创建以下文件:
index.ejs:用于显示文章列表about.ejs:用于显示关于我们页面
在 index.ejs 文件中,添加以下代码:
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
</head>
<body>
<h1>我的博客</h1>
<ul>
<% articles.forEach((article) => { %>
<li>
<h2><%= article.title %></h2>
<p><%= article.content %></p>
<p>作者: <%= article.author %></p>
</li>
<% }); %>
</ul>
</body>
</html>
至此,您已经成功搭建了一个简单的博客应用。您可以通过访问 http://localhost:3000 来查看效果。
9. 总结
通过本文的学习,您已经掌握了 Express.js 的基本概念、路由、中间件、模板引擎等知识。希望您能够将所学知识应用到实际项目中,搭建出更多优秀的 Web 应用。
