我之前看到了你的问题,但我推迟了回答,所以我可以给你一个更完整的答案.我可以回答你的问题,并有一个我希望有帮助的例子.
基本上,使用Laravel作为React(或JS)单页面应用程序的API后端:
设置一个Laravel项目 - 它是后端,所以设置它和你想要的路线
1.a 建议使您的SPI的URL与Laravel应用程序本身可能用于页面请求或其他事物(例如"/ api/...")的普通URL 分开/不同.
1.b Laravel(5 +左右,我的例子是5.1)附带了一个叫做"Elixir"的Gulp/build工具.它的设置是在resources/...目录中查找脚本文件和视图等内容,因此我建议将脚本放在某些地方,如resources/assets/scripts/app.js等.
1.c(构建过程)假设您将React脚本放在resources/assets/script中,那么当您运行"gulp"并运行Elixir任务来构建应用程序时,它会将捆绑的app.js文件放入public/js/app.js - 默认情况下,Laravel视图将public /目录视为其根目录,因此您可以将索引页中的构建文件引用为"js/app.js".
1.d如果您不熟悉Gulp或Elixir,我建议您阅读本页面的概述:
设置Laravel路由,索引页面和API内容.我建议路由'/'和所有NON-API(或已知)路由只是使Index页面View,我们将加载app.js ReactJS应用程序文件.
2.a值得注意的是,在我的例子中,目前我还没有实现React路由器,所以我暂时离开所有React路由.我假设这是你知道的,因为你的问题似乎是"如何使后端成为Laravel".
Route :: get('/',function(){return View :: make('pages.index');});
Route :: group(['prefix'=>'api'],function(){
Route::get('tasks', 'TodosController@index');
});
2.b设置路由以将请求映射到控制器操作,您可以在其中自定义响应.例如,您可以使用JSON响应JSON API:
TodosController @指数
$current_tasks = array(
array("id" => "00001", "task" => "Wake up", "complete" => true),
array("id" => "00002", "task" => "Eat breakfast with coffee power", "complete" => true),
array("id" => "00003", "task" => "Go to laptop", "complete" => true),
array("id" => "00004", "task" => "Finish React + Laravel Example app", "complete" => false),
array("id" => "00005", "task" => "Respond on StackOverflow", "complete" => false)
);
return response()->json($current_tasks);
资源/页/ index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>BLaravel 5.1 + ReactJS Single-Page App</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/app.css" />
<!-- BACKUP SCRIPT CNDS, for React -->
<!-- <script src="https://unpkg.com/react@15/dist/react.js"></script> -->
<!-- <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> -->
</head>
<body>
<!-- Container for React App -->
<div class="container" id="react-app-container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
因为(就我所知)没有Plnkr这类东西,我制作了Laravel + React的本地开发版本来说明我制作你似乎要求的应用程序的方式.它目前托管在我的GitHub帐户上,因此请随意克隆它并按照自述文件使用它,如果它有帮助,或要求编辑/帮助/澄清.
https://github.com/b-malone/Laravel5-ReactJS-Boilerplate.git
构建/设置命令(参考)
git clone ... [TEST/] && cd into [TEST/]
composer install
npm install
cp .env.example .env
gulp
php artisan serve
visit http://localhost:8000
如果这回答了你的问题,请告诉我.
干杯.