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
複製程式碼

1

這樣就建立好了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
複製程式碼

2

修改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 會預設建立以下方法

  1. index()
  2. store()
  3. edit()
  4. update()
  5. 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 即可

效果圖

圖1

圖2

主要參考資料 Laravel 5.5 ReactJS Tutorial

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

github地址 github.com/pandoraxm/l…

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

相關文章