前端框架学习-基础前后端分离

前端知识栈

1. 前端三要素：HTML、CSS、JS
   • HTML 是前端的一个结构层，HTML相当于一个房子的框架，可类比于毛坯房只有一个结构。
   • CSS 是前端的一个样式层，有了CSS的装饰，相当于房子有了装修。
   • JS 是前端的一个行为层，有了JS，就让房子通了水电燃气，让房子能够有各种资源。
2. 在前端为了简化开发，于是有了各种的框架
   • JavaScript框架
     1. JQuery 框架，简化了DOM操作，但是对DOM的操作太频繁的时候会影响前端性能
     2. Angular框架，将后端的MVC模式搬到前端，增加模块化开发理念。缺点是迭代不合理
     3. React框架，提出了【虚拟DOM】概念，减少DOM操作。在内存中虚拟DOM提升前端渲染效率。
     4. Vue框架，渐进式JavaScrip框架，实现模块化，路由，状态管理。综合了Angular(模块化)和React(虚拟DOM)的优点
     5. Axios框架，前端通信框架。
   • UI框架
     1. Ant-Design，基于React的UI框架
     2. ElementUI，基于Vue的UI框架
   • JavaScript构件工具
     1. Babel：Js编译工具
     2. WebPack:模块打包器，主要用于打包、压缩、合并及加载

前后端分离

1. 在web1.0阶段，浏览器上的页面都是固定的。需要在页面上写好所有的内容，包含结构。后来丰富了页面的展示，再然后就有了一些简单的页面交互。这些都是通过一次请求返回到页面的，页面的内容发布之后，每个人都能看到相同的东西。
2. 后来，有了动态页面技术。页面上的内容可以根据后端的数据进行动态变化。如JSP阶段，这个时候前端的代码和后端的代码是混在一起的。页面的跳转通过后端的ModelAndView来转发或重定向。
3. 基于AJAX，通过接口商定，可以前后端分别独立开发。提高开发效率。
4. 通过NodeJS实现了前端也可以作为一个服务来独立启动，前端可以只专注于页面内容，样式和行为代码。