You are here
angularjs + laravel 前后端分离框架搭建教程 (Nginx)
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;
#}
}这里就解决了请求是访问前端目录还是走后端路由的问题了。
