Laravel 5 + React.js で、ajax でリスト作成など #Laravel #React.js #PHP
index:
概要:
前回の Laravel 5 + React.js の関連になります。
ajaxで、DB登録機能、リスト表示など実装となります。
環境
php7.1
Laravel 5.8
React.js
react-dom
react-router-dom
参考の設定
resource など、一部のフォルダです。
github.com
実装など
事前に、mysql DB作成、接続設定を行います。
手順は、前のVue.js と同様です
model:
https://github.com/kuc-arc-f/spa2-ver2/blob/master/app/ToDo.php
・app.js
https://github.com/kuc-arc-f/spa2-ver2/blob/master/resources/js/app.js
require('./bootstrap'); import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter, Router, Link, Route, browserHistory } from 'react-router-dom'; import Main from './components/Main'; import Create from './components/Create'; import List from './components/List'; import Edit from './components/Edit'; // class Hello extends React.Component { render() { return ( <BrowserRouter> <div> <ul> <li><Link to="/create">Create</Link></li> <li><Link to="/list">List</Link></li> </ul> <Route path="/create" component={Create} /> <Route path="/list" component={List} /> <Route path="/todos/:id/edit" component={Edit} /> </div> </BrowserRouter> ); } } render( <Hello />, document.getElementById('example') );
・web.php
https://github.com/kuc-arc-f/spa2-ver2/blob/master/routes/web.php
Route::prefix('api')->group(function(){ Route::resource('todos', 'ToDosController', ['only'=>['index', 'store', 'show', 'update', 'destroy']]); }); // Route::get('/{any?}', function () { return view('welcome'); })->where('any', ".*");
・コントローラ
https://github.com/kuc-arc-f/spa2-ver2/blob/master/app/Http/Controllers/ToDosController.php
コンポーネント
・追加の画面
Create.js
https://github.com/kuc-arc-f/spa2-ver2/blob/master/resources/js/components/Create.js
・リスト
List.js
https://github.com/kuc-arc-f/spa2-ver2/blob/master/resources/js/components/List.js
http://localhost:8000/list
開きます。