angularjs php 框架,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

下载安装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. 教程到此结束，希望对各位开发的盆友有所帮助。