实现了两个页面，
第一个是菜品列表，也就是主页面，
第二个是菜品详情页面。
这两个页面都是通过api获取数据，然后渲染的。
第一个页面会传值（菜品的id）给第二个页面。

具体的一些技术细节，像是axios，解析html，
还有一些写这个项目的步骤，需要再看一遍视频再做总结。

这个项目的很多东西，像是css，还有组件里面的html,都是复制粘贴的，
我想把这个项目自己按照步骤写一遍，然后丑一点就丑一点，主要是功能可以用就好。

App.js

import './assets/css/App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from './components/Home';
import Pcontent from './components/Pcontent';
import './assets/css/index.css';

function App() {
  return (
    
     <Router>
      <div>
        <Route exact path='/' component={Home}/>
        {/* 动态路由实现传值 */}
        <Route  path='/pcontent/:id' component={Pcontent}/>
      </div>
    </Router>
  
  );
}

export default App;

Home.js

import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";

const axios = require('axios');

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[],
            domain:'http://a.itying.com/',
         }
    }
    requestData=()=>{
        var api=this.state.domain+'api/productlist';

        axios.get(api)
            .then((response)=> { 
                console.log(response);
               this.setState({
                   list:response.data.result,
               })
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    componentDidMount(){
        this.requestData();
    }
    render() { 
        return ( 
            <div className="home">
                    <div className="list">
                        {
                            this.state.list.map((value,key)=>{
                                return (
                                    <div className="item" key={key}>
                            
                                        <h3 className="item_cate">{value.title}</h3>
                                        
                                        <ul className="item_list">
                                            {
                                                value.list.map((v,k)=>{
                                                    return (
                                                    <li key={k}>	
                                                        <Link to={`/pcontent/${v._id}`}>
                                                            <div className="inner">
                                                                <img src={`${this.state.domain}${v.img_url}`} />
                                                                <p className="title">{v.title}</p>						
                                                                <p className="price">{v.price}元</p>
                                                            </div>
                                                        </Link>
                                                    </li> 
                                                    )
                                                })
                                            }     
                                        </ul>                            
                                    </div>
                                )
                            })
                        } 
                    </div>
            </div>
         );
    }
}
 
export default Home;

Pcontent.js

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

const axios = require('axios');

class Pcontent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[],
            domain:'http://a.itying.com/',
         }
    }

    requestData=(id)=>{
        var api=this.state.domain+'api/productcontent?id='+id;

        axios.get(api)
            .then((response)=> { 
                console.log(response);
               this.setState({
                   list:response.data.result[0],
               })
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    componentWillMount(){
        console.log(this.props.match.params.id);
        let id = this.props.match.params.id;
        this.requestData(id);
    }

   

    render() { 
        return ( 
            <div className='pcontent'>
                 <div className="back">
                     <Link to='/'>返回</Link>
                </div>
		
                    <div className="p_content">		
                        <div className="p_info">				
                            <img src={`${this.state.domain}${this.state.list.img_url}`} />			
                            <h2>{this.state.list.title}</h2>				
                            <p className="price">{this.state.list.price}</p>
                        </div>
                        <div className="p_detial">
                            <h3>
                                商品详情					
                            </h3>
                            <div className="p_content" dangerouslySetInnerHTML={{__html:this.state.list.content}}> 
                            {/* 解析html代码 */}
                            </div>
                        </div>
                    </div>
                    
                    
                    <footer className="pfooter">
                        
                        <div className="cart">				
                            <strong>数量:</strong>
                            <div className="cart_num">
                            <div className="input_left">-</div>
                            <div className="input_center">
                                <input type="text"  readOnly="readonly" value="1" name="num" id="num" />
                            </div>
                            <div className="input_right">+</div>				      
                            </div>								
                        
                        </div>
                        
                        <button className="addcart">加入购物车</button>			
                    </footer>
                    
            </div>
         );
    }
}
 
export default Pcontent;

index.css

@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%;
  /* 根元素是10px;     16*62.5%=10  默认在pc端根元素会解析成12px    */ }

body {
  font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
  color: #555;
  background-color: #F7F7F7; }

em, i {
  font-style: normal; }

ul, li {
  list-style-type: none; }

strong {
  font-weight: normal; }

.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both; }

/*# sourceMappingURL=basic.css.map */


/*列表css*/

/*列表*/
.item .item_cate {
  text-align: center;
  padding: .5rem; }
.item .item_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px .5rem; }
  .item .item_list li {
    width: 33.3%;
    padding: .5rem;
    box-sizing: border-box; }


    .item .item_list li a{

      text-decoration: none;

      color:#555;
    }

    .item .item_list li .inner {
      background: #fff;
      width: 100%;
      border-radius: .5rem;
      overflow: hidden; }
      .item .item_list li .inner img {
        width: 100%; }
      .item .item_list li .inner p {
        padding: .2rem .5rem; }
      .item .item_list li .inner .title {
        font-weight: bold; }



.price{
  color:red;
}

.back {
  height: 3.8rem;
  line-height: 3.8rem;
  width: 3.8rem;
  border-radius: 50%;
  background: #000;
  position: fixed;
  top: .5rem;
  left: .5rem;
  }

.back a{
  color: #fff; 
  text-decoration: none;
}

  .back:before {
    content: "";
    display: block;
    width: .8rem;
    height: .8rem;
    border-left: .2rem solid #fff;
    border-bottom: .2rem solid #fff;
    float: left;
    position: relative;
    top: 1.3rem;
    left: .6rem;
    transform: rotate(45deg);
    margin-right: .4rem; }

.p_content .p_info {
  background: #fff; }
  .p_content .p_info img {
    width: 100%;
    height: 18rem; }
  .p_content .p_info h2 {
    padding: .2rem .5rem; }
  .p_content .p_info .price {
    padding: .2rem .5rem;
    color: red; }
.p_content .p_detial {
  background: #fff;
  margin-top: 1rem; }
  .p_content .p_detial h3 {
    padding: .5rem; }
  .p_content .p_detial .p_content {
    padding: 1rem; }
    .p_content .p_detial .p_content img {
      max-width: 100%;
      display: block;
      margin: 0 auto; }
    .p_content .p_detial .p_content * {
      line-height: 1.5;
      color: #666; }

/*详情*/
.pfooter {
  position: fixed;
  bottom: 0px;
  height: 4.4rem;
  line-height: 4.4rem;
  background: #fff;
  left: 0px;
  width: 100%;
  border-top: 1px solid #eee; }
  .pfooter .cart {
    float: left;
    display: flex; }
    .pfooter .cart strong {
      flex: 1;
      font-size: 1.6rem;
      padding: 0rem .5rem; }
    .pfooter .cart .cart_num {
      width: 10rem;
      display: flex;
      margin-top: .8rem; }
      .pfooter .cart .cart_num .input_left, .pfooter .cart .cart_num .input_right {
        flex: 1;
        width: 2.8rem;
        height: 2.8rem;
        line-height: 2.8rem;
        text-align: center;
        color: red;
        border: 1px solid #eee;
        font-size: 2.4rem; }
      .pfooter .cart .cart_num .input_center {
        flex: 1; }
        .pfooter .cart .cart_num .input_center input {
          width: 2rem;
          text-align: center;
          width: 100%;
          height: 2.8rem;
          border: none;
          border-top: 1px solid #eee;
          border-bottom: 1px solid #eee;
          float: left; }
  .pfooter .addcart {
    float: right;
    background: red;
    color: #fff;
    height: 3rem;
    border: none;
    padding: 0 .5rem;
    border-radius: .5rem;
    margin-top: .8rem;
    margin-right: .5rem; }

/*# sourceMappingURL=pcontent.css.map */