Laravel5.5 + react 完成简单的 CRUD | Laravel China 社区
Laravel
话题列表
社区 Wiki
优质外文
招聘求职
Laravel 实战教程
社区文档
登录
注册
Laravel
首页
Laravel
Go
PHP
Vue.js
Python
Java
MySQL
Rust
LK
Elasticsearch
F2E 前端
Server
程序员
Database
DevTools
Computer Science
手机开发
AdonisJS
社区
Wiki
教程
Laravel 实战教程首页
《L01 Laravel 教程 - Web 开发实战入门》
《L02 Laravel 教程 - Web 开发实战进阶》
《L03 Laravel 教程 - 实战构架 API 服务器》
《L04 Laravel 教程 - 微信小程序从零到发布》
《L05 Laravel 教程 - 电商实战》
《L06 Laravel 教程 - 电商进阶》
《LX1 Laravel / PHP 扩展包视频教程》
《LX2 PHP 扩展包实战教程 - 从入门到发布》
《L07 Laravel 教程 - Laravel TDD 测试实战》
《LX3 Laravel 性能优化入门》
《LX4 Laravel / PHP 五分钟视频》
文档
社区文档首页
《Laravel 中文文档》
《Laravel 速查表》
《PHP 代码简洁之道》
《Laravel 编码技巧》
《Dcat Admin 中文文档》
《Laravel Nova 中文文档》
《Lumen 中文文档》
《Dingo API 中文文档》
《 Laravel 项目开发规范》
《构建 Laravel 开发环境》
登录
注册
微信登录
Laravel5.5 + react 完成简单的 CRUD
16
iMax 的个人博客
7671
创建于 4年前
更新于 4年前
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
这样就创建好了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
<?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://learnku.com/docs/laravel/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 即可
效果图
主要参考资料 Laravel 5.5 ReactJS Tutorial
本教程翻译于 Laravel 5 - Simple CRUD Application Using ReactJS
github地址 https://github.com/pandoraxm/laravel-react...
原文链接 https://www.bear777.com/blog/laravel5-5-re...
本作品采用《CC 协议》，转载必须注明作者和本文链接
本帖由 Summer
于 4年前 加精
举报
iMax
87 声望
暂无个人描述~
16 人点赞
《L05 电商实战》
从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
推荐文章：
更多推荐...
分享创造
如何找到你的第一份远程工作与海外外包-远程工作篇(放了个TS全栈教学的广告,不喜欢立删...)
33
21
1个月前
翻译
如何在 Laravel 中创建一个简单的事件流？
19
12
3个月前
博客
我是如何把网站图片cdn流量成本压到全网最低(之一)的
32
28
3个月前
博客
🎈 Slow Admin - 使用Laravel和Amis快速构建你的后台
25
35
3个月前
博客
用Go实现支持多种协议的抓包工具——Shermie-Proxy
22
33
5个月前
分享创造
大佬的收藏夹
75
21
5个月前
讨论数量: 9
排序：
时间
投票
iMax
87 声望
消灭O回复:blush: :cat: :sweat_smile:
4年前
评论
评论
举报
Sebastian
课程读者
33 声望
感谢分享，回头学习 Laravel + React 正好用得上
4年前
评论
评论
举报
iMax
87 声望
@AnnEason 我也看的歪果仁的教程。社区里面laravel + vue 的教程比较多。
react的太少，所以就照着撸了一遍:blush: :blush: :blush:
4年前
评论
评论
举报
zcold
课程读者
31 声望
请问laravel路由和react路由是怎么处理的呢，比如去/articles，怎么才能走react的路由，而不走laravel？
4年前
评论
评论
举报
a1538304190
5 声望
请问下这个的webpack.config.js怎么做修改
我想局域网访问,百度了一下要改这个文件 但是我发现现在目录中的这个文件并不是那种配置文件
谢谢
4年前
评论
评论
举报
iMax
87 声望
@aways react我也不是很懂的说，如果想到达到你说的那种效果的话，可能要做前后端分离才能实现。其实还是要走laravel路由的，只是你改成api的方式调用而已。@a1538304190 只有webpack.mix.js这个文件，具体什么问题最好能截图，贴下错误信息。
4年前
评论
评论
举报
a1538304190
5 声望
@iMax 感谢回复
问题已经解决 是artisan serve的默认配置的原因
4年前
评论
评论
举报
小李世界
Laravel 8.x 译者
1.8k 声望
Doge 先锋 @ dogeow.com
@aways 我现在是用以下，不知道时间这么久了你有用什么好点的方法？
Route::get('{path}', function () {
return view('app');
})->where('path', '(.*)');
3年前
评论
评论
举报
jimmy1993
0 声望
按照步骤跑 php artisan serve
访问http://127.0.0.1:8000是空白的，什么原因啊？
3年前
评论
评论
举报
讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
<a href="javascript:;" class="mr-2 ui popover text-mute" data-html="黏贴或拖拽图片至输入框内皆可上传图片">
<a href="javascript:;" class="mr-2 ui popover text-mute hide-on-mobile" data-html="支持除了 H1~H6 以外的GitHub 兼容 Markdown">
支持 MD
帮助
关注本文
评论
iMax
未填写
文章
粉丝
19
喜欢
86
收藏
26
排名：162
访问：5.9 万
关注
私信
所有博文
阅读模式
文章归档
3 篇
2020 年 5 月
1 篇
2018 年 3 月
5 篇
2018 年 1 月
最新文章
最受欢迎
2年前
spring-boot 中使用 FastDFS
2年前
Laravel 使用 FastDFS 上传图片
2年前
DFS 避坑手记 （docker 搭建 fastDFS 教程 / 在 CentOS 上搭建 FastDFS+nginx）
4年前
使用 Tinker 来调试 Laravel 应用程序的数据以及使用 Tinker 一些总结
4年前
使用 vue-axios 和 vue-resource 解决 vue 中调用网易云接口跨域的问题
35
Laravel 中使用 Markdown 及语法高亮
16
Laravel5.5 + react 完成简单的 CRUD
16
Laravel 中使用 WangEditor 及多图上传
10
使用 Tinker 来调试 Laravel 应用程序的数据以及使用 Tinker 一些总结
Laravel 中使用 WangEditor 及多图上传 (下篇)
社区赞助商
成为赞助商
社区赞助商
成为赞助商
关于 LearnKu
LearnKu 是终身编程者的修道场
做最专业、严肃的技术论坛
LearnKu 诞生的故事
资源推荐
《社区使用指南》
《文档撰写指南》
《LearnKu 社区规范》
《提问的智慧》
服务提供商
其他信息
成为版主
所有测验
联系站长（反馈建议）
粤ICP备18099781号-6
粤公网安备 44030502004330号
违法和不良信息举报
由 Summer 设计和编码 ❤
请登录
提交
忘记密码?
or
注册
第三方账号登录
微信登录
GitHub 登录
内容举报
匿名举报，为防止滥用，仅管理员可见举报者。
我要举报该，理由是：
垃圾广告：恶意灌水、广告、推广等内容
无意义内容：测试、灌水、文不对题、消极内容、文章品质太差等
违规内容：色情、暴利、血腥、敏感信息等
不友善内容：人身攻击、挑衅辱骂、恶意行为
科学上网：翻墙、VPN、Shadowsocks，政策风险，会被关站！
不懂提问：提问太随意，需要再做一遍《提问的智慧》测验
随意提问：提问没有发布在社区问答分类下
排版混乱：没有合理使用 Markdown 编写文章，未使用代码高亮
内容结构混乱：逻辑不清晰，内容混乱，难以阅读
标题随意：标题党、标题不释义
尊重版权：分享付费课程、破解软件（付费），侵犯作者劳动成果
其他理由：请补充说明
举报
取消