关于前后端分离的实例教程

起源

公司随着开发人员的增多，项目数量的增加，前后端沟通的成本不断加大。原有的项目前后端未分离，作为前端还需要对PHP等后端语言有所了解，这极大增加了前端开发的学习成本，特别是遇到数据库的报错，不明所以，花费大量的时间去解决。因此，根据我们目前的业务需要，我们从一些新的项目中开始尝试进行前后端的分离。

目标

1）代码分离。前后端代码使用独立的项目目录进行分离，前端开发环境不需要配置PHP或者Java环境，全部改用Git管理项目代码。

2）开发流程改进。开发流程将会分为local【本地开发】，dev【前后端联调】，beta【QA测试】和prod【线上发布】。

工具

Nodejs

Webpack

Command pad

HostProfiles

Git

Sftp

方法论

1）确定需求，设计接口。

在整个开发流程中，当确定了需求和设计之后，前端和后端要先对接口进行设计，确定对应接口的参数和返回数据的JSON结构，然后独立进行开发。

2）本地开发

本地开发环境的构建可以借助Grunt，Gulp，以及Webpack等来搭建，我们通常是采用Webpack来实现，因为Webpack能够支持模块化，对React、VUE等开发支持度比较好，社区热度也比较高，遇到问题可以比较快的解决。使用Webpack和Webpack-dev-server可以快速的搭建一个本地服务，支持代码的热加载刷新。当然简单的服务你可以通过express来搭建。

这个时候我们通常使用Command Pad来管理命令行，比如常用的npm start，或者npm run dist 等等，方便快捷。

图片资源是统一目录进行管理，提前进行部署到七牛上面去。

本地开发将使用mock数据的方法，来进行接口的模拟，进行页面逻辑的开发。在一部分存在jquery的项目中我们使用了jquery.mockjax.js 作为mock工具。通常会创建一个api目录，集中管理所有的接口数据，通过一个index.js来统一加载和屏蔽。

3）前后端联调

前后端分离之后，前后端数据的联调就会非常的简单高效，只需要各自将代码部署到DEV服务器上，然后使用chrome提供的开发工具进行调试即可。调试过程中如果遇到问题，可以随时进行修改和提交。前端将不依赖后端的开发环境，即便DEV环境出现问题，后端也可以及时的进行处理，分工明确。特别是引入了Docker之后，我们可以方便的创建多个DEV开发环境，这样即便出现多人同事开发一个项目，也不会互相影响DEV的联调。

在发布代码的时候，引入了Sublime Text的插件sftp，来直接将本地编译好的代码推送到DEV服务器上，全程速度飞起。

4）QA测试

进入QA的测试阶段，几乎和联调阶段类似，只不过是提供了一个类似于线上的环境，单独提供给测试使用的。

5）线上发布

发布之前需要进行代码的压缩的打包，也是借助Webpack完成的。值的提到的是当线上出现bug的时候，我们需要将线上的代码映射到本地进行调试，用到了HostProfiles 和 nginx。借助git的分支功能，创建hotfix分支进行处理。

这是一个简单的前后端分离的方案，只是针对公司现有的项目情况提出的解决方案，当然还有很多地方可以改进。比如淘宝提出的中途岛计划，增加nodejs的中间层进行模板渲染和业务处理。

以上就是关于前后端分离的实例教程的详细内容，更多请关注其它相关文章！