认识达内从这里开始

据达内昆明IT培训的小编所知，分离后的前端，不再是一个简单的HTML文件，已经是一个独立的应用系统。除了要考虑页面的数据渲染展示，还要用工程化的思想来考虑前端的架构，前后端的交互和数据安全等事情。下面一起跟昆明达内web前端培训的小编一起来看看吧!

架构

前端应用部署在Nodejs、Nginx或者Nodejs和Nginx组合的服务器上，通过反向代理转发页面请求到后端服务器，相当于在传统的流程中加了Nodejs这一层。当然，也可以用Nodejs服务器来承担一部分负载均衡的工作，业务逻辑也可以放在Nodejs这一层来处理，例如：通过判断请求是来自PC还是APP，将请求发到不同的后端服务器。

Nodejs的架构中，分层如下：

RESTful接口交互

前后端分离之后，更多的是采用RESTful风格的接口与后端进行数据交互。

REST是“呈现状态转移(REpresentational State Transfer)”的缩写，一种API的架构风格，在客户端和服务端之间通过呈现状态的转移来驱动应用状态的演进。

在REST样式的Web服务中，每个资源都有一个地址。资源本身都是方法调用的目标，方法列表对所有资源都是一样的。这些方法都是标准方法，包括HTTP GET、POST、PUT、DELETE，还可能包括HEADER和OPTIONS。

RESTful的API设计，使得后端通过接口向前端传递数据，数据的格式通常是JSON这种通用的格式。对前端来说，只要后端返回过来的是RESTful的数据就行，不管后端是用Java写，还是用python或PHP，拜托对后端的依赖，做到前端系统的独立。

工程化构建

Nodejs不止可以用来做前端服务器，在开发阶段，它也能发挥很大的作用。

前端生态的发展，是围绕着Nodejs进行的。用npm来管理项目依赖，可以很好的维护和运行在Nodejs环境上。

打包工具grunt、gulp、webpack和rollup等，都是运行在nodejs上，再结合语法编译、打包部署等插件，将应用输入成一个完整的应用。如果你使用了Angular、React或Vue框架，或者你使用浏览器暂时还不兼容的ES6语法，还需要在应用打包前用babel将语法编译成浏览器可识别的ES5的语法。

SPA

SPA是单页Web应用(single page web application，SPA)的简写，就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

像Angular、React或Vue就是为了SPA而设计的，结合前端路由库(react-router、vue-router)和状态热存储(redux、vuex)等，可以开发出一个媲美Native APP的Web APP，用户体验得到了很大的提升。当然，SPA也不是完美的，也不是适合所有的web应用，需要结合项目和场景来选择。SPA有如下缺点：

初次加载耗时增加。可以通过代码拆分、懒加载来提升性能，减少初次加载耗时。SEO不友好，现在可以通过Prerender或Server render来解决一部分。页面的前进和后端需要开发者自己写，不过现在一些路由库已经帮助我们基本解决了。

对开发者要求高，由于做SPA需要了解一整套技术栈，所以，要考虑后期是否有合适的人选进行维护。

想了解更多前端和后端分离的知识，想学习web前端，就到昆明达内!

达内免费试听课程活动正式启动啦!限额报名，先报先得！