浅谈Java Web经典三层架构和MVC框架模式

雨点打透心脏的1/2处 2023-09-24 15:21 11阅读 0赞

从前端到后端整体架构做一个分析，通过这个分析更清楚的了解一下具体的前后端架构。以下三个架构属于三种架构，有共同点，但是并不是从属关系。

### 01 MVC模型 ###

MVC是一种模型概念，绝大多数架构都是根据他来实现的，但是并不完全遵循，每个层之间也没有特别明确的界限。

![图片][a527fee19b66483a8394c394ac58a02b.png]

View泛指用来向用户提供展示的部分的代码。

要将数据展示到View上，是要做绘制的。也就是前端页面。为了画一个很棒的界面，你需要关注布局、色彩、绘制的质量、动画逻辑……小心翼翼的让界面表现的很符合人类的直觉。当然，随着技术的进步，很多绘制渲染的技术都被抽象化了，View的具体绘制工作大大的减轻了。

**Model泛指模型，它代表整个系统中表达数据的部分。**

前端页面的东西需要作为一个model来存放在数据库。

比如：数据库里记录了数据产品ID=1的名字是abc，但是业务代码写了“if(prodId == 1) name = ‘def’"这种代码，并对上层提供了产品数据的接口。Model和View不一定能一一对应上。实际上他们之间总是有复杂的关系。比方说一个产品的基本信息、历史价格、最近成交记录、评论、关注信息在Model层面看来是不同的数据表的数据；而在View上，他们可能要绘制到一个界面。有的View需要考虑上下文，比如当比如当用户登录了，就显示有针对性的推荐给该用户的商品；没登录就只好显示一个泛泛的推荐了。

因此，**Controller的作用就体现出来了——完成从Model到View的转换工作**。它可以调整/改变/聚合Model的信息，转变成View绘制需要的信息。这个工作又往往被叫做“业务逻辑”。你可以理解将Controller的输出理解为“View Model”——即“直接就可以用来绘制的数据“。在SpringMVC体系下，相关API以“ModelAndView”表达这个概念

### 02 javascript—MERN架构 ###

MERN架构，这个要容易理解一些，前后端语言都使用javascript编写

![图片][c8cc30d8986a4c5d8551957c96a24e0d.png]

这个架构中react.js用来作为前端框架，写前端页面。也就是对应View

前端数据通过类似于axio的接口（包含一系列rest) 通过http请求传到服务端，服务端使用Express中间件来处理请求，Express框架接收http协议并处理。node.js为该中间件提供服务，也就是服务器。这里都是处理业务也就是对应的controller

业务处理完之后，就会把model放入到数据库中，使用mongodb driver 来提供CRUD请求与数据库交互。

### 03 java web 架构 ###

![图片][c18edd2213d04123be7f6fd95f28bfa8.png]

**表示层：**

对应的也就是view，但是这里servlet在表示层也可以单独提出一个servlet层，这里其实划分没有那么详细MVC也不是说必须划分的很明确的。servlet用来http处理请求和相应，类似于MERN中的express.js他是一个接口。

**service层：**

相当于controller，具体的数据业务处理在业务逻辑层，进行一些排序啊，分页啊，这个在MERN中其实是都被整合到Express中进行逻辑处理，把数据转换成model。

**数据访问层Dao**

也就是model层，把model存储到数据库，进行CRUD和数据库交互。数据访问层类似于MERN架构中的Mongodb driver用来和数据库进行增删改查操作。

### 总结： ###

其实每个架构大同小异，只是在实现的时候每个架构可以分为自己的一些特性加持。不需要特别明确的划分对应，因为整个系统是一个整体。只需要理解大概的结构就可以了。

--------------------

### 资源分享 ###

**下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 `【保证100%免费】`**

![在这里插入图片描述][b9a9eea1ed5c42429c5e383b00ba6e0c.png_pic_center]

![在这里插入图片描述][d96b58a511f84668b59f3f620964da07.png_pic_center]

[a527fee19b66483a8394c394ac58a02b.png]: https://img-blog.csdnimg.cn/a527fee19b66483a8394c394ac58a02b.png
[c8cc30d8986a4c5d8551957c96a24e0d.png]: https://img-blog.csdnimg.cn/c8cc30d8986a4c5d8551957c96a24e0d.png
[c18edd2213d04123be7f6fd95f28bfa8.png]: https://img-blog.csdnimg.cn/c18edd2213d04123be7f6fd95f28bfa8.png
[b9a9eea1ed5c42429c5e383b00ba6e0c.png_pic_center]: https://img-blog.csdnimg.cn/b9a9eea1ed5c42429c5e383b00ba6e0c.png#pic_center
[d96b58a511f84668b59f3f620964da07.png_pic_center]: https://img-blog.csdnimg.cn/d96b58a511f84668b59f3f620964da07.png#pic_center