正文

掌握Express.js：从入门到实战，轻松搭建高效Web应用

/0 浏览量
0325

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 搭建的简单博客应用示例：

  1. 安装必要的依赖项：
npm install express ejs mongoose
  1. 创建一个名为 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);
  1. 在 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');
});
  1. 创建一个名为 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 应用。

-- 展开阅读全文 --