laravel5.5 + react完成簡單的CRUD

2501207950 發布于2019-06-28 18:19 / 3199人閱讀

摘要：完成簡單的在這篇文章中，我想和大家分享如何在框架中使用來創建應用程序。在這個例子中，您可以學習如何為應用程序構建設置，我還使用請求，獲取請求，放入請求和刪除請求來插入更新刪除應用程序。

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步：創建ProductController

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


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
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
修改前端預置
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(
  
      
        
        
        
      
    ,
        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. 創建主視圖文件
resources/views/welcome.blade.php


    
        
        
        
        Laravel 5.5 ReactJS CRUD Example
        
    
    
        
        
    

為了避免Laravel CSRF報錯
我們在視圖文件head加入



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


    
        
        
        
        
        Laravel 5.5 ReactJS CRUD Example
        
        
    
    
        
        
    

5. 編譯&運行
編譯
npm run dev
artisan運行項目
php artisan serve
訪問 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

GPU云服務器云服務器 CRUD 短信接口開發完成的 ofbiz crud 用戶需完成的優惠價格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/28147.html

windows下laravel5.5手寫教程1（適合初學者）

摘要：打開瀏覽器輸入，如無意外，將出現如下圖，表示框架安裝成功。四系統內部后臺管理系統這個是框架自帶的后臺登錄管理系統，只需要簡單的命令即可運行。出現上圖即為，創建模型成功。在PHP個各種web開發框架中，laravel算是一款簡潔、優雅的開發框架，本人也剛剛接觸到laravel，通過學習大神們的一些文章，下面是我的一些心得體會，希望可以給初學者一些幫助，大家一起進步。言歸正傳：本人環境...

GeekGhc 2019-07-01 12:23 評論0 收藏0
Laravel5-Markdown-Editor 在線編輯器

摘要：是基于封裝的在線編輯器，支持項目。已集成本地七牛云阿里云文件存儲。更新記錄完成在線編輯器主程序，且集成本地七牛阿里云存儲。 Laravel5-Markdown-Editor Laravel5-Markdown-Editor 是基于 editor.md 封裝的 Markdown 在線編輯器，支持 Laravel5 項目。已集成本地、七牛云、阿里云文件存儲。更新記錄 2017-11-09...

MoAir 2019-06-28 14:14 評論0 收藏0
laravel5.5和laravel-admin 安裝小坑筆記

摘要：通過安裝器首先，通過安裝安裝器確保在系統路徑中中對應路徑是，對應路徑是，其中表示當前用戶家目錄，否則不能在命令行任意路徑下調用命令。安裝完成后，通過簡單的命令即可在當前目錄下創建一個新的應用，例如，將會創建一個名為的新應用，且包含所有依賴。配置laravel-admin 官方的教程還是沒問題的,但也遇到了一點點小小坑,再次做個記錄吧安裝 LaravelLaravel 使用 Comp...

xiongzenghui 2019-07-01 11:05 評論0 收藏0
Any-基于Laravel5.4新的權限管理后臺骨架

摘要：最簡化權限管理系統，基于開發?；陂_發，唯一優化的是用權限和路由別名綁定，這樣代碼寫好之后就可以直接使用。如果是超級管理員，即使沒有這個權限會自動賦予權限給超級管理員角色。默認管理員賬號密碼。然后正常執行命令其他命令即可。 Any 最簡化權限管理系統，基于 Laravel5.4 開發。由于 Laravel5.5 發布推遲，只好先寫個 Laravel5.4版本的，后面再升級上去。演示地址...

Lavender 2019-06-28 13:17 評論0 收藏0
laravel5.5手寫教程3的基于資源路由的CURD操作（適合初學者）

摘要：新增一篇新聞新增失敗輸入不符合要求請輸入標題請輸入內容新增文章上面代碼中的是為了防攻擊的，每個表單都必須存在。本文我將結合簡單例子，完成laravel框架下的增刪改查，希望會對大家有所幫助。在進行之前，大家應該保證自己的數據庫鏈接無誤,artisan命令能正常使用，路由鏈接無問題。一、創建控制器、路由避免影響其他路由，我們先注釋掉之前聯系時編寫的所有路由。因為上一章我們已經學會建立...

olle 2019-07-01 12:24 評論0 收藏0

發表評論

登陸后可評論

0條評論

2501207950

男|高級講師

我要關注我要私信

TA的文章

c語言是如何解析表達式語句"2+3*4；"的？

閱讀 1132·2021-11-24 09:38
人民日報評論：理性看待當前的元宇宙熱潮

閱讀 3238·2021-11-19 09:56
4000字詳細說明，推薦20個好用到爆的Pandas函數方法

閱讀 2961·2021-11-18 10:02
CSS Animations vs Web Animations API

閱讀 732·2019-08-29 12:50
zhilizhili-ui 2016 web app啟動界面制作

閱讀 2572·2019-08-28 18:30
CSS和Js一些筆記

閱讀 866·2019-08-28 18:10
NPM酷庫：numeral，格式化數字

閱讀 3671·2019-08-26 11:36
javascript 數組排序（sort,冒泡）

閱讀 2646·2019-08-23 18:23

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

laravel5.5 + react完成簡單的CRUD

Create Post

Post

Update Post

相關文章

**windows下laravel5.5手寫教程1（適合初學者）**

Laravel5-Markdown-Editor 在線編輯器

laravel5.5和laravel-admin 安裝小坑筆記

**Any-基于Laravel5.4新的權限管理后臺骨架**

laravel5.5手寫教程3的基于資源路由的CURD操作（適合初學者）

發表評論

0條評論

2501207950

男|高級講師

TA的文章

c語言是如何解析表達式語句"2+3*4；"的？

人民日報評論：理性看待當前的元宇宙熱潮

4000字詳細說明，推薦20個好用到爆的Pandas函數方法

CSS Animations vs Web Animations API

zhilizhili-ui 2016 web app啟動界面制作

CSS和Js一些筆記

NPM酷庫：numeral，格式化數字

javascript 數組排序（sort,冒泡）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

laravel5.5 + react完成簡單的CRUD

Create Post

Post

Update Post

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！