前后端发展阶段

后端路由阶段

• 我们知道，早期的网站开发整个HTML页面是由服务器端来渲染的

• 服务器直接生产渲染好对应的HTML页面，返回个哭护短进行展示

• 后端路由

  • 一个网页有着自己对应的网址，也就是url
  • url会发送到服务器端，服务器会通过正则对该URL进行匹配，并且最后交给一个controller进行处理
  • controller进行各种处理，最终生成HTML或者数据，返回给前端
    当我们页面中需要请求不同不同的路径内容时，交给服务器来处理，服务器渲染好整个页面，并且将页面返回个客户端，这种情况下渲染好的页面，不需要单独加载任何的js和css,可以直接交给浏览器来展示，这样有利于SEOd的优化

• 缺点

  • 一种情况是整个页面的模块都有后端人员来编写和维护
  • 另外一种情况就是前段开发人员如果要开发页面，需要通过PHP和java等语言来编写页面代码
  • 而且通常情况下，HTML代码和数据以及对应的逻辑会混淆爱一起，编写和维护都十分困难

后端渲染

前后端分离阶段

后端只负责提供数据，不负责任何阶段的内容

• 随着Ajax的出现，有了前后端分离的开发模式
• 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过javaScript将数据渲染到页面中
• 这样做的最大的优点就是后端的责任的清晰，后端专注于数据上，前端专注于交互和可视化上
• 并且当移动端（IOS/android）出现后，后端不需要进行任何的处理，依然可以使用之前的API即可
• 目前很多网站都蚕蛹这个模式进行开发

前端渲染

前端路由阶段（spa页面）

单页面富应用阶段

• 其实SPA最主要的特点就是在前后端分离的基础上加上了一层前端路由
• 也就是运用前端来维护一套路由规则
• 整个页面只有一个html页面
  前端路由的核心：
  • 改变URL，但是页面不进行整体的刷新
  • 如何实现呢？

url的hash和HTML的history

• 方法一： URL的hash
  • URL的hash也就是我们所说的锚点（#），本质上是改变window.location的href属性
  • 我们可以通过直接赋值loactipn.hash来改变href,但是页面不发生刷新
    
• 方法二：HTML中的history模式：pushState
  

方法三：：HTML中的history模式：replaceState