第一季第15课 - MVC的概念

html


掌握模型-视图-控制器（MVC）设计模式：全面指南
目录

介绍
理解MVC设计模式

MVC是什么？
为什么选择MVC？


MVC的组成部分

Model
View
Controller


关注点分离
实施MVC：逐步指南

设置环境
创建Model
设计View
开发Controller


MVC实战：示例项目

项目概述
示例代码与解释


MVC的优缺点
何时何地使用MVC
MVC与其他设计模式的比较
结论
补充信息

比较表
附加资源




介绍
在软件开发领域，创建可扩展和可维护的应用程序至关重要。实现这一目标的最有效方法之一是采用健壮的设计模式。在这些模式中，Model-View-Controller (MVC) 模式作为一种基础架构脱颖而出，促进了有组织和高效的代码结构。
本全面指南深入探讨MVC设计模式的复杂性，探索其组成部分、优势、实施策略和实际应用。无论您是初学者还是寻求巩固理解的开发者，本电子书都提供了掌握MVC的宝贵见解。

理解MVC设计模式
MVC是什么？
Model-View-Controller (MVC) 是一种软件架构模式，将应用程序分为三个相互关联的组件：

Model：管理数据和业务逻辑。
View：处理显示和用户界面。
Controller：协调输入，将其转换为Model或View的命令。

这种分离便于有组织的代码管理，增强了可扩展性，并简化了协作开发。
为什么选择MVC？
采用MVC有以下几个优势：

关注点分离：数据、UI和控制逻辑之间有明确的界限。
增强的可维护性：更容易独立管理和更新各个组件。
可重用性：组件可以在应用程序的不同部分重复使用。
并行开发：团队可以同时在不同的组件上工作而不会产生冲突。


MVC的组成部分
Model
Model 表示应用程序的数据和业务规则。它封装了核心功能，并处理诸如检索、存储和操作数据的任务。Model与数据库交互，执行查询、更新和删除记录等操作。
主要职责：

管理数据和业务逻辑。
与数据库（SQL, NoSQL 等）交互。
强制执行数据验证和完整性。

View
View 是应用程序的用户界面。它向用户显示数据并捕捉用户交互。视图通常由HTML、CSS、JavaScript或其他UI框架等元素组成。
主要职责：

为用户呈现数据。
捕捉用户输入。
提供响应迅速且直观的界面。

Controller
Controller 作为Model和View之间的中介。它处理用户输入，与Model交互以检索或更新数据，并选择适当的视图来呈现响应。
主要职责：

处理用户请求。
执行输入验证。
协调Model和View之间的交互。
管理应用程序流程和逻辑。


关注点分离
MVC的核心原则之一是关注点分离，它将应用程序划分为不同的部分，每个部分负责特定的功能。这种方法有以下几个好处：

提高可读性：角色的清晰划分使代码库更易于导航。
便于维护：隔离的组件可以在不影响其他部分的情况下进行更新或调试。
增强可扩展性：便于在不破坏现有功能的情况下添加新功能。

通过将应用程序分区，MVC促进了简化的开发过程并促进了更清晰的代码架构。

实施MVC：逐步指南
设置环境
在深入实施之前，确保您的开发环境已准备就绪。根据您偏好的编程语言和框架，设置过程可能有所不同。对于本指南，我们将以Node.js和Express.js为例。
先决条件：

已安装Node.js。
可用的npm（Node Package Manager）。
基本的JavaScript知识。

安装步骤：




		
		
			
			
Java
			
			<pre>
mkdir mvc-app
cd mvc-app
npm init -y
			
				
					
				
					1
2
3
4
				
						<pre>
mkdir mvc-app
cd mvc-app
npm init -y
					
				
			
		







		
		
			
			
Java
			
			npm install express body-parser ejs
			
				
					
				
					1
				
						npm install express body-parser ejs
					
				
			
		


项目结构：




		
		
			
			
Java
			
			mvc-app/
├── controllers/
├── models/
├── views/
├── public/
├── routes/
├── app.js
└── package.json
			
				
					
				
					1
2
3
4
5
6
7
8
				
						mvc-app/
├── controllers/
├── models/
├── views/
├── public/
├── routes/
├── app.js
└── package.json
					
				
			
		


创建Model
Model 管理数据和业务逻辑。为了演示，我们将创建一个简单的Model来处理研讨会注册。
文件：models/Seminar.js




		
		
			
			
Java
			
			<pre>
// models/Seminar.js
const seminars = [];

class Seminar {
    constructor(id, name, arrivalDate, departureDate, placeOfStay, presentationFormat) {
        this.id = id;
        this.name = name;
        this.arrivalDate = arrivalDate;
        this.departureDate = departureDate;
        this.placeOfStay = placeOfStay;
        this.presentationFormat = presentationFormat;
    }

    static create(data) {
        const seminar = new Seminar(
            seminars.length + 1,
            data.name,
            data.arrivalDate,
            data.departureDate,
            data.placeOfStay,
            data.presentationFormat
        );
        seminars.push(seminar);
        return seminar;
    }

    static findAll() {
        return seminars;
    }
}

module.exports = Seminar;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
				
						<pre>
// models/Seminar.js
const seminars = [];
 
class Seminar {
    constructor(id, name, arrivalDate, departureDate, placeOfStay, presentationFormat) {
        this.id = id;
        this.name = name;
        this.arrivalDate = arrivalDate;
        this.departureDate = departureDate;
        this.placeOfStay = placeOfStay;
        this.presentationFormat = presentationFormat;
    }
 
    static create(data) {
        const seminar = new Seminar(
            seminars.length + 1,
            data.name,
            data.arrivalDate,
            data.departureDate,
            data.placeOfStay,
            data.presentationFormat
        );
        seminars.push(seminar);
        return seminar;
    }
 
    static findAll() {
        return seminars;
    }
}
 
module.exports = Seminar;
					
				
			
		



设计View
View 渲染用户界面。我们将使用EJS（嵌入式JavaScript）模板创建动态HTML页面。
文件：views/index.ejs




		
		
			
			
Java
			
			<pre>
<!DOCTYPE html>
<html>
<head>
    <title>研讨会注册</title>
</head>
<body>
    <h1>注册参加研讨会</h1>
    <form action="/register" method="POST">
        <label>姓名：</label><br>
        <input type="text" name="name" required><br><br>

        <label>到达日期：</label><br>
        <input type="date" name="arrivalDate" required><br><br>

        <label>离开日期：</label><br>
        <input type="date" name="departureDate" required><br><br>

        <label>住宿地点：</label><br>
        <input type="text" name="placeOfStay" required><br><br>

        <label>演示形式：</label><br>
        <select name="presentationFormat" required>
            <option value="Lecture">讲座</option>
            <option value="Seminar">研讨会</option>
            <option value="Colloquium">座谈会</option>
        </select><br><br>

        <button type="submit">注册</button>
    </form>

    <h2>已注册参与者</h2>
    <ul>
        <% seminars.forEach(function(seminar) { %>
            <li><%= seminar.name %> - <%= seminar.presentationFormat %></li>
        <% }) %>
    </ul>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
				
						<pre>
<!DOCTYPE html>
<html>
<head>
    <title>研讨会注册</title>
</head>
<body>
    <h1>注册参加研讨会</h1>
    <form action="/register" method="POST">
        <label>姓名：</label><br>
        <input type="text" name="name" required><br><br>
 
        <label>到达日期：</label><br>
        <input type="date" name="arrivalDate" required><br><br>
 
        <label>离开日期：</label><br>
        <input type="date" name="departureDate" required><br><br>
 
        <label>住宿地点：</label><br>
        <input type="text" name="placeOfStay" required><br><br>
 
        <label>演示形式：</label><br>
        <select name="presentationFormat" required>
            <option value="Lecture">讲座</option>
            <option value="Seminar">研讨会</option>
            <option value="Colloquium">座谈会</option>
        </select><br><br>
 
        <button type="submit">注册</button>
    </form>
 
    <h2>已注册参与者</h2>
    <ul>
        <% seminars.forEach(function(seminar) { %>
            <li><%= seminar.name %> - <%= seminar.presentationFormat %></li>
        <% }) %>
    </ul>
</body>
</html>
					
				
			
		



开发Controller
Controller 处理传入的请求，通过Model处理数据，并通过View确定响应。
文件：controllers/seminarController.js




		
		
			
			
Java
			
			<pre>
// controllers/seminarController.js
const Seminar = require('../models/Seminar');

exports.register = (req, res) => {
    const { name, arrivalDate, departureDate, placeOfStay, presentationFormat } = req.body;

    // 简单验证
    if (new Date(arrivalDate) > new Date(departureDate)) {
        return res.send('到达日期不能在离开日期之后。');
    }

    Seminar.create({ name, arrivalDate, departureDate, placeOfStay, presentationFormat });
    res.redirect('/');
};

exports.home = (req, res) => {
    const seminars = Seminar.findAll();
    res.render('index', { seminars });
};
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						<pre>
// controllers/seminarController.js
const Seminar = require('../models/Seminar');
 
exports.register = (req, res) => {
    const { name, arrivalDate, departureDate, placeOfStay, presentationFormat } = req.body;
 
    // 简单验证
    if (new Date(arrivalDate) > new Date(departureDate)) {
        return res.send('到达日期不能在离开日期之后。');
    }
 
    Seminar.create({ name, arrivalDate, departureDate, placeOfStay, presentationFormat });
    res.redirect('/');
};
 
exports.home = (req, res) => {
    const seminars = Seminar.findAll();
    res.render('index', { seminars });
};
					
				
			
		



设置路由
定义将URL映射到控制器操作的路由。
文件：routes/seminarRoutes.js




		
		
			
			
Java
			
			<pre>
// routes/seminarRoutes.js
const express = require('express');
const router = express.Router();
const seminarController = require('../controllers/seminarController');

router.get('/', seminarController.home);
router.post('/register', seminarController.register);

module.exports = router;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						<pre>
// routes/seminarRoutes.js
const express = require('express');
const router = express.Router();
const seminarController = require('../controllers/seminarController');
 
router.get('/', seminarController.home);
router.post('/register', seminarController.register);
 
module.exports = router;
					
				
			
		



完成应用程序
文件：app.js




		
		
			
			
Java
			
			<pre>
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const seminarRoutes = require('./routes/seminarRoutes');

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/', seminarRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在运行在端口 ${PORT}`);
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						<pre>
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const seminarRoutes = require('./routes/seminarRoutes');
 
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
 
app.use('/', seminarRoutes);
 
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在运行在端口 ${PORT}`);
});
					
				
			
		



运行应用程序：




		
		
			
			
Java
			
			<pre>
node app.js
			
				
					
				
					1
2
				
						<pre>
node app.js
					
				
			
		



在浏览器中访问 http://localhost:3000 以访问研讨会注册表单。

MVC实战：示例项目
项目概述
为了巩固我们的理解，让我们通过一个研讨会注册应用程序的实际例子来探索MVC模式。该项目允许用户注册参加研讨会，捕捉基本信息并显示已注册参与者的列表。
示例代码与解释
1. Model：处理数据

Seminar Model 管理研讨会注册，将其存储在内存数组中以简化示例。






		
		
			
			
Java
			
			<pre>
// models/Seminar.js
const seminars = [];

class Seminar {
    constructor(id, name, arrivalDate, departureDate, placeOfStay, presentationFormat) {
        this.id = id;
        this.name = name;
        this.arrivalDate = arrivalDate;
        this.departureDate = departureDate;
        this.placeOfStay = placeOfStay;
        this.presentationFormat = presentationFormat;
    }

    static create(data) {
        const seminar = new Seminar(
            seminars.length + 1,
            data.name,
            data.arrivalDate,
            data.departureDate,
            data.placeOfStay,
            data.presentationFormat
        );
        seminars.push(seminar);
        return seminar;
    }

    static findAll() {
        return seminars;
    }
}

module.exports = Seminar;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
				
						<pre>
// models/Seminar.js
const seminars = [];
 
class Seminar {
    constructor(id, name, arrivalDate, departureDate, placeOfStay, presentationFormat) {
        this.id = id;
        this.name = name;
        this.arrivalDate = arrivalDate;
        this.departureDate = departureDate;
        this.placeOfStay = placeOfStay;
        this.presentationFormat = presentationFormat;
    }
 
    static create(data) {
        const seminar = new Seminar(
            seminars.length + 1,
            data.name,
            data.arrivalDate,
            data.departureDate,
            data.placeOfStay,
            data.presentationFormat
        );
        seminars.push(seminar);
        return seminar;
    }
 
    static findAll() {
        return seminars;
    }
}
 
module.exports = Seminar;
					
				
			
		



2. View：渲染用户界面

index.ejs 模板提供了一个表单，供用户输入注册详情，并显示参与者列表。






		
		
			
			
Java
			
			<pre>
<!DOCTYPE html>
<html>
<head>
    <title>研讨会注册</title>
</head>
<body>
    <h1>注册参加研讨会</h1>
    <form action="/register" method="POST">
        <!-- 表单字段 -->
    </form>

    <h2>已注册参与者</h2>
    <ul>
        <% seminars.forEach(function(seminar) { %>
            <li><%= seminar.name %> - <%= seminar.presentationFormat %></li>
        <% }) %>
    </ul>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						<pre>
<!DOCTYPE html>
<html>
<head>
    <title>研讨会注册</title>
</head>
<body>
    <h1>注册参加研讨会</h1>
    <form action="/register" method="POST">
        <!-- 表单字段 -->
    </form>
 
    <h2>已注册参与者</h2>
    <ul>
        <% seminars.forEach(function(seminar) { %>
            <li><%= seminar.name %> - <%= seminar.presentationFormat %></li>
        <% }) %>
    </ul>
</body>
</html>
					
				
			
		



3. Controller：管理应用逻辑
控制器处理表单提交，验证输入，通过Model存储数据，并渲染适当的视图。




		
		
			
			
Java
			
			<pre>
// controllers/seminarController.js
const Seminar = require('../models/Seminar');

exports.register = (req, res) => {
    const { name, arrivalDate, departureDate, placeOfStay, presentationFormat } = req.body;

    // 验证：到达日期不能晚于离开日期
    if (new Date(arrivalDate) > new Date(departureDate)) {
        return res.send('到达日期不能在离开日期之后。');
    }

    Seminar.create({ name, arrivalDate, departureDate, placeOfStay, presentationFormat });
    res.redirect('/');
};

exports.home = (req, res) => {
    const seminars = Seminar.findAll();
    res.render('index', { seminars });
};
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						<pre>
// controllers/seminarController.js
const Seminar = require('../models/Seminar');
 
exports.register = (req, res) => {
    const { name, arrivalDate, departureDate, placeOfStay, presentationFormat } = req.body;
 
    // 验证：到达日期不能晚于离开日期
    if (new Date(arrivalDate) > new Date(departureDate)) {
        return res.send('到达日期不能在离开日期之后。');
    }
 
    Seminar.create({ name, arrivalDate, departureDate, placeOfStay, presentationFormat });
    res.redirect('/');
};
 
exports.home = (req, res) => {
    const seminars = Seminar.findAll();
    res.render('index', { seminars });
};
					
				
			
		



4. 路由：将URL映射到控制器
路由定义了应用程序如何响应客户端请求。




		
		
			
			
Java
			
			<pre>
// routes/seminarRoutes.js
const express = require('express');
const router = express.Router();
const seminarController = require('../controllers/seminarController');

router.get('/', seminarController.home);
router.post('/register', seminarController.register);

module.exports = router;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						<pre>
// routes/seminarRoutes.js
const express = require('express');
const router = express.Router();
const seminarController = require('../controllers/seminarController');
 
router.get('/', seminarController.home);
router.post('/register', seminarController.register);
 
module.exports = router;
					
				
			
		



5. 应用程序设置：引导服务器

app.js 文件初始化Express服务器，设置视图引擎，并包含路由逻辑。






		
		
			
			
Java
			
			<pre>
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const seminarRoutes = require('./routes/seminarRoutes');

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/', seminarRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在运行在端口 ${PORT}`);
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						<pre>
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const seminarRoutes = require('./routes/seminarRoutes');
 
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
 
app.use('/', seminarRoutes);
 
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在运行在端口 ${PORT}`);
});
					
				
			
		



6. 运行项目
执行以下命令以启动服务器：




		
		
			
			
Java
			
			<pre>
node app.js
			
				
					
				
					1
2
				
						<pre>
node app.js
					
				
			
		



导航到 http://localhost:3000 与研讨会注册应用程序互动。

MVC的优缺点
优点

有组织的结构：数据、UI和控制逻辑之间有清晰的分离。
增强的可维护性：简化了调试和更新组件。
可重用性：组件可以在不同项目或应用程序的不同部分重复使用。
并行开发：促进多个开发者同时在不同组件上工作。
可扩展性：支持应用程序的增长而不牺牲结构。

缺点

对简单应用程序的复杂性：在小规模项目中可能引入不必要的复杂性。
学习曲线：需要理解组件之间的交互，对于初学者可能具有挑战性。
开销：实现MVC可能导致额外的层次，如果管理不善，可能影响性能。


何时何地使用MVC
MVC设计模式在以下情况中特别有益：

复杂的用户界面：具有复杂UI元素的应用程序受益于有组织的结构。
大型应用程序：随着应用程序的增长，便于管理和可扩展性。
团队开发：允许多个开发者同时在不同组件上工作而不会冲突。
频繁更新：简化了更新或修改应用程序部分的过程。
可维护性：对需要长期维护和支持的项目至关重要。

然而，对于小型、简单的应用程序，MVC的开销可能超过其优势。在决定使用哪种架构模式之前，评估项目需求至关重要。

MVC与其他设计模式的比较
设计模式为常见的架构挑战提供了标准化的解决方案。将MVC与其他模式进行比较，可以突出其独特的优势和适用的应用场景。
MVC 与 MVP（模型-视图-演示者）


特性
MVC
MVP


组成部分
Model, View, Controller
Model, View, Presenter


Presenter的角色
最小，控制器中有一些逻辑
集中化演示逻辑


通信
View 与 Controller 和 Model 交互
View 主要与 Presenter 交互


可测试性
中等
更高，由于演示逻辑的清晰分离


使用场景
Web应用程序，一般用途
丰富的UI应用程序，复杂交互


MVC 与 MVVM（模型-视图-视图模型）


特性
MVC
MVVM


组成部分
Model, View, Controller
Model, View, ViewModel


数据绑定
通常是手动的
利用数据绑定进行自动UI更新


复杂性
稍微不那么复杂
由于视图模型的集成，可能更复杂


使用场景
Web开发，服务器端应用程序
具有动态UI的前端应用程序


MVC 与分层架构


特性
MVC
分层架构


目的
分离UI应用程序的关注点
基于功能将系统组织为多个层


组成部分
Model, View, Controller
表示层，业务逻辑层，数据访问层等


灵活性
专注于UI分离
整个系统的更广泛分离


使用场景
Web和桌面应用程序
跨多个领域的企业级应用程序



结论
模型-视图-控制器 (MVC) 设计模式是软件架构中的基石，提供了一种结构化的方法来构建可扩展和可维护的应用程序。通过将应用程序分离为不同的组件——Model、View 和 Controller，MVC促进了清晰性、可重用性和高效的开发工作流程。
采用MVC便于更好的代码组织，简化维护，并增强协作努力，使其成为开发者和组织的重要工具。尽管它在较小的项目中引入了某些复杂性，但可扩展性和可维护性的长期益处常常超过了初始开销。
拥抱MVC使开发者能够打造结构良好、适应性强并符合行业最佳实践的稳健应用程序。
SEO优化关键词：Model-View-Controller, MVC design pattern, software architecture, MVC components, MVC tutorials, MVC implementation, MVC advantages, MVC vs MVP, MVC vs MVVM, separation of concerns, scalable applications, maintainable code, MVC example, MVC in web development, MVC controllers, MVC models, MVC views

补充信息
比较表


特性
MVC
MVP
MVVM


组成部分
Model, View, Controller
Model, View, Presenter
Model, View, ViewModel


主要使用场景
Web应用程序，一般用途
丰富的UI应用程序，复杂交互
具有动态UI的前端应用程序


数据绑定
组件之间的手动交互
Presenter处理所有UI逻辑
视图与视图模型之间的自动数据绑定


可测试性
中等
由于Presenter的抽象，更高
由于视图模型的分离，高


复杂性
较低的复杂性
由于Presenter逻辑，更复杂
由于视图模型的集成，可能更复杂


附加资源

书籍：

企业应用架构模式 作者：Martin Fowler
Head First设计模式 作者：Eric Freeman & Elisabeth Robson


在线教程：

MVC模式解释
理解MVC架构


视频课程：

Web开发中的MVC设计模式
MVC基础


文档：

Express.js官方文档
EJS模板引擎文档


使用MVC的框架：

ASP.NET MVC：微软用于.NET应用程序的MVC框架。
Ruby on Rails：使用MVC的热门Web应用框架。
Laravel：遵循MVC架构的PHP框架。
Django：虽然Django遵循MTV（模型-模板-视图）模式，但它与MVC有相似之处。



采用MVC模式可以显著提升您的开发工作流程，带来更有组织、高效和可扩展的应用程序。利用上述资源深入理解并有效应用MVC原则于您的项目中。
注意：本文由AI生成。

特性	MVC	MVP
组成部分	Model, View, Controller	Model, View, Presenter
Presenter的角色	最小，控制器中有一些逻辑	集中化演示逻辑
通信	View 与 Controller 和 Model 交互	View 主要与 Presenter 交互
可测试性	中等	更高，由于演示逻辑的清晰分离
使用场景	Web应用程序，一般用途	丰富的UI应用程序，复杂交互

特性	MVC	MVVM
组成部分	Model, View, Controller	Model, View, ViewModel
数据绑定	通常是手动的	利用数据绑定进行自动UI更新
复杂性	稍微不那么复杂	由于视图模型的集成，可能更复杂
使用场景	Web开发，服务器端应用程序	具有动态UI的前端应用程序

特性	MVC	分层架构
目的	分离UI应用程序的关注点	基于功能将系统组织为多个层
组成部分	Model, View, Controller	表示层，业务逻辑层，数据访问层等
灵活性	专注于UI分离	整个系统的更广泛分离
使用场景	Web和桌面应用程序	跨多个领域的企业级应用程序