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 \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 [email protected] 
 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

laravel5.5 + react完成简单的CRUD

laravel5.5 + react完成简单的CRUD

1. 安装laravel5.5

1.1 创建项目

1.2 修改数据库配置

1.3 创建文章迁移表及模型

1.4 创建web路由和api路由

1.5 创建PostController

2. 安装ReactJS

3. 创建React组件文件

Create Post

Post

Update Post

4. 创建主视图文件

5. 编译&运行

你可能感兴趣的:(php,php7,curd,react.js,laravel)