Fatal编程技术网
  • php/
  • Php 表中的记录不显示在前端

Php 表中的记录不显示在前端

php reactjs laravel

Php 表中的记录不显示在前端,php,reactjs,laravel,Php,Reactjs,Laravel,我不熟悉Laravel和ReactJS，我正在尝试实现CRUD操作，我正在尝试显示表中的4行，但能够将记录插入表中，但无法读取。感谢您的帮助。 Laravel框架7.10.3 PHP7.4.5 作曲家版本1.10.6 Mysql 下面是代码的详细信息 DisplayProduct.js import React, {Component} from 'react'; import axios from 'axios'; import { Link } from 'react-router'; im

我不熟悉Laravel和ReactJS，我正在尝试实现CRUD操作，我正在尝试显示表中的4行，但能够将记录插入表中，但无法读取。感谢您的帮助。 Laravel框架7.10.3 PHP7.4.5 作曲家版本1.10.6 Mysql 下面是代码的详细信息

DisplayProduct.js

import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';

class DisplayProduct extends Component {
  constructor(props) {
       super(props);
       this.state = {value: '', products: ''};
     }
     componentDidMount(){
       axios.get(MyGlobleSetting.url + '/api/products')
       .then(response => {
         this.setState({ products: response.data });
        console.log(response.data);
        console.log(this.state.products);
       })
       .catch(function (error) {
         console.log(error);
       })
     }

     tabRow(){
       if(this.state.products instanceof Array){
         return this.state.products.map(function(object, i){
            return <TableRow obj={object} key={i} />;
         })
       }
     }

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


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


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

import React，{Component}来自'React'；
从“axios”导入axios；
从“反应路由器”导入{Link}；
从“./TableRow”导入TableRow；
从“/MyGlobleSetting”导入MyGlobleSetting；
类DisplayProduct扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''，products:''}；
}
componentDidMount（）{
get（MyGlobleSetting.url+'/api/products'）
。然后（响应=>{
this.setState（{products:response.data}）；
console.log（response.data）；
console.log（this.state.products）；
})
.catch（函数（错误）{
console.log（错误）；
})
}
塔布罗（）{
if（this.state.products instanceof数组）{
返回this.state.products.map（函数（对象，i）{
返回；
})
}
}
render（）{
返回(
产品
创造产品


身份证件
产品名称
产品主体
行动
{this.tabRow（）}
)
}
}
出口默认显示产品；
TableRow.js

import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import axios from 'axios';
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/products/${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.body}
          </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;

import React，{Component}来自'React'；
从“反应路由器”导入{Link，browserHistory}；
从“axios”导入axios；
从“/MyGlobleSetting”导入MyGlobleSetting；
类TableRow扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
event.preventDefault（）；
让uri=MyGlobleSetting.url+`/api/products/${this.props.obj.id}`；
删除（uri）；
browserHistory.push（'/display item'）；
}
render（）{
返回(
{this.props.obj.id}
{this.props.obj.title}
{this.props.obj.body}
编辑
);
}
}
导出默认表行；
欢迎使用.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 ReactJS CRUD Example</title>
         <link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id='crud-app'></div>
       <script src="{{mix('js/app.js')}}" ></script>
    </body>
</html>


Laravel反应JS积垢示例
ProductController.php

<?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;


class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::all();
        return response()->json($products);
    }


    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $product = new Product([
          'title' => $request->get('title'),
          'body' => $request->get('body')
        ]);
        $product->save();


        return response()->json('Product Added Successfully.');
    }


    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $product = Product::find($id);
        return response()->json($product);
    }


    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $product->title = $request->get('title');
        $product->body = $request->get('body');
        $product->save();


        return response()->json('Product Updated Successfully.');
    }


    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
      $product = Product::find($id);
      $product->delete();


      return response()->json('Product Deleted Successfully.');
    }
}
?>
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="/">Products Maintenance</a>
            </div>
            <ul className="nav navbar-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="add-item">Create Product</Link></li>
              <li><Link to="display-item">Products</Link></li>
            </ul>
          </div>
      </nav>
          <div>
              {this.props.children}
          </div>
      </div>
    )
  }
}
export default Master

import React，{Component}来自'React'；
从“react Router”导入{Router，Route，Link}；
类主控扩展组件{
render（）{
返回(

    

  • 家
    • 

  • 创造产品
    • 

  • 产品
    • 


{this.props.children}
)
}
}
导出默认主机
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 CreateProduct from './components/CreateProduct';
import DisplayProduct from './components/DisplayProduct';
import UpdateProduct from './components/UpdateProduct';


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

require（'./bootstrap'）；
从“React”导入React；
从'react dom'导入{render}；
从“react Router”导入{Router，Route，browserHistory}；
从“./components/Master”导入主控形状；
从“./components/CreateProduct”导入CreateProduct；
从“./components/DisplayProduct”导入DisplayProduct；
从“./components/UpdateProduct”导入UpdateProduct；
渲染(
,
document.getElementById（'crud-app'）；
更新代码

在主js文件中，假设
App.js
组件中已经为该链接设置了路由器

<li><Link to="display-item">Products</Link></li>
我在代码中看到，在渲染方法中没有用于渲染的
，您需要至少有一个。另外，我认为您在渲染方法中包含了
document.getElement….
，这可能是导致问题的原因。

谢谢Akhtar，我尝试了您的更改，但没有成功您的数据没有显示在表中？这是您的问题吗？不，当我单击要显示数据的产品链接时，数据在表中，但没有显示在屏幕上？你是说编辑链接吗？Akhtar，我在第一篇文章中也包含了app.js文件 
<Route path="/display-item" exact component={DisplayProduct} />

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

class App extends Component {
render () {
    return (
        <BrowserRouter>
            <div>
                <Header />
                <Switch>
                    <Route path="/student" exact component={Student} />
                    <Route path="/classes" exact component={Classes} />
                </Switch>
            </div>
        </BrowserRouter>
    )
}
}

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