作者

本次项目是基于Laravel5.7版本集成ElementUI-react,目前网上并没有相关教程,写出此篇文章,仅供大家参考。

一、创建项目及后台接口搭建

1、终端执行命令:

laravel new laravel-react

2、修改数据库配置 创建数据库并修改配置文件

cd laravel-react

vim .env

3、创建迁移文件及模型

php artisan make:model Article -m

此命令会创建好文章模型和文章表的迁移,迁移文件在database文件夹中查看。

4、修改迁移文件

public function up() { 
    Schema::create('articles', function (Blueprint $table) { 
        $table->increments('id'); 
        $table->string('title'); 
        $table->text('content'); 
        $table->timestamps(); 
    }); 
}

5、执行迁移

php artisan migrate

6、模型定义白名单

protected $fillable = ['title', 'content'];

7、创建接口路由 在routes/api.php文件中写入接口路由

$this->resource('articles', 'ArticleController');

8、创建控制器和方法

php artisan make:controller ArticleController --r

9、接下来就可以去写完成各个接口的增删改查,此处省略,自行完成!

二、安装Element-react

1、修改前端预置,安装react包文件

php artisan preset react
npm install   #注意跑这个命令时不要加C

跑完此命令,你会发现resources/js/components文件夹中多了一个Example.js文件, 打开后,如果编辑器代码报红,请调整为react语法即可。

2、安装react路由包

cnpm install react-router

3、安装Element-react前端框架

cnpm i element-react --save

#主题
cnpm install element-theme-default --save

4、在resources/js/app.js文件中写入如下代码:

require('./bootstrap');

import React from 'react';
import 'element-theme-default';
import { Router, Route, browserHistory } from 'react-router';

5、修改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.7 ReactJS CRUD Example</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="example"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>

6、测试:终端执行命令

npm run watch

php artisan serve

刷新浏览器,你会看到如下界面:

7、修改Example.js文件代码如下:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'element-react';

export default class Example extends Component {
    render() {
        return (
            <div className="block">
                <span className="wrapper">
                  <Button type="success">成功按钮</Button>
                  <Button type="warning">警告按钮</Button>
                  <Button type="danger">危险按钮</Button>
                  <Button type="info">信息按钮</Button>
                </span>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

测试:刷新浏览器,你会看到如下界面:

至此,ElementUI-react集成完毕。剩下的就是CURD,可参考下面的文档自行完成。 后期还会继续完善!

参考文献:https://elemefe.github.io/element-react/#/zh-CN/quick-start

转载请注明,来自https://itfun.tv/news/118