如何在 Express.js 中使用 MVC 架构-JavaScript中文网-JavaScript教程资源分享门户

MVC 架构是一种常见的软件设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和控制器（Controller）。在前端开发中，MVC 架构被广泛应用于 Web 应用程序的设计和实现。本文将介绍如何在 Express.js 中使用 MVC 架构来构建 Web 应用程序。

MVC 架构的概述

MVC 架构是一种将应用程序分为三个部分的软件设计模式。这三个部分分别是：

模型（Model）：负责处理应用程序的数据和业务逻辑。
视图（View）：负责展示数据给用户。
控制器（Controller）：处理用户的输入和事件，并且更新模型和视图。

MVC 架构的优点在于它将应用程序分成了多个部分，使得应用程序更易于维护和扩展。同时，这种架构也使得开发人员可以更加专注于自己的领域，例如模型开发人员可以专注于数据和业务逻辑的实现，视图开发人员可以专注于用户界面的设计和实现，控制器开发人员可以专注于用户输入和事件的处理。

在 Express.js 中使用 MVC 架构

在 Express.js 中使用 MVC 架构，我们可以将模型、视图和控制器分别实现为三个独立的模块。下面是一个简单的示例：

模型

模型负责处理应用程序的数据和业务逻辑。我们可以将模型实现为一个独立的模块，例如：

// javascriptcn.com 代码示例
// models/user.js
const users = [];

function addUser(user) {
  users.push(user);
}

function getUsers() {
  return users;
}

module.exports = {
  addUser,
  getUsers,
};

在上述代码中，我们实现了一个简单的用户模型，它包含了两个方法：addUser 和 getUsers。addUser 方法用于添加用户，getUsers 方法用于获取所有用户。

视图

视图负责展示数据给用户。我们可以将视图实现为一个独立的模块，例如：

// javascriptcn.com 代码示例
// views/user.js
function renderUsers(users) {
  let html = '<ul>';

  for (const user of users) {
    html += `<li>${user.name}</li>`;
  }

  html += '</ul>';

  return html;
}

module.exports = {
  renderUsers,
};

在上述代码中，我们实现了一个简单的用户视图，它包含了一个方法：renderUsers。这个方法接受一个用户数组，并返回一个 HTML 字符串，用于展示用户列表。

控制器

控制器负责处理用户的输入和事件，并且更新模型和视图。我们可以将控制器实现为一个独立的模块，例如：

// javascriptcn.com 代码示例
// controllers/user.js
const userModel = require('../models/user');
const userView = require('../views/user');

function addUser(user) {
  userModel.addUser(user);
}

function renderUsers() {
  const users = userModel.getUsers();
  const html = userView.renderUsers(users);
  return html;
}

module.exports = {
  addUser,
  renderUsers,
};

在上述代码中，我们实现了一个简单的用户控制器，它包含了两个方法：addUser 和 renderUsers。addUser 方法用于添加用户，renderUsers 方法用于获取所有用户并渲染用户视图。

路由

在 Express.js 中，我们可以使用路由来将控制器和视图连接起来。下面是一个简单的路由示例：

// javascriptcn.com 代码示例
// routes/user.js
const express = require('express');
const router = express.Router();
const userController = require('../controllers/user');

router.get('/', (req, res) => {
  const html = userController.renderUsers();
  res.send(html);
});

router.post('/', (req, res) => {
  const user = req.body;
  userController.addUser(user);
  res.redirect('/');
});

module.exports = router;

在上述代码中，我们创建了一个名为 user 的路由，它包含了两个路由处理程序。第一个处理程序用于获取所有用户并渲染用户视图，第二个处理程序用于添加用户并重定向到用户列表页面。

应用程序

最后，我们可以将模型、视图、控制器和路由组合起来，构建一个完整的 Express.js 应用程序。下面是一个简单的应用程序示例：

// javascriptcn.com 代码示例
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const userRouter = require('./routes/user');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use('/users', userRouter);

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

在上述代码中，我们创建了一个 Express.js 应用程序，并使用 bodyParser 中间件解析请求体。然后，我们将 user 路由挂载到应用程序的 /users 路径下，并启动应用程序监听端口 3000。

总结

在本文中，我们介绍了 MVC 架构的概念和优点，并且演示了如何在 Express.js 中使用 MVC 架构来构建 Web 应用程序。我们将模型、视图和控制器分别实现为三个独立的模块，并且使用路由将它们连接起来。这种架构使得应用程序更易于维护和扩展，并且使得开发人员可以更加专注于自己的领域。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653c48477d4982a6eb67750b