正文

从零开始，掌握Express.js框架：入门教程及实战案例

/0 浏览量
0325

引言

Express.js 是一个简洁、灵活的 Node.js Web 应用框架，它可以帮助开发者快速构建 Web 应用程序。本文将从零开始，带你一步步掌握 Express.js 框架，包括入门教程和实战案例。

第一章：Express.js 简介

1.1 Express.js 的起源和特点

Express.js 是由 TJ Holowaychuk 在 2010 年创建的，它基于 Node.js 平台，旨在提供一个简单、快速的开发环境。Express.js 的特点如下：

  • 轻量级：Express.js 本身非常轻量，没有依赖任何外部库。
  • 灵活：Express.js 允许开发者根据需求自定义中间件，实现各种功能。
  • 易用：Express.js 提供了丰富的 API，方便开发者快速上手。

1.2 安装 Node.js 和 Express.js

在开始学习 Express.js 之前，需要先安装 Node.js 和 Express.js。以下是安装步骤：

  1. 访问 Node.js 官网，下载并安装适合自己操作系统的 Node.js 版本。
  2. 打开命令行工具，输入 npm install express 命令安装 Express.js。

第二章：Express.js 基础教程

2.1 创建第一个 Express.js 应用

以下是一个简单的 Express.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 at http://localhost:${port}/`);
});

在这个例子中，我们创建了一个名为 app 的 Express.js 应用实例，并定义了一个路由 /。当访问这个路由时，服务器会返回 “Hello World!“。

2.2 路由和中间件

Express.js 使用路由和中间件来处理请求。以下是路由和中间件的基本用法：

路由

app.get('/users', (req, res) => {
  res.send('Users list');
});

中间件

中间件是一个函数，它会在请求处理过程中被调用。以下是中间件的基本用法：

app.use((req, res, next) => {
  console.log('中间件执行');
  next();
});

2.3 模板引擎

Express.js 支持多种模板引擎，如 EJS、Pug、Handlebars 等。以下是一个使用 EJS 的示例：

  1. 安装 EJS：
npm install ejs
  1. 配置 EJS：
app.set('view engine', 'ejs');
  1. 创建视图文件（如 index.ejs）：
<!DOCTYPE html>
<html>
<head>
  <title>Express.js</title>
</head>
<body>
  <h1>Hello, {{name}}!</h1>
</body>
</html>
  1. 使用视图：
app.get('/', (req, res) => {
  res.render('index', { name: 'World' });
});

第三章：Express.js 实战案例

3.1 创建一个简单的博客应用

以下是一个使用 Express.js 创建的简单博客应用的示例：

  1. 安装所需依赖：
npm install express ejs mongoose
  1. 创建模型（如 Post.js）：
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const PostSchema = new Schema({
  title: String,
  content: String
});

module.exports = mongoose.model('Post', PostSchema);
  1. 创建路由（如 posts.js）：
const express = require('express');
const router = express.Router();
const Post = require('../models/Post');

router.get('/', async (req, res) => {
  const posts = await Post.find();
  res.render('posts/index', { posts });
});

router.get('/new', (req, res) => {
  res.render('posts/new');
});

router.post('/', async (req, res) => {
  const post = new Post({
    title: req.body.title,
    content: req.body.content
  });
  await post.save();
  res.redirect('/posts');
});

module.exports = router;
  1. 配置应用（如 app.js）：
const express = require('express');
const mongoose = require('mongoose');
const expressLayouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(expressLayouts);
app.use(express.static('public'));

mongoose.connect('mongodb://localhost:27017/blog', { useNewUrlParser: true, useUnifiedTopology: true });

const postsRouter = require('./routes/posts');
app.use('/posts', postsRouter);

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

通过以上步骤，你就可以创建一个简单的博客应用了。

总结

本文从零开始，介绍了 Express.js 框架的基础知识和实战案例。通过学习本文，你可以快速掌握 Express.js，并具备创建实际 Web 应用程序的能力。祝你在 Express.js 的学习道路上越走越远！

-- 展开阅读全文 --