react 访问后端_React框架学习(二)——前后端分离，整合，部署

前后端分离

前端与后端分离开发，主要为了解耦与提升效率。基于react框架的特殊性，出现了一个本地后台，来支持前端开发，并且页面通过该本地后端访问，数据则通过访问后端提供获取数据的API来获取。

整合

前后端分离出现的部分问题以及解决方法。

跨域请求数据

可以使用Ajax进行数据请求

保留(传递)状态信息

后台需要对用户状态进行保存(传递)，比如登录状态。

后端构建一个拦截器，对需要跨域访问的request头部重写，以支持跨域

Ajax 请求中 withCredentials置为true，每次都将cookie信息发送到后端

前端渲染or后端渲染

为了节省性能与方便开发，选择前端渲染比较合适，缺点是会大量使用Ajax

部署

使用webpack打包工具，可以把前端项目打包成静态压缩文件(html、css、js文件)，然后把他们放在后台工程目录里面运行整个项目，这里要注意文件路径问题，并且之前的跨域处理也要去掉，这样就能把本地后台在部署的时候省略掉。

对于使用creat-react-app构建的项目，可以使用npm run build来打包。

多页面or单页面

单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面(MPA)，就是指一个应用中有多个页面，页面跳转时是整页刷新

对于稍微复杂的项目，为了方便维护和减轻客户端压力，采用多页面更为合适，最后将多页面部署到web server上即可。

使用webpack打包多页面