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

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

下载安装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; #} }

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

以上就是“angularjs + laravel 前后端分离框架搭建教程”的详细内容，想要获取更多关于laravel教程欢迎关注编程学习网