laravel5.5 + react完成简单的CRUD

2501207950 发布于2019-06-28 18:19 / 3175人阅读

摘要：完成简单的在这篇文章中，我想和大家分享如何在框架中使用来创建应用程序。在这个例子中，您可以学习如何为应用程序构建设置，我还使用请求，获取请求，放入请求和删除请求来插入更新删除应用程序。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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