1.前端技术的演化
静态网页:
最早的HTML页面是完全静态的网页,他是预先编译好的存放在web服务器上的html文件,当浏览器请求某个url时,web服务器就把指定的html文件返回给浏览器,显示文件内容
动态网页:
显然我们不可能预先储备所有的页面。很多时候都需要动态生成网页。
这样是否可以通过编程语言,动态拼接成html文件给浏览器
于是,后面研究发现,大多数的html片段是不变的,变化的只有少数和业务相关的数据。
从而出现新的创建动态html的方式:ASP,JSP和PHP等
MVC模式
需要服务器端的配合,JavaScript可以在前端修改服务器渲染后的数据。
问题是所有的通信都是单向的, view 传送指令到controller
controller完成业务逻辑后,要求model改变状态
model将新的数据发送到view,用户得到反馈
MVVM模式
该模式,借鉴了桌面应用程序的mvc思想,把model用纯JavaScript对象表示,view负责显示。两者做到最大限度分离。核心思想是关注model的变化。让MVVM框架利用自己的机制去自动更新DOM,从而把开发者从操作DOM的繁琐中解脱出来。
2.前后端分离的优缺点
前后端分离的核心是后端提供数据服务接口,前端消费数据实现人机交互
优缺点:
彻底解放前端。
提高工作效率,分工更加明确。
局部性能提升。
降低维护成本。
前端注重用户体验后端注重业务逻辑。
3.前后端技术划分和职责划分
技术划分:
前端把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。
前端追求的是:页面表现,速度流畅,兼容性,用户体验等等。
后端把精力放在java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,java性能优化,以及相关的项目管理等等。
后端追求的是:三高(高并发,高可用,高性能),安全,存储,业务等等。
职责划分:
前端:数据展现和收集
事件响应和处理
Dom操作
请求的发送和响应处理
页面渲染
路由
数据转发
后端:提供服务接口
封装业务逻辑接口
序列化
3.睿达控前后端架构
4.前后端分离是如何提高工作效率的
前后端开发人员可以独立开发、独立运行、独立调试,他们之间的接口就是通过API文档服务器定义的。通常,一个页面的加载或者表单的提交,都有数据在客户端和服务器端之间传输,而API文档服务器就是专门用来生成API文档的。有了API文档,前端开发人员就可以基于API文档产生模拟数据(mock),然后使用mock的数据完成页面样式和页面交互;有了API文档,后端开发人员就可以基于API文档完成请求的处理以及返回响应数据。
5.快速定位bug技能掌握
- css样式问题,debug
- js功能问题,debug,打段点,click触发,调用,发送请求(和api对接口参数),接口接收参数,数据层持久化调用,逻辑处理开始,结束,接口返回json数据格式(json.cn)
课外技术补充:
组件化架构-react+node+springcloud
优缺点:
业务划分更佳清晰,新人接手更佳容易,可以按组件分配开发任务。
项目可维护性更强,提高开发效率。
更好排查问题,某个组件出现问题,直接对组件进行处理。
开发测试过程中,可以只编译自己那部分代码,不需要编译整个项目代码。
方便集成