WEB整体架构分析（从前端到后端）_从前端到后端的一个整体介绍

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

MVC模型

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

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编写

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

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

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

java web 架构

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

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

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

总结

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