16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、动态路由传值 【基础项目】

一、页面

二、react-router4.x 路由配置

App.js

import React from "react";

import { BrowserRouter as Router, Route } from "react-router-dom";


import Home from "./components2/Home.js";
import Pcontent from "./components2/Pcontent.js";

import "./assets2/css/basic.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact component={Home}></Route>
          <Route path="/pcontent/:id" component={Pcontent}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

Home.js

import React, { Component } from "react";

import { Link } from "react-router-dom";

import axios from "axios";


import "../assets2/css/index.css";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      api:"http://a.itying.com/"
    };
  }



  render() {
    return (
      <div className="home">
              <header class="index_header">
      <div class="hlist">
        <img src={require("../assets2/images/rexiao.png")} alt=""  />
        <p>热销榜</p>
      </div>
      <div class="hlist">
        <img src={require("../assets2/images/caidan.png")} alt=""  />
        <p>点过的菜</p>
      </div>
      <div class="hlist">
        <img src={require("../assets2/images/sousuo.png")} alt=""  />
        <p>搜你喜欢</p>
      </div>
    </header>

    <aside class="left_cate" id="left_cate">
      <ul>
          {
             this.state.list.map((item, index) =>{
	               return (
	                 <li key={index} >{item.title}</li>
	               )
             })
           }

      </ul>
      <div id="nav_cate" class="nav_cate">
        <img src={require("../assets2/images/nav.png")} alt="" />
        <p>菜单</p>
      </div>
    </aside>

        <div className="content">
          {this.state.list.map((item, index) => {
            return (
              <div className="item" key={index}>
                <h3 className="item_cate">{item.title}</h3>
                <ul className="item_list">
                  {item.list.map((food, index2) => {
                    return (
                      <li key={index2}>
                        <div className="inner">
                          <Link to={`/pcontent/${food._id}`}>
                            <img src={`${this.state.api}${food.img_url}`}  alt=""/>
                            <p className="title">{food.title}</p>
                            <p className="price">¥{food.price}</p>
                          </Link>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>

        <div class="bg" id="bg"></div>


<div id="footer_cart" class="footer_cart">
  <Link to="/cart">
    <img src={require("../assets2/images/cart.png")} alt="" />
    <p>购物车</p>
  </Link>

</div>
      </div>
    );
  }
}

export default Home;

三、react-router4.x 请求菜品和菜品分类数据

Home.js

 //首页菜品Api
import axios from "axios";


 class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      api:"http://a.itying.com/"
    };
  }

  requestData = () => {
    var api = this.state.api + "api/productlist";
    axios
      .get(api)
      .then((response) => {
        // handle success
        // console.log(response);

        this.setState({
          list: response.data.result,
        });
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  };

  componentDidMount() {
    this.requestData();
  }

四、react-router4.x 循环渲染二维数组

Home.js

<div className="content">
   {this.state.list.map((item, index) => {
     return (
       <div className="item" key={index}>
         <h3 className="item_cate">{item.title}</h3>
         <ul className="item_list">
           {item.list.map((food, index2) => {
             return (
               <li key={index2}>
                 <div className="inner">
                   <Link to={`/pcontent/${food._id}`}>
                           
                     <img src={`${this.state.api}${food.img_url}`}  alt=""/>
                     <p className="title">{food.title}</p>
                     <p className="price">¥{food.price}</p>
                   </Link>
                 </div>
               </li>
             );
           })}
         </ul>
       </div>
     );
   })}
</div>

五、react-router4.x跳转到菜品详情传值

App.js

<Route path="/pcontent/:id" component={Pcontent}></Route>

Home.js

<Link to={`/pcontent/${food._id}`}>
......
</Link>

Pcontent.js

componentDidMount() {
    var id = this.props.match.params.id;
    this.requestData(id);
}