laravel5.5 + react完成簡(jiǎn)單的CRUD

2501207950 發(fā)布于2019-06-28 18:19 / 3191人閱讀

摘要：完成簡(jiǎn)單的在這篇文章中，我想和大家分享如何在框架中使用來(lái)創(chuàng)建應(yīng)用程序。在這個(gè)例子中，您可以學(xué)習(xí)如何為應(yīng)用程序構(gòu)建設(shè)置，我還使用請(qǐng)求，獲取請(qǐng)求，放入請(qǐng)求和刪除請(qǐng)求來(lái)插入更新刪除應(yīng)用程序。

laravel5.5 + react完成簡(jiǎn)單的CRUD

在這篇文章中，我想和大家分享如何在PHP Laravel框架中使用js來(lái)創(chuàng)建crud（Create Read Update Delete）應(yīng)用程序。在這個(gè)例子中，您可以學(xué)習(xí)如何為laravel reactjs應(yīng)用程序構(gòu)建設(shè)置，我還使用axios post請(qǐng)求，獲取請(qǐng)求，放入請(qǐng)求和刪除請(qǐng)求來(lái)插入更新刪除應(yīng)用程序。

教程大概分為如下9步

1.1) 第1步：安裝Laravel 5.5

1.2) 第2步：數(shù)據(jù)庫(kù)配置

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步：運(yùn)行項(xiàng)目

1. 安裝laravel5.5 1.1 創(chuàng)建項(xiàng)目

composer create-project laravel/laravel laravel-react --prefer-dist

1.2 修改數(shù)據(jù)庫(kù)配置

創(chuàng)建數(shù)據(jù)庫(kù)并修改配置文件

cd laravel-react

vim .env

1.3 創(chuàng)建文章遷移表及模型

php artisan make:model Post -m

這樣就創(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

修改app/Post.php


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 會(huì)默認(rèn)創(chuàng)建以下方法
1) index()
2) store()
3) edit()
4) update()
5) destory()
6) show() 這里暫時(shí)我們不需要這個(gè)方法

修改 app/Http/PostController.php
json($data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    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  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    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 IlluminateHttpResponse
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        $data = Post::find($id);
        return response()->json($data);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    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 IlluminateHttpResponse
     */
    public function destroy($id)
    {
        $data = Post::find($id);
        $data->delete();

        return response()->json("刪除成功 :)");
    }
}
2. 安裝ReactJS
修改前端預(yù)置
php artisan preset react
npm 安裝
npm install
運(yùn)行
npm run dev
安裝react router
npm install react-router@2.8.1
3. 創(chuàng)建React組件文件
我們需要?jiǎng)?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(
  
      
        
        
        
      
    ,
        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 (
      
        Create Post
        
          
            
              
                Post Title:
                
              
            
            
            
              
                
                  Post Content:
                  
                
              
            


            
              
            
        
  
      )
    }
}
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 ;
     })
   }
  }


  render(){
    return (
      
        Post


        
          
          
            Create Post
          
        




        
              {this.tabRow()}
            
            
            
                ID
                Post Title
                Post Content
                Actions
            
            
            
        
    
    )
  }
}
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 (
      
        
          
            
              bear777.com
            
            
              Home
              Create Post
              Post List
            
          
      
          
              {this.props.children}
          
      
    )
  }
}
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 (
        
          
            {this.props.obj.id}
          
          
            {this.props.obj.title}
          
          
            {this.props.obj.content}
          
          
          
            Edit
                   
         
          
        
    );
  }
}


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 (
      
        Update Post
        
          
          
            Return to Post
          
        
        
            
                Post Title
                
            


            
                Post Content
                  
            


            
                
            
        
    
    )
  }
}
export default UpdatePost;
4. 創(chuàng)建主視圖文件
resources/views/welcome.blade.php


    
        
        
        
        Laravel 5.5 ReactJS CRUD Example
        
    
    
        
        
    

為了避免Laravel CSRF報(bào)錯(cuò)
我們?cè)谝晥D文件head加入



完整視圖
resources/views/welcome.blade.php


    
        
        
        
        
        Laravel 5.5 ReactJS CRUD Example
        
        
    
    
        
        
    

5. 編譯&運(yùn)行
編譯
npm run dev
artisan運(yùn)行項(xiàng)目
php artisan serve
訪問(wèn) http://localhost:8000 即可
效果圖


主要參考資料 Laravel 5.5 ReactJS Tutorial本教程翻譯于 Laravel 5 - Simple CRUD Application Using ReactJS
github地址 https://github.com/pandoraxm/laravel-react-curd
原文鏈接 https://www.bear777.com/blog/laravel5-5-react-crud