Как управлять маршрутизацией в laravel проекте с реакции. js? - PullRequest
Новая
       7

Как управлять маршрутизацией в laravel проекте с реакции. js?

0 голосов
/ 09 марта 2020

Я пытаюсь создать простое приложение crud для управления событиями с Laravel 5.5 и React. js Когда я пытаюсь добавить новое событие, я получаю эту ошибку: «Доступ к XMLHttpRequest на« * » 1002 *: 8000 / api / events 'от источника' http://127.0.0.1: 8000 'заблокировано политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: Нет' Access- Заголовок Control-Allow-Origin 'присутствует на запрошенном ресурсе. "Кроме того, когда я перезагружаю страницу, на которой должны быть показаны созданные события, она показывает ту же ошибку.

Вот веб-файл. php файл : 

<?php

Route::get('/', function () {
    return view('welcome');
});
Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Вот файл API. php Файл: 

<?php

use Illuminate\Http\Request;



Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});
Route::resource('events', 'EventController');

Вот код домашней страницы: 

<!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>Event Manager</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Dashboard</div>

                        <div class="card-body">
                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif

                            You are logged in!
                            <div id="crud-app"></div>
                            <script src="{{asset('js/app.js')}}" ></script>
                            <div id="example"></div>
                            <script src="{{asset('js/app.js')}}" ></script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

А вот и приложение . js код: 

require('./components/Example');
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';


import Master from './components/Master';
import CreateEvent from './components/CreateEvent';
import DisplayEvent from './components/DisplayEvent';
import UpdateEvent from './components/UpdateEvent';

render(
  <Router history={browserHistory}>
      <Route path="/" component={Master} >
        <Route path="/add-item" component={CreateEvent} />
        <Route path="/display-item" component={DisplayEvent} />
        <Route path="/edit/:id" component={UpdateEvent} />
      </Route>
    </Router>,
        document.getElementById('crud-app'));

Вот компонент CreateEvent: 

import React, {Component} from 'react';
import {browserHistory} from 'react-router';
import MyGlobleSetting from './MyGlobleSetting';


class CreateEvent extends Component {
  constructor(props){
    super(props);
    this.state = {eventTitle: '', eventDescription: ''};


    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);


  }
  handleChange1(e){
    this.setState({
      eventName: e.target.value
    })
  }
  handleChange2(e){
    this.setState({
      eventDescription: e.target.value
    })
  }
  handleSubmit(e){
    e.preventDefault();
    const events = {
      title: this.state.eventName,
      body: this.state.eventDescription
    }
    let uri = MyGlobleSetting.url + '/api/events';
    axios.post(uri, events).then((response) => {
      browserHistory.push('/display-item');
    });
  }


    render() {
      return (
      <div>
        <h1>Create Event</h1>
        <form onSubmit={this.handleSubmit}>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Event name:</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>Event description:</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 Event</button>
            </div>
        </form>
  </div>
      )
    }
}
export default CreateEvent;

Вот компонент DisplayEvent: 

import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';
class DisplayEvent extends Component {
  constructor(props) {
       super(props);
       this.state = {value: '', events: ''};
     }
     componentDidMount(){
       axios.get(MyGlobleSetting.url + '/api/events')
       .then(response => {
         this.setState({ events: response.data });
       })
       .catch(function (error) {
         console.log(error);
       })
     }
     tabRow(){
       if(this.state.events instanceof Array){
         return this.state.events.map(function(object, i){
             return ;

         })
       }
     }


  render(){
    return (
      <div>
        <h1>events</h1>


        <div className="row">
          <div className="col-md-10"></div>
          <div className="col-md-2">
            <Link to="/add-item">Create Event</Link>
          </div>
        </div><br />


        <table className="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Event Title</td>
                <td>Event Body</td>
                <td width="200px">Actions</td>
            </tr>
            </thead>
            <tbody>
              {this.tabRow()}
            </tbody>
        </table>
    </div>
    )
  }
}
export default DisplayEvent;

И, наконец, вот Мастер. 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://itsolutionstuff.com">ItSolutionStuff.com</a>
            </div>
            <ul className="nav navbar-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="add-item">Create Event</Link></li>
              <li><Link to="display-item">Event</Link></li>
            </ul>
          </div>
      </nav>
          <div>
              {this.props.children}
          </div>
      </div>
    )
  }
}
export default Master;
...