前言

本文将用最言简意赅的语言阐述前后端分离与前端工程化，并解答一些认知误区。
前后端分离和前端工程化经历过一个漫长甚至畸形的发展过程，在近两年的具体实施形式又发生了急速突变。
本文作为基础的普及，仅描述最为主流和常规的方案。
本文主要面向无前后端开发经历的读者，故有意省略细节。
想要直观，快速效果本文，建议本地创建一个vue-cli项目，进行对照查看

前后端分离

核心

前后端分离会连带一套全新的前端后生态，但其核心改动就是，前端部分从后端的server page(如jsp,asp,php）中抽离出来，成为独立的web工程。而后端的末端为web service接口，末端仅专注于数据提供。
分离以后，前端项目将单独部署到HTTP服务器上，一般使用ngix。分离后的请求流程为前端请求ngix，ngix请求后端应用服务器，应用服务器响应路径原来返回。

吴小胖的漫画直观地反映了当前WEB项目的主流前后端框架。

对开发行为和职责的直接影响

开发过程中不再存在静态页面与server page的来回转换，前后端在开发场景上完全解耦。
由于前端项目的完全独立，前端成为独立团队，需要对前端项目的需求，开发和上线全权负责。
由于与后端controller层脱离，前端需要独立进行前端页面的跳转（路由），权限控制的处理

前端工程化

所谓前端工程化，无论使用哪种具体的框架，vue/react/angular脚手架,都是基于webpack的开发模式，webpack是基于node的前端资源打包器，它负责整个项目的编译，打包，并充当开发时的本地服务器。
所谓编译，就是把浏览器不认识的文件和资源一律转变为原子的js,html和css，打包就是对编译后的资源做去冗余，压缩，按照你设定的文件结构进行整合，形成可以部署的web项目。
而webpack-dev-server则充当开发时的本地服务器，其本质是一个集成若干预配置和开发者自定义配置的node服务器。

本地代理与ngix反向代理

前后端分离以后，本地开发和项目上线后的跨域问题是不可避免的。在开发环境下，配置webpack的proxyTable，对请求进行本地代理，简而言之就是，本地请求代理地址，代理地址实际指向应用服务器实际地址；当项目部署到ngix上后，在web项目的产品配置和ngix上也要做类似的操作，使web项目的请求指向ngix，ngix做反向代理。

node是什么，有什么特点，与前后端分离，前端工程化的关系

首先，明确node是什么，node就是脱离了浏览器环境的V8引擎，更直白点说，是可以运行在服务器上的JavaScript 运行环境。
有了node，你就可以在服务器上跑JavaScript脚本了。
尽管为了更好地服务于服务器端场景，Node的V8引擎与浏览器端存在差异，但这并不影响Node环境继承了传统JavaScript的核心特点——单线程异步非阻塞与事件驱动。
而作为一个服务器脚本环境，node本身与前后端分离没有任何直接关系。使用node做服务器端，可以使用jade/pug等后端模板引擎写前端页面，如此开发，结果仍是一个单体工程。
node与前后端分离，前端工程化的关系实属间接。
前端工程化基于webpack，webpack基于node，而工程化的前端项目则是前后端分离后的前端部分。

node,npm，package.json与webpack

npm是node附带的包管理工具，无论是开发服务器端工程，或是工程化前端项目，我们都使用npm进行包的下载与依赖管理，package.json是项目的包与模块管理清单，内里记录了项目的基本信息，执行脚本，开发环境依赖包，生产环境依赖包等信息，
注意，npm仅仅是包管理工具，项目的最终编译，打包仍需webpack进行处理，webpack打包时，会参考package.json的生产环境依赖包，将其打包到最终项目中，至于其他冗余依赖，非必要依赖则不会被打包到最终产品中

vue,vue-cli,webpack

vue只是一个mvvm，以数据驱动为主导思想的view层解决方案，区别于原生JS与JQuery的DOM驱动，它只是一个js库，不是框架，与jquery地位和定位相同，可以在传统开发中使用，并不只有工程化场景可以使用vue。
vue-cli是基于vue的工程化框架，本质是预配置webpack项目模板。一个常见的vue前端工程的基本技术栈组成为vue-cli+ vue+vue-router+vuex+axios+任一基于vue实现的UI框架，如element，vue-antd等。

ES6,node和vue

ES6即ECMAScript2015,是标志Javascript现代化的重要语法标准版本，但需要注意的是，我们常说的ES6，包括但不限于2015，实际指的是从2015年往后已经被现代浏览器支持的JS语法特性。
ECMAScript可与JAVA/JDK做类比，两者之间主要区别在于，js无需本地运行环境，js依托浏览器或node。这也意味着，ECMAScript的某一版本，某一特性是否可行，取决于特定版本的浏览器或Node是否支持该特性。
node虽然是前端现代化开发的基石，但因为node的诞生远早于ES6的发布，故Node有自己的一套实现，如在模块导入导出上使用commonJS,区别于ES6 module。Node至今仍未完全支持ES6语法，必要时需要使用babel进行转义。
vue自2.0版本以后，就极力贴靠ES6，并推荐开发者，尤其是在使用vue-cli进行开发时，使用ES6语法。
实际上，当前主流的三大框架都有自己的一套JavaScript语法：angular+typescript，react+typescript/ES5+ES6,vue+ES6.

结语

本文讲述的是最常规的前后端分离与前端工程化架构，实际上，node中间件+PC端SSR+移动端跨平台开发正在替代常规的前后端分离+无差别SAP+hybrid模式.
但技术终归是服务于需求的，选择怎样的架构，因场景，因团队而异。适合适用就是最好的，能得到甲方认可，能有市场占有量的产品就是好产品。工作安安心心，快快乐乐就是好工作。前沿技术和好产品，好工作并没有直接关联。

架构 | 前后端分离与前端工程化相关推荐

【学习日记2023.4.25】之前后端分离_前端工程化_Vue组件库Element_Vue路由_打包部署
文章目录 1. 前后台分离开发 1.1 前后台分离开发介绍 1.2 YAPI 1.2.1 YAPI介绍 1.2.2 接口文档管理 2. 前端工程化 2.1 前端工程化介绍 2.2 前端工程化入门 2. ...
前后端分离技术——前端框架
本文主要介绍前后端分离技术--前端框架. 一.前端框架前端框架均为近年新兴技术,包括:业务相关.环境相关等方面.从组件化.可视化.信息化.扁平化.数据驱动等多角度设计架构.以用户体验为原则,综合业务 ...
【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构这两年a ...
前后端分离后前端获得session数据_机器学习模型部署--打通前后端任督二脉
## 前言 ### 学历与定位近日在某论坛,有网友提问道:搞机器学习是不是要博士或是硕士学历,是不是要求很高,顶会论文?本科生或者更低学历的,是不是就没有机会了?从最近公司的招聘来看,算法工程师的 ...
电脑端京东的我的订单html+css页面_互联网系统架构前后端分离技术体系
点击「京东数科技术说」可快速关注「摘要」随着互联网技术的发展以及终端设备的不断增多,前后端分离技术已成为移动互联网领域不可或缺的技术.前后端分离技术的不断完善,让前后端的分工与系统边界划分越来越清晰 ...
求职知识整理一（前后端分离，前端模式，数据库知识点：sql，MySQL，Oracle，jdbc）
目录今日事: 1.前后端分离(常见的是前端写静态页面,后端套用模板) 2.前端开发中的MVC/MVP/MVVM模式一.数据库(MySql,Oracle,SQL Server)(基本的数据库操作语句 ...
php增删改查前后端分离,前后端分离之前端增删改查
初次接触前后端分离,现把前端一个例子放出来记录以下,不喜勿喷. html静态页面代码: 菜单管理平台数据... 菜单管理查询条件列表菜单名称: 菜单父级: 菜单名称: 菜单级别: 菜单父级: 图片地 ...
宝塔-Java前后端分离项目-前端静态资源的访问
1.创建好站点记得把前后端分离勾选,点击设置 2.点击配置文件添加配置代码 location / {try_files $uri $uri/ /index.html;} 然后就可以正常的访问了 ...
京东java前后端联调_前端工程化、组件化实践JDM分享
前端技术原创文前端工程化.组件化实践JDM分享该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成,主要讲解了团队创新的前端工程化.组件化的思想及实践应用. 为什么要搞前端框架? Java ...

架构 | 前后端分离与前端工程化

文章目录

前言