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

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

项目截图#

file

file

filefile

在线预览

项目仓库#

前端 angular-hub

api 服务端 angular-hub-administer

欢迎 starfork 一起学习。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 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年前 评论