nodejs 实现mvc

王林原创: 2023-05-17 10:23:37 282浏览

Node.js 是一个开源、跨平台的 JavaScript 运行环境。它使得我们能够使用 JavaScript 编写服务器端应用程序。使用 Node.js 可以很轻松地开发高性能的服务端应用程序。在本文中，我们将介绍如何使用 Node.js 实现 MVC 架构。

什么是 MVC？

MVC 是 Model-View-Controller 的缩写。它是一种设计模式，以一种分离应用程序的方式组织代码，使应用程序易于维护和扩展。

Model：包含所有应用程序的数据和相关的业务逻辑。
View：用户界面，它从 Model 中获取数据并将其呈现给用户。
Controller：处理用户界面和业务逻辑之间的交互，并将结果返回给用户界面。它可以充当一个中间件，如路由、中间件和控制器。

MVC 使代码非常模块化，可以很容易地重构和维护应用程序的不同部分。在 Node.js 中，我们可以使用各种框架来构建 MVC 应用程序。在本文中，我们将讨论如何使用 Express 框架来实现 MVC 架构。

如何使用 Express 框架实现 MVC？

Express 是 Node.js 的一个流行框架，它提供了快速构建 Web 应用程序的工具和中间件。我们可以使用 Express 框架来实现 MVC。

首先，我们需要安装 Express 框架。在命令行中使用以下命令：

npm install express --save

接下来，我们需要安装模板引擎。在本文中，我们将使用 EJS 作为模板引擎。在命令行中使用以下命令：

npm install ejs --save

下面是一个基本的目录结构：

- app/
    - controllers/
    - models/
    - views/
- public/
- routes/
- app.js

我们将应用程序分为三个组件：控制器、模型和视图。

控制器

在控制器文件夹中，我们将会定义我们的控制器逻辑。例如，我们可以有一个名为 userController.js 的文件，它将处理与用户相关的请求。

在 userController.js 文件中，我们可以导出不同的对象和方法，以便在应用程序中使用它们。以下是一个示例：

const User = require('../models/user');

const UserController = {};

UserController.index = (req, res) => {
    // 获取所有用户
    User.getAll((err, users) => {
        if (err) {
            console.log(err);
            return;
        }
        // 渲染视图
        res.render('users/index', { users });
    });
};

UserController.show = (req, res) => {
    // 获取单个用户
    User.getById(req.params.id, (err, user) => {
        if (err) {
            console.log(err);
            return;
        }
        // 渲染视图
        res.render('users/show', { user });
    });
};

module.exports = UserController;

在上面的代码中，我们定义了一个名为 UserController 的对象，并导出了两个方法：index 和 show。这些方法将获取用户数据并将其传递给 EJS 模板引擎，以供渲染。我们可以在应用程序的路由中使用这些方法来处理用户请求。

模型

在 models 文件夹中，我们将定义 Model 层的逻辑。例如，我们可以有一个名为 user.js 的文件，它将定义与用户相关的数据和业务逻辑。

在 user.js 文件中，我们可以使用 Node.js 的 ORM（对象关系映射）框架来定义模型。以下是一个示例：

const sql = require('../config/db').pool;

const User = {};

User.getAll = (callback) => {
    sql.query('SELECT * FROM users', (err, users) => {
        if (err) {
            callback(err, null);
            return;
        }
        callback(null, users);
    });
};

User.getById = (id, callback) => {
    sql.query('SELECT * FROM users WHERE id = ?', [id], (err, user) => {
        if (err) {
            callback(err, null);
            return;
        }
        callback(null, user[0]);
    });
};

module.exports = User;

在上面的代码中，我们导出了一个名为 User 的对象，并定义了两个方法：getAll 和 getById。这些方法将执行 SQL 查询，并将结果传递回控制器。

视图

在 views 文件夹中，我们将定义我们的 EJS 视图文件。例如，我们可以有一个名为 index.ejs 的文件，用于呈现所有用户的数据。

以下是一个示例：

<h1>All Users</h1>

<% if (users && users.length > 0) { %>
  <ul>
    <% users.forEach(function(user) { %>
      <li><a href="/users/<%= user.id %>"><%= user.name %></a></li>
    <% }); %>
  </ul>
<% } else { %>
  <p>No users found.</p>
<% } %>

在上述代码中，我们将使用 EJS 语法来呈现所有用户并创建列表。我们在控制器中传递用户数据并在视图中呈现它。

路由

在 routes 文件夹中，我们将定义应用程序的路由。在 app.js 文件中，我们将配置我们的中间件。以下是一个示例：

const express = require('express');
const app = express();
const router = express.Router();
const UserController = require('./app/controllers/userController');

// 路由
router.get('//m.sbmmt.com/m/', UserController.index);
router.get('/users/:id', UserController.show);

// 中间件
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.set('views', __dirname + '/app/views');
app.use(router);

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}.`);
});

在上述代码中，我们定义了两个路由：一个用于呈现所有用户的数据，另一个用于呈现单个用户的数据。我们还配置了中间件，使我们能够使用 EJS 模板引擎以及使用静态文件。最后，我们启动了服务器。