laravel5.5 + react完成簡單的CRUD
在這篇文章中雪猪，我想和大家分享如何在PHP Laravel框架中使用js來創(chuàng)建crud（Create Read Update Delete）應(yīng)用程序栏尚。在這個例子中，您可以學(xué)習(xí)如何為laravel reactjs應(yīng)用程序構(gòu)建設(shè)置只恨，我還使用axios post請求官觅，獲取請求休涤，放入請求和刪除請求來插入更新刪除應(yīng)用程序功氨。
教程大概分為如下9步
- 1.1) 第1步：安裝Laravel 5.5
- 1.2) 第2步：數(shù)據(jù)庫配置
- 1.3) 第3步：創(chuàng)建產(chǎn)品表格和模型
- 1.4) 第4步：創(chuàng)建Web路由和API路由
- 1.5) 第5步：創(chuàng)建ProductController
- 2.0) 第6步：安裝ReactJS的配置
- 3.0) 第7步：創(chuàng)建React組件文件
- 4.0) 第8步：創(chuàng)建視圖文件
- 5.0) 第9步：運行項目
1. 安裝laravel5.5
1.1 創(chuàng)建項目
composer create-project laravel/laravel laravel-react --prefer-dist
1.2 修改數(shù)據(jù)庫配置
創(chuàng)建數(shù)據(jù)庫并修改配置文件
cd laravel-react
vim .env
1.3 創(chuàng)建文章遷移表及模型
php artisan make:model Post -m
1
這樣就創(chuàng)建好了Post模型以及posts表
當(dāng)然你也可以分兩步執(zhí)行
// 創(chuàng)建Post 模型
php artisan make:model Post
// 創(chuàng)建posts表
php artisan make:migration create_posts_table
修改遷移文件的up方法
database/migrations/2018_01_23_021301_create_posts_table.php
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
執(zhí)行遷移
php artisan migrate
2
修改app/Post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'title', 'body'
];
}
1.4 創(chuàng)建web路由和api路由
routes/web.php
Route::get('/', function () {
return view('welcome');
});
routes/api.php
Route::resource('posts', 'PostController');
1.5 創(chuàng)建PostController
php artisan make:controller PostController --resource
--resource會默認(rèn)創(chuàng)建以下方法
- index()
- store()
- edit()
- update()
- destory()
6) show() 這里暫時我們不需要這個方法
修改 app/Http/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$data = Post::all();
return response()->json($data);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create(Request $request)
{
$data = new Post([
'title' => $request->get('title'),
'content' => $request->get('content')
]);
$data->save();
return response()->json('添加成功 :)');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data = new Post([
'title' => $request->get('title'),
'content' => $request->get('content')
]);
$data->save();
return response()->json('保存成功 :)');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$data = Post::find($id);
return response()->json($data);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$data = Post::find($id);
$data->title = $request->get('title');
$data->content = $request->get('content');
$data->save();
return response()->json('修改成功 :)');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$data = Post::find($id);
$data->delete();
return response()->json('刪除成功 :)');
}
}
2. 安裝ReactJS
修改前端預(yù)置
php artisan preset react
npm 安裝
npm install
運行
npm run dev
安裝react router
npm install react-router@2.8.1
3. 創(chuàng)建React組件文件
我們需要創(chuàng)建的文件列表如下:
- 1）app.js
- 2）bootstrap.js
- 3）組件/ CreatePost.js
- 4）組件/ DisplayPost.js
- 5）組件/ MasterPost.js
- 6）組件/ MyGlobleSetting.js
- 7）組件/ TableRow.js
- 8）組件/ UpdatePost.js
resources/assets/js/app.js
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Master from './components/Master';
import CreatePost from './components/CreatePost';
import DisplayPost from './components/DisplayPost';
import UpdatePost from './components/UpdatePost';
render(
<Router history={browserHistory}>
<Route path="/" component={Master} >
<Route path="/add-item" component={CreatePost} />
<Route path="/display-item" component={DisplayPost} />
<Route path="/edit/:id" component={UpdatePost} />
</Route>
</Router>,
document.getElementById('crud-app'));
resources/assets/js/bootstrap.js
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
resources/assets/js/components/CreatePost.js
import React, {Component} from 'react';
import {browserHistory} from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';
class CreatePost extends Component {
constructor(props){
super(props);
this.state = {postTitle: '', postContent: ''};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange1(e){
this.setState({
postTitle: e.target.value
})
}
handleChange2(e){
this.setState({
postContent: e.target.value
})
}
handleSubmit(e){
e.preventDefault();
const posts = {
title: this.state.postTitle,
content: this.state.postContent
}
let uri = MyGlobleSetting.url + '/api/posts';
axios.post(uri, posts).then((response) => {
browserHistory.push('/display-item');
});
}
render() {
return (
<div>
<h1>Create Post</h1>
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Post Title:</label>
<input type="text" className="form-control" onChange={this.handleChange1} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Post Content:</label>
<textarea className="form-control col-md-6" onChange={this.handleChange2}></textarea>
</div>
</div>
</div><br />
<div className="form-group">
<button className="btn btn-primary">Add Post</button>
</div>
</form>
</div>
)
}
}
export default CreatePost;
resources/assets/js/components/DisplayPost.js
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';
class DisplayPost extends Component {
constructor(props) {
super(props);
this.state = {value: '', posts: ''};
}
componentDidMount(){
axios.get(MyGlobleSetting.url + '/api/posts')
.then(response => {
this.setState({ posts: response.data });
})
.catch(function (error) {
console.log(error);
})
}
tabRow(){
if(this.state.posts instanceof Array){
return this.state.posts.map(function(object, i){
return <TableRow obj={object} key={i} />;
})
}
}
render(){
return (
<div>
<h1>Post</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Post</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Post Title</td>
<td>Post Content</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
export default DisplayPost;
resources/assets/js/components/Master.js
import React, {Component} from 'react';
import { Router, Route, Link } from 'react-router';
class Master extends Component {
render(){
return (
<div className="container">
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" >bear777.com</a>
</div>
<ul className="nav navbar-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="add-item">Create Post</Link></li>
<li><Link to="display-item">Post List</Link></li>
</ul>
</div>
</nav>
<div>
{this.props.children}
</div>
</div>
)
}
}
export default Master;
resources/assets/js/components/MyGlobleSetting.js
class MyGlobleSetting {
constructor() {
this.url = 'http://localhost:8000';
}
}
export default (new MyGlobleSetting);
resources/assets/js/components/TableRow.js
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';
class TableRow extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
let uri = MyGlobleSetting.url + `/api/posts/${this.props.obj.id}`;
axios.delete(uri);
browserHistory.push('/display-item');
}
render() {
return (
<tr>
<td>
{this.props.obj.id}
</td>
<td>
{this.props.obj.title}
</td>
<td>
{this.props.obj.content}
</td>
<td>
<form onSubmit={this.handleSubmit}>
<Link to={"edit/"+this.props.obj.id} className="btn btn-primary">Edit</Link>
<input type="submit" value="Delete" className="btn btn-danger"/>
</form>
</td>
</tr>
);
}
}
export default TableRow;
resources/assets/js/components/UpdatePost.js
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';
class UpdatePost extends Component {
constructor(props) {
super(props);
this.state = {title: '', content: ''};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount(){
axios.get(MyGlobleSetting.url + `/api/posts/${this.props.params.id}/edit`)
.then(response => {
this.setState({ title: response.data.title, content: response.data.content });
})
.catch(function (error) {
console.log(error);
})
}
handleChange1(e){
this.setState({
title: e.target.value
})
}
handleChange2(e){
this.setState({
content: e.target.value
})
}
handleSubmit(event) {
event.preventDefault();
const posts = {
title: this.state.title,
content: this.state.content
}
let uri = MyGlobleSetting.url + '/api/posts/'+this.props.params.id;
axios.patch(uri, posts).then((response) => {
this.props.history.push('/display-item');
});
}
render(){
return (
<div>
<h1>Update Post</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/display-item" className="btn btn-success">Return to Post</Link>
</div>
</div>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Post Title</label>
<input type="text"
className="form-control"
value={this.state.title}
onChange={this.handleChange1} />
</div>
<div className="form-group">
<label name="post_content">Post Content</label>
<textarea className="form-control"
onChange={this.handleChange2} value={this.state.content}></textarea>
</div>
<div className="form-group">
<button className="btn btn-primary">Update</button>
</div>
</form>
</div>
)
}
}
export default UpdatePost;
4. 創(chuàng)建主視圖文件
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.5 ReactJS CRUD Example</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="crud-app"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
為了避免Laravel CSRF報錯
我們在視圖文件head加入
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
完整視圖
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 5.5 ReactJS CRUD Example</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="crud-app"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
5. 編譯&運行
編譯
npm run dev
artisan運行項目
php artisan serve
訪問 http://localhost:8000 即可
效果圖
圖1
圖2
主要參考資料 Laravel 5.5 ReactJS Tutorial
本教程翻譯于 Laravel 5 - Simple CRUD Application Using ReactJS
