一、前后端历史
无前端
1、后台全包—静态html(table)
2、后台模板—渲染数据,后端编译 php
项目变大,css js html壮大—分离出了前端
3、编写html,嵌套成php
问题—相爱想杀
A、相互依赖过深,职责不清——前后端都可以改代码,出现bug推诿,修改效率低,影响合作
B、效率慢——-前端等待接口/后端等待页面,开发效率低
C、前端交互效果弱化
D、依赖后端的模板环境、模板编译、路由支持
4、编写html,数据ajax局部刷新,后端提供路由、接口
A、前端模块化—require sea
B、前端模板— tpl pub
C、前端工程化—模板编译打包—gulp webpack grunt
5、前后端分离
二、为什么分离—明确分工,清晰职责
1、代码管理
后端不需要合并前端代码,减少代码合并冲突问题
2、加速开发进程
一键编译,都不用嵌套模板
数据模拟,无需等待
接口转发,易于调试
3、提测灵活
如果只是前端改动,可以只部署前端代码
4、性能优化
a、代码压缩,提示效率;
b、代码编译,增加版本号,消灭缓存
c、随着页面增多,js文件越来越大,可以对于线上文件进行cdn部署;
三、怎么分离
分离前提
1、数据 — ajax
2、路由 — 单页面 vue react angular
工作模式
3、独立开发,代码管理单页面
4、模拟数据
5、接口代理转发
实现模式
6、单页面
7、nodejs中间层前端mvc
四、例子演示——渠道系统
A、技术支持 vue webpack
1、单页面—自带路由
2、首页路径分配—Nginx
3、数据交互——-ajax
B、优化
1、静态资源—CDN
C、好处—工作模式
1、mock模拟数据
2、node代理转发整数接口
3、各自管理代码—版本管理、发布、bug修改
D、劣势
1、js体积随着开发增大
2、首屏渲染缓慢—用户体验
3、SEO弱
E、优化方法
1、路由懒加载(可以将app.js进行划分成多个小的js,按需加载) 2、服务器渲染、浏览器渲染共存(针对有SEO要求的项目–nuxt.js) 3、node做中间层,控制接口的请求转发(劣势-)
参考: