前、后端渲染及路由发展阶段

1. 后端渲染

   早期没有js，网站都是通过 jsp/php… 开发，浏览器请求的网页都是后台通过 jsp 技术渲染好的页面，且数据也是通过后端代码从数据库拿到动态的放在页面中，最后直接传给浏览器展示

2. 路由发展阶段

   • 后端路由阶段

     后端处理 url 和页面之间的映射关系，url 发送到服务器，通过正则匹配，交给一个 Controller (kan true le)处理，最终生成HTML或者数据，返回给前端

     缺点

     • 前端人员开发页面，需要通过后端语言来编写页面代码
     • HTML代码和数据以及对应的逻辑会混在一起，编写和维护都很糟糕

   • 前后端分离阶段

     Ajax 出现，有了前后端分离的开发模式。后端提供API返回数据，前端通过Ajax获取数据，再通过js将数据渲染到页面

     优点

     • 前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上

   • 前端路由阶段

     SPA页面：整个网站只有一个html页面

     url 与页面的映射关系由前端管理

     • 静态资源服务器只有一套 html+css+js，浏览器发请求时将全部资源请求到本地，但并不会全部渲染
     • 点击一个按钮，生成一个 url ，通过 js 代码判断找到对应的组件展示
     • 核心就是：改变 url，但是页面不进行整体刷新

3. 前端渲染

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

   • 浏览器发送请求，从静态服务器拿到 html+css+js，一个 url 对应一套
   • 执行js代码，通过请求从提供API的服务器拿到数据，渲染到页面

由于数据的渲染是在前端完成了，并且是通过 js 动态完成的：所以在操作过程中网站的源代码中看不到任何数据