Creating a Node back-end using the MVC software design pattern

2025-06-04

使用 MVC 软件设计模式创建 Node 后端

在本教程中，您将学习如何使用模型-视图-控制器 (MVC) 软件设计模式创建 Node 后端。此设计模式使您能够将用户界面划分为三个不同的元素。业务逻辑被分离，以便数据、用户界面和用户输入不会混杂在一起。由于不同层级解耦，这使得架构更加简洁，从而可以更快速、更轻松地进行更改。

然而，这里需要注意的是，如今这种软件设计模式中的视图部分已不再像几年前那么重要。这是因为我们现在有了像 React、Vue、Angular 和 Svelte 这样的前端框架来构建应用程序的前端。尽管如此，了解这些概念仍然很有用，因为当后端开发人员构建用于返回某种数据的 REST 和 GraphQL API 时，模型和控制器仍然会被使用。这些数据通常用于 API 中，并使用 fetch 或 Axios API 进行检索。

先决条件

确保已安装以下工具和包

设计模式

模型

模型是此设计模式的主要组成部分。它负责处理结构内部的所有数据。所有数据、业务逻辑和原则都将在这里定义。

看法

本质上，视图就是用户界面。这是应用程序中用户能够直观看到的部分。所以，基本上就是设计好的前端。在 React、Vue、Angular 和 Svelte 等前端框架出现之前，后端开发人员使用的是 EJS、PUG 和 Handlebars 等模板语言。

控制器

控制器可以被视为应用程序的大脑。它接收用户请求的任何输入，然后将其转换为模型和视图可以解释的命令。

设置项目

在桌面或目录中创建一个名为 my-app 的文件夹，然后使用 __cd 命令进入该文件夹。同时在代码编辑器中打开该文件夹。确保您位于my-app文件夹中，然后在终端应用中运行以下命令。

mkdir backend
cd backend
npm init -y
npm i express nodemon ejs
mkdir controllers models public routes src  
mkdir src/pages
touch index.js
Enter fullscreen mode Exit fullscreen mode

这将为我们的项目创建基本设置。现在让我们创建一个简单的 Express 服务器。将下面的代码复制并粘贴到index.js文件中。

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Home Route'));

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

现在将这些运行脚本添加到package.json文件中。

    "scripts": {
        "start": "node index.js",
        "dev": "nodemon index.js"
    },
Enter fullscreen mode Exit fullscreen mode

在您的终端应用中，运行以下任一运行代码，即可在 Web 浏览器中查看应用的运行情况。第一个运行代码使用 Node，这意味着如果您想查看更改，需要重启服务器。第二个运行代码使用 Nodemon，它支持热加载，这意味着您只需重新加载 Web 浏览器即可查看新的更改。

npm run start
Enter fullscreen mode Exit fullscreen mode 
npm run dev
Enter fullscreen mode Exit fullscreen mode

创建 MVC 控制器

现在该创建一些控制器了。创建两个文件，一个放在controllersadmin.js文件夹下，另一个放在routes文件夹下。接下来，创建一个文件，放在models文件夹下。现在，创建一个文件，放在src/pages文件夹下。将以下代码添加到该文件中。AnimeData.jsonindex.ejsindex.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Home Route</title>
    </head>
    <body>
        <h1>Home Route</h1>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

将下面的代码放入AnimeData.json文件中。

[
    {
        "id": "1",
        "type": "Anime",
        "name": "Boku no Hero Academia"
    },
    {
        "id": "2",
        "type": "Anime",
        "name": "Jujutsu Kaisen"
    },
    {
        "id": "3",
        "type": "Anime",
        "name": "Shingeki no Kyojin"
    }
]
Enter fullscreen mode Exit fullscreen mode

将以下代码添加到控制器admin.js文件夹内的文件中。

const AnimeData = require('../models/AnimeData.json');

exports.getIndex = (req, res) => {
    res.render('index');
};

exports.getAnime = (req, res) => {
    res.json(AnimeData);
};
Enter fullscreen mode Exit fullscreen mode

接下来将下面的代码添加到routesadmin.js文件夹内的文件中。

const express = require('express');
const adminController = require('../controllers/admin');

const router = express.Router();

router.get('/', adminController.getIndex);

router.get('/anime', adminController.getAnime);

module.exports = router;
Enter fullscreen mode Exit fullscreen mode

最后使用下面的代码更新index.js根文件夹中的文件。

const express = require('express');
const path = require('path');
const adminRoute = require('./routes/admin');

const app = express();

// EJS template engine setup
app.set('view engine', 'ejs');
app.set('views', './src/pages');

// Setting up the directory on the server for CSS, JavaScript and media files
app.use('/static', express.static(path.join(__dirname + '/public')));

// Configuring the server to work with form submissions and json files
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

// Connecting all of the routes
app.use('/', adminRoute);

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

您需要重新加载页面或重启服务器。现在，如果您访问主路由http://localhost:5000，它应该会加载该index.ejs文件。如果您访问http://localhost:5000/anime，您应该会在浏览器中看到返回的 JSON 文件中的数据。

将 CSS 和 JavaScript 文件连接到前端

最后一步是将 CSS 样式表和 JavaScript 文件连接到该文件。在publicindex.ejs文件夹中创建两个文件夹。一个名为css，另一个名为js。现在创建一个文件，并将其放入css文件夹中，并写入以下代码。styles.css

body {
    background: #bada55;
}
Enter fullscreen mode Exit fullscreen mode

接下来创建一个文件并将其放入jsscripts.js文件夹中，其中包含以下代码。

console.log('Hello World');
Enter fullscreen mode Exit fullscreen mode

最后使用下面的代码更新index.ejs文件，该文件现在包含 CSS 和 JavaScript 文件的链接。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Home Route</title>
        <link rel="stylesheet" href="http://localhost:5000/static/css/styles.css" />
    </head>
    <body>
        <h1>Home Route</h1>

        <script src="http://localhost:5000/static/js/scripts.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

刷新浏览器或重启服务器。如果返回主页，应该会看到绿色背景；如果返回浏览器控制台，应该会看到代码Hello World。以上就是使用 MVC 软件设计模式创建 Node 后端服务器的基础知识。如果打算将后端连接到 React 之类的框架，则不需要src文件夹。您可以使用models文件夹以 json 格式返回数据。此外，您还可以在models文件夹中编写用于将后端连接到 mongodb、postgresql 和 HarperDB 等数据库的编程逻辑。

最后的想法

我真心希望您喜欢这篇文章并从中有所收获。作为一名内容创作者和技术作家，我热衷于分享我的知识，帮助他人实现目标。让我们通过社交媒体建立联系吧！您可以在Linktree上找到我的所有社交媒体个人资料和博客。

和平✌️

文章来源：https://dev.to/andrewbaisden/creating-a-node-back-end-using-the-mvc-software-design-pattern-5d82
Devto 翻译
PREV
创建连接到 PostgreSQL 和 HarperDB 的 React/Node 应用
NEXT
2022 年成为开发人员的 8 个 GitHub 资源