欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

​angularjs + laravel 前后端分离框架搭建教程 (Nginx)

angularjs + laravel 前后端分离框架搭建教程 (Nginx)                        

                            6.9k 次阅读  ·  读完需要 13 分钟                        
4        
   

angularjs + laravel 前后端分离框架搭建教程 (Nginx)

angularjs 和 laravel 分别是当前框架里比较流行的框架,一个是前端js框架,一个是后端PHP框架。 国内的盆友都对前后端分离极其的热衷,这里我就和大家说说我用angularjs 和 laravel 搭建前后端分离框架的一个整体过程。

1. 首先,我们要分析一下这两个框架的几个要素。
  • laravel 框架里包含了前端渲染的功能,所以整合的过程中。我们要摒弃laravel 的渲染模板,laravel只提供纯粹的接口功能。

  • angularjs 框架消费接口,并实现显示逻辑,页面跳转等前端功能。

  • 路由的各种问题,我们从nginx的配置文件入手。

2. 现在,我们开始动手吧。
  • 环境: ubuntu16.04   angular2.0   laravel5.2  nginx1.10

  • 下载安装laravel ,我们这里用laravel 5.2版本的,可以从github下载。

git clone https://github.com/laravel/laravel.git
cd laravel
composer install
chmod -R 777 ./storage  ./bootstrap/cache
   

laravel安装过程参考http://www.golaravel.com/laravel/docs/5.1/    

  • 下载安装angularjs,教程中使用的是angular2.0 版本

git clone https://github.com/angular/angular.git
   
  • 安装 nginx : 略;

  • 文件整合: 将angularjs 文件加放到 laravel 的public目录下,并重命名为views。 这个views就是我们前端的开发目录。

mv ./angular ./laravel/public/views
   

其实这个views也可以直接放在laravel的根目录,即跟app文件夹同一级,只不过是后面nginx写的路径不一样而已。

  • laravel路由部分:laravel 只做接口路由,页面跳转和静态页面的请求一律找前端去。 所以这里路由只有这样配置就可以。

Route::get('/',function(){
          //跳转到前端登录的界面
          return redirect('pages/login.html');
 } );
  //相应的接口路由
  Route::get('/auth/login', 'Auth\AuthController@postLogin');
  Route::get('/auth/logout', 'Auth\AuthController@getLogout');
  //coding..  其他路由
   
  • angular 目录结构:

public
├── index.php
└── views
    ├── assets
    ├── bower_components   // angular引用js脚本目录
    ├── css
    │   └── style.css       //自定义css目录
    ├── data
    │   └── time.json       
    ├── index
    │   ├── index.html
    ├── pages
    │   ├── blank.html
    │   ├── grid.html
    │   ├── index.html
    │   ├── login.html
    │   └── typography.html
    └── scripts
        ├── app.js
        ├── controllers
        └── services
   
  • 配置nginx.conf 解决请求走前端还是走后端问题。

这里我们说一下这个问题,就是如果nginx.conf不做区分,那么前后端的请求全部都会去找后端去了,这样前后端就没分离了。

具体实现原理是这样的:我们观察到views目录下有几个固定的文件夹, 一个bower_components放的引用文件,assets放的自定义开发的组件,css放的自定义的css文件,data放的固定数据,index放的前端主文件。 pages放的前端未渲染的页面,script 放的angular控制器等文件。当请求的uri头是这这几个目录名,那就让请求跑到angular目录来找。
nginx配置如下(这里我只贴出server部分的配置了):

server {
        listen      8080;
        server_name 0.0.0.0;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
           location ~ ^/(bower_components|css|data|scripts|pages){
            root       path/to/angular-laravel/public/views;
               index      index.html;
           }
        location / {
               root   path/to/angular-laravel/public;
            index  index.php index.html index.htm;
               try_files $uri $uri/ /index.php?$query_string;   #for laravel
               if (!-e $request_filename) {
                rewrite .* /index.php last;
               }
        }
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
            root           path/to/angular-laravel/public;
            fastcgi_pass   localhost:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
   

这里就解决了请求是访问前端目录还是走后端路由的问题了。

3. 教程到此结束,希望对各位开发的盆友有所帮助。


来自 https://segmentfault.com/a/1190000006056268

普通分类: