一.后端路由阶段和服务端渲染

当请求一个URL，URL会发送到服务器, 服务器会对该URL进行匹配，并进行一系列的处理，服务器渲染好整个页面生成一个最终的HTML页面，这个HTML页面不需要单独加载任何的js和css，可以直接交给浏览器展示。

url与网页之间的映射关系由后端处理

优点：有利于SEO优化

缺点：

• 一种情况是整个页面的模块由后端人员来编写和维护的.
• 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
• 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

二.前后端分离阶段

随着Ajax的出现，有了前后端分离的开发模式：

后端只负责通过API提供数据，不负责任何界面的内容

前端通过Ajax获取数据，并且可以通过javascript将数据渲染到页面中

• 浏览器：输入一个url，去请求静态资源服务器上获取对应静态资源的html+css+js,html+css浏览器直接渲染，遇到js代码就执行，如果遇到ajax请求，再去服务器请求对应的数据，在执行其他js代码将数据渲染到页面上。每一个url对应一个静态资源，
• 静态资源服务器：多套html+js+css，每个url对应一套html+js+css
• 服务器：提供API接口

前端渲染：浏览器中显示的页面中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的

优点：前后端责任清晰，后端专注于数据，前端专注于交互和可视化

三.前端路由阶段-SPA

SPA(single page web application)最大的特点就是在前后端分离的基础上加了一层前端路由，也就是由前端来维护一套路由规则。

需要前端路由作为技术支撑：管理url与组件之间的映射关系，改变url，但是页面不进行整体刷新

整个网站只有一个htm页面，当在浏览器输入一个url，会向静态资源服务器请求静态资源，返回index.html+css+js（全部资源）给浏览器，当点击一个按钮跳转到/list,url发生改变，这时不会去向静态资源服务器发起请求，而是由前端路由进行匹配，显示对应的界面。

api服务器：

静态资源服务器：index.html+css+js 只有一个

客户端：