内容简介: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
<?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('post', 'PostController');
1.5 创建PostController
php artisan make:controller PostController --resource
--resource
会默认创建以下方法
- index()
- store()
- edit()
- update()
- 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://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 ( <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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。