WEB整体架构分析(从前端到后端)

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

MVC模型

MVC是一种模型概念,绝大多数架构都是根据他来实现的,但是并不完全遵循,每个层之间也没有特别明确的界限。
WEB整体架构分析(从前端到后端)
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”表达这个概念

javascript——MERN架构

MERN架构,这个要容易理解一些,前后端语言都使用javascript编写
WEB整体架构分析(从前端到后端)
这个架构中react.js用来作为前端框架,写前端页面。也就是对应View

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

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

java web 架构

WEB整体架构分析(从前端到后端)
表示层:对应的也就是view,但是这里servlet在表示层也可以单独提出一个servlet层,这里其实划分没有那么详细MVC也不是说必须划分的很明确的。servlet用来http处理请求和相应,类似于MERN中的express.js他是一个接口。

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

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

总结

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