使用 Node.js 和 Express 创建 MVC 应用程序-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，MVC（Model-View-Controller）是一种常用的设计模式，它将应用程序分为三个部分：模型、视图和控制器。这种分离的方式使得代码更加清晰、易于维护和扩展。在本文中，我们将介绍如何使用 Node.js 和 Express 来创建一个基于 MVC 的应用程序。

什么是 Node.js 和 Express？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它可以在服务器端运行 JavaScript 代码。Node.js 可以轻松地处理 I/O 操作，这使得它成为开发高性能网络应用程序的理想选择。

Express 是一个流行的 Node.js Web 应用程序框架，它提供了一些有用的功能，如路由、中间件和模板引擎。使用 Express 可以快速地构建 Web 应用程序。

创建 MVC 应用程序

在本节中，我们将介绍如何使用 Node.js 和 Express 来创建一个基于 MVC 的应用程序。我们将创建一个简单的应用程序，它将从数据库中获取数据并将其呈现在网页上。

创建项目

首先，我们需要创建一个新的 Node.js 项目。在终端中，进入一个空文件夹，并执行以下命令：

npm init

这将引导我们创建一个新的 Node.js 项目。我们可以使用默认设置，也可以根据需要进行更改。

接下来，我们需要安装 Express 和一些其他必要的模块。在终端中，执行以下命令：

npm install express body-parser mongoose ejs --save

这将安装 Express、body-parser、mongoose 和 ejs 模块，并将它们添加到项目的依赖项中。

创建模型

在 MVC 中，模型是应用程序的数据层。在我们的应用程序中，我们将使用 MongoDB 作为数据库，使用 Mongoose 模块来定义和操作模型。

在项目的根目录下，创建一个名为 models 的文件夹，并在其中创建一个名为 user.js 的文件。在 user.js 中，定义一个名为 User 的模型，如下所示：

// javascriptcn.com 代码示例
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

在上面的代码中，我们使用 mongoose.Schema 来定义用户模型的属性。然后，我们使用 mongoose.model 将模式编译为模型。最后，我们将模型导出，以便在其他文件中使用。

创建视图

在 MVC 中，视图是应用程序的用户界面层。在我们的应用程序中，我们将使用 EJS（Embedded JavaScript）模板引擎来生成 HTML。

在项目的根目录下，创建一个名为 views 的文件夹，并在其中创建一个名为 index.ejs 的文件。在 index.ejs 中，编写以下 HTML 和 EJS 代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Users</title>
</head>
<body>
  <h1>Users</h1>
  <% users.forEach(function(user) { %>
    <div>
      <h2><%= user.name %></h2>
      <p><%= user.email %></p>
    </div>
  <% }); %>
</body>
</html>

在上面的代码中，我们使用 EJS 语法来生成 HTML。在模板中，我们使用 <% %> 标记来插入 JavaScript 代码，使用 <%= %> 标记来插入变量的值。

创建控制器

在 MVC 中，控制器是应用程序的逻辑层。在我们的应用程序中，我们将使用 Express 路由来定义控制器。

在项目的根目录下，创建一个名为 controllers 的文件夹，并在其中创建一个名为 users.js 的文件。在 users.js 中，编写以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const router = express.Router();
const User = require('../models/user');

router.get('/', function(req, res) {
  User.find({}, function(err, users) {
    if (err) {
      console.log(err);
    } else {
      res.render('index', { users: users });
    }
  });
});

module.exports = router;

在上面的代码中，我们使用 Express 路由来定义一个 GET 请求处理程序。在处理程序中，我们使用 User.find 方法从数据库中获取所有用户，并将它们传递给视图。

创建应用程序

现在，我们已经定义了模型、视图和控制器，我们需要将它们组合起来创建一个完整的应用程序。

在项目的根目录下，创建一个名为 app.js 的文件。在 app.js 中，编写以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const usersController = require('./controllers/users');

const app = express();

// 连接到 MongoDB 数据库
mongoose.connect('mongodb://localhost/mvc-app', { useNewUrlParser: true });

// 设置模板引擎
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

// 使用 body-parser 中间件解析 POST 请求体
app.use(bodyParser.urlencoded({ extended: false }));

// 使用控制器处理路由
app.use('/users', usersController);

// 启动服务器
app.listen(3000, function() {
  console.log('Server started on port 3000');
});

在上面的代码中，我们首先创建一个 Express 应用程序，并将其存储在变量 app 中。然后，我们连接到 MongoDB 数据库，并设置 EJS 模板引擎。接下来，我们使用 body-parser 中间件来解析 POST 请求体，并使用 app.use 方法将控制器添加到路由中。最后，我们启动服务器并监听端口 3000。

现在，我们已经创建了一个基于 MVC 的应用程序。我们可以使用以下命令启动应用程序：

node app.js

然后，在浏览器中访问 http://localhost:3000/users，即可查看所有用户的列表。

总结

在本文中，我们介绍了如何使用 Node.js 和 Express 来创建一个基于 MVC 的应用程序。我们从定义模型、视图和控制器开始，然后将它们组合起来创建一个完整的应用程序。通过本文的学习，读者可以了解到 MVC 的基本概念和实现方式，并可以使用 Node.js 和 Express 来构建高性能、易于维护和扩展的 Web 应用程序。

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