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-reactvim .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会默认创建以下方法
- index()
- store()
- edit()
- update()
- 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 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
) }}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 Post
Create Post ID Post Title Post Content Actions {this.tabRow()}
) }}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 ( {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} ); }}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 ) }}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 即可
效果图
主要参考资料
本教程翻译于
github地址
原文链接