前后端分离的一次实践,以 Laravel 为服务端, angular 为前端的一个练习项目

当初学习 L03 Laravel 教程 - 实战构架 API 服务器 教程的时候,自己动手写的一个项目,主要是模仿社区功能写的,由于是练习用的,样式功能什么的没有什么讲究,功能也没多少,而且由于中途做其他项目去了,停滞了很久,现在就拿出来做个分享吧。

项目截图

file

file

filefile

在线预览

项目仓库

前端 angular-hub

api 服务端 angular-hub-administer

欢迎 starfork 一起学习。

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 6

刚学angular,始终有几个问题,搜也搜不到,看到楼主分享学习项目,请教一下。
angular打包出的前端项目,一定要单独占一个坑来部署吗?
我看你的github上就是分了两个项目,angular一个,laravel一个。难道这就是最佳实践了吗?即“前后端彻底分离”。
如果这就是最佳实践,那分了两个项目部署之后,接口和前端岂不是就在两个域名下了?angular的http请求本质还是ajax吧,又不能跨域。(虽然跨域的问题好像能解决,但感觉毕竟不是正途,是野路子)
难道就没有方法可以把angular打包内容作为静态资源放入laravel里面,然后用户只访问这些“angular静态资源”,而angular访问同域名下laravel提供的接口。
(以上全是我自己的猜测,我只是刚走完了angular的hero tourist,并不清楚最佳实践是什么样的。)

6个月前

@kiyoma 跨域怎么就成野路子了 :joy: :joy:。部署到一个项目里没试过哎,估计路径是个问题。个人理解前后端的好处在于分工比较明确,做好约定之后相互开发比较方便,如果一个项目既有web端也有app端还有小程序端的话会减少很多工作。我一开始也有过你这样的想法,但是公司开发的项目都是多端的,慢慢思维转变过来也习惯了。还有就是部署到一个域名之下这应可以通过web server(比如nginx)的配置实现(没实践过哦) :joy:

6个月前

似乎,前后端分离话,前端都要架设一个nodejs服务器用作中转吧,好像这样才能解决跨域的问题。

6个月前

@Jeffrey 关于“野路子”这个说法,也是我个人的感觉,可能并不正确。我是这么认为的,既然XmlHttpRequest在原始的规范里就不允许跨域,那必然是有一定的原因在里面的。我并不知道成熟的方案是如何打破跨域的限制的,但推测是和“越狱”性质差不多的野路子。我认为“最佳实践”就不应该有野路子,所以才有了这样的疑问。
(当然,这些都是我xjb猜的东西,欢迎大家指正 :grin:)
回到我的这个问题,那么是不是可以下结论了——angular的编译打包内容单独部署一份前端,服务端api单独部署,并解决跨域问题,就是angular、react、vue等js前端框架的最佳使用方案?
关于能不能部署到一个域名下,能不能以nginx为例说说怎么弄?写个大概思路即可。
谢谢!

6个月前

@kiyoma 我可以试试,没问题我回复你。关于跨域只是为了安全,后端可以通过 Access-Control-Allow-Origin 指定允许跨域请求的域名,虽然我没有仔细研究跨域,但是XmlHttpRequest肯定不是不允许跨域的,只是为了安全做了限制,需要双方约定之后才可以访问,以增强安全性。我个人认为,去避免跨域肯定不是最好的办法也不是我们需要花大量时间去解决的问题(这都不算是一个问题),而我们应该把精力花在解决安全性的问题上,毕竟解决跨域就是几行代码的事情,成熟的前后端框架都可以很轻松的解决。

6个月前

@kiyoma 没必要纠结于一个域名。我们去年也是这种前后端分离方式做的开发。你要知道这种开发做到前后端真正的分工,实际上企业项目前后端都是不同的团队负责的。

6个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!