knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

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 と同様です

・migrate
https://github.com/kuc-arc-f/spa2-ver2/blob/master/database/migrations/2019_04_20_234711_create_to_dos_table.php

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

参考のページ

knaka0209.hatenablog.com