laravel5.5 + react完成簡單的CRUD

iMax發表於2018-01-25

laravel5.5結合React完成簡單的CRUD

在這篇文章中，我想和大家分享如何在PHP Laravel框架中使用js來建立crud（Create Read Update Delete）應用程式。在這個例子中，您可以學習如何為laravel reactjs應用程式構建設定，我還使用axios post請求，獲取請求，放入請求和刪除請求來插入更新刪除應用程式。

教程大概分為如下9步

1.1) 第1步：安裝Laravel 5.5
1.2) 第2步：資料庫配置
1.3) 第3步：建立產品表格和模型
1.4) 第4步：建立Web路由和API路由
1.5) 第5步：建立PostController
2.0) 第6步：安裝ReactJS的配置
3.0) 第7步：建立React元件檔案
4.0) 第8步：建立檢視檔案
5.0) 第9步：執行專案

1. 安裝laravel5.5

1.1 建立專案

composer create-project laravel/laravel laravel-react --prefer-dist
複製程式碼

1.2 修改資料庫配置

建立資料庫並修改配置檔案

cd laravel-react

vim .env
複製程式碼

1.3 建立文章遷移表及模型

php artisan make:model Post -m
複製程式碼

這樣就建立好了Post模型以及posts表

當然你也可以分兩步執行

// 建立Post 模型
php artisan make:model Post
// 建立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();
        });
    }
複製程式碼

執行遷移

php artisan migrate
複製程式碼

修改app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        'title', 'body'
    ];
}
複製程式碼

1.4 建立web路由和api路由

routes/web.php

Route::get('/', function () {
    return view('welcome');
});
複製程式碼

routes/api.php

Route::resource('posts', 'PostController');
複製程式碼

1.5 建立PostController

php artisan make:controller PostController --resource
複製程式碼

--resource 會預設建立以下方法

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

修改前端預置

php artisan preset react
複製程式碼

npm 安裝

npm install
複製程式碼

執行

npm run dev
複製程式碼

安裝react router

npm install react-router@2.8.1
複製程式碼

3. 建立React元件檔案

我們需要建立的檔案列表如下:

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" href="https://www.bear777.com">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. 建立主檢視檔案

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 即可

效果圖

主要參考資料 Laravel 5.5 ReactJS Tutorial

本教程翻譯於 Laravel 5 - Simple CRUD Application Using ReactJS

github地址 github.com/pandoraxm/l…

原文連結 www.bear777.com/blog/larave…

使用Node+React實現簡單CRUD
2019-05-07
React
MyBatis 的簡單 CRUD 操作
2020-06-19
MyBatis
使用 json-server 簡單完成CRUD模擬後臺資料
2019-03-04
JSONServer
用express寫個簡單的CRUD
2015-06-28
Express
一個簡單的 Laravel5.5 + vue 單頁面部落格
2018-04-08
LaravelVue
使用rails實現最簡單的CRUD
2019-03-04
AI
3. 使用Mybatis完成CRUD
2024-06-11
MyBatis
socket 完成簡單的通訊
2020-05-07
基於 Laravel5.5 的簡單個人部落格系統
2018-12-29
Laravel
react hooks 的簡單使用
2020-12-07
ReactHook
簡單的實現React原理
2018-10-25
React
React中useEffect的簡單使用
2022-07-17
React
D2 Crud，一款簡單易用的表格元件
2018-09-03
元件
使用Go語言建立簡單的CRUD增刪改查
2017-01-09
Go
用Scroller完成一個簡單的ViewPager
2017-02-23
Viewpager
react 簡單優化
2018-02-06
React優化
Laravel5.5 新特性~精簡的驗證
2017-07-27
Laravel
react-color庫的簡單使用
2019-05-05
React
React + Antd實現簡單的todolist
2019-05-01
React
React-Redux簡單使用
2018-10-12
ReactRedux
React 簡單實現（一）
2018-07-27
React
React-redux的原理以及簡單使用
2019-02-22
ReactRedux
關於 React Hooks 的簡單介紹
2018-10-30
ReactHook
使用Guava的RateLimiter完成簡單的大流量限流
2018-11-01
GuavaMIT
React實現簡單易用Toast
2019-05-09
ReactAST
[譯]簡單的React身份校驗機制
2019-01-15
React
Laravel5.5 + Vue 開發單頁應用
2018-03-23
LaravelVue
是否有用於建立簡單CRUD應用的開源工具？ - ycombinator
2020-05-22
開源工具
JS滑鼠事件完成元素拖拽（簡單-高階）
2020-12-31
JS事件
Transact-SQL系列: 單表的CRUD操作
2009-01-16
SQL
React Native 定義元件(簡單)
2016-10-18
React Native元件
使用 React Testing Library 和 Jest 完成單元測試
2020-03-24
React
Laravel+Swoole 完成一個簡單的線上聊天室
2017-10-02
Laravel
一個簡單的構建React元件動畫方案
2019-04-11
React元件動畫
React 中的新舊 Context 簡單對比
2018-02-26
ReactContext
React Native學習之 ListView 的簡單使用
2017-12-27
React NativeView
MyBatis-Plus：簡化 CRUD 操作的藝術
2024-10-31
MyBatis
擴充套件：使用 Vue.js 和 node 共建一個簡單的 CRUD 應用
2019-07-15
套件Vue.js