登录  /  注册
首页 > php框架 > Laravel > 正文

介绍laravel+vue前后端分离之服务器端配置

藏色散人
发布: 2021-06-26 14:40:23
转载
3985人浏览过

前言

前后端分离一直是laravel学习绕不开的话题。前期我们可以通过基于laravel优秀的框架(比如laravel-admin,dcat-admin),快速构建一个不需要太多前端代码的后台管理系统。但是到了后期,随着项目量级的增加,我们还需要诸如中台(可以简单理解为面向用户的管理后台)、前端网站等业务,如果还使用上述的框架,可能就显得力不从心。并且在实际开发中会遇到这样的问题:

  • 公司有前端和后端工程师,前端工程师采用vue开发,而作为phper的我们采用laravel去开发。那么问题就来了,我们不可能让前端工程师也采用laravel-mix,在laravel框架下开发,这样很不友好。

  • 原来的模式耦合度很高,不管是维护还是扩展都相当困难,所以减少模块间的耦合度,对于后续的维护和扩展都是相当有帮助的。

概念明晰

那么这个时候,我们都会想到前后端分离
那么什么是前后端分离呢?具体的定义今天我们不讨论,有兴趣可以查看这些文章:到底什么是前后端分离?,前后端分离实践有感
明白了基本概念和思路后,我们就应该开始干事情了。但是在开始之前,就要思考当前项目适不适合前后端分离?什么样的项目适合前后端分离?因为如果项目不适合的话,那么前后端分离无疑是会加重工作量,例如只是纯后台管理系统开发,加上接口访问,项目访问量也不大,那么laravel-admin这样的模式完全能够胜任。
到这里会有一个误区,那就是前端代码和后端代码分开开发就是前后端分离(这里貌似和上面说的有点矛盾)。所谓的前后端分离不仅是为了解耦,为了方便后续维护和扩展,本质上是:前端项目与后端项目是两个项目,需要独立部署。两个不同的工程,两个不同的代码库,不同的开发人员。前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑(来源:为什么要前后端分离?前后端分离的好处和坏处是什么?)。
所以假设,我们的前后端本地开发已经完成,我们需要放到线上环境去测试,那么我们如何去服务器进行部署和配置呢?

相关教程推荐:《laravel教程

开始

例如我们完成的项目是这样的:
前端使用vue,后端使用laravel+jwt+dingo构建了api接口,以及使用了laravel-admin作为后端管理系统。
按照传统配置后端的方法,只配置后台管理系统,我们一键安装lnmp后,nginx配置一下,root直接指向项目的public目录,或者干脆用宝塔面板,几分钟以后就好了。这个对于我们讲武德的程序员来说叫做“点到为止”。后端直接用域名+/admin就可以使用了。
可是现在有了vue,需要把主域名shop.test 给前端用,我们会说尤老师,牛老师,刘老师你不讲武德,尤老师说对不起,我就要用。
于是就有两种方法可以达到使用的效果:

尝试

1、分别部署,采用不同域名

前端域名是:vue.shop.test
后端域名是shop.test/admin
接口域名是shop.test/api
我只要在前端项目的nginx下,根目录指向目标文件夹就行,例如:

server{
    listen 80;
    server_name vue.shop.test;#域名
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/vue.shop.test/dist;#根目录    ...}
登录后复制

反向代理到接口地址:

#意思就是只要含有"api"的请求,都转发到接口地址去请求
location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }
登录后复制

后端项目配置跨域:

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';}
登录后复制

保存访问前端:vue.shop.test, 可以正常访问。

2、分别部署,采用相同域名、不同端口

这个就相对简单很多,不需要第二个域名,效率也高的多。
例如,我的后端项目位于/www/wwwroot/test_adimin,前端项目是/www/wwwroot/test_vue,我们只需要在nginx配置里再配置监听另外一个端口就可以:

server{
    listen 80;
    server_name shop.test;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/test_adimin/public;
    ...}server{
    listen 8080;
    server_name shop.test:8080;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/test_vue/dist;
    location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    #这里要写,不然会报:
    #We’re sorry but XXX doesn’t work properly without JavaScript enabled
    #网上说的把history改为hash就可以,那个不行,不适用于现在的情况。
    location /api    {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://shop.test/api;
    }
    ...}
登录后复制

配置成功保存,访问shop.test:8080 速度杠杠的。

总结

优点

1.前后端开发人员各司其职,各自部署,相互不干涉,提高开发效率。
2.能够实现解耦,使得业务更加清晰,减少业务复杂程度。

缺点

1.增加开发、部署难度;
2.提高了对接和沟通成本;
3.不是所有的项目都适合前后端分离,需要框架设计者、开发者自己去判断

以上就是介绍laravel+vue前后端分离之服务器端配置的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:learnku网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号