关于前后端分离的实例教程
时间:2021-07-01 10:21:17
帮助过:5人阅读
起源
公司随着开发人员的增多,项目数量的增加,前后端沟通的成本不断加大。原有的项目前后端未分离,作为前端还需要对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的中间层进行模板渲染和业务处理。
以上就是关于前后端分离的实例教程的详细内容,更多请关注Gxl网其它相关文章!