react learning demo routing, network rendering and data parsing html

import React, { Component } from 'react';

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

const axios = require('axios');

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            list:[],
            domain:'http://a.xxx.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;

/*
react解析html

    https://reactjs.org/docs/dom-elements.html
    

    <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> </div>
*/

import React, { Component } from 'react';

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

const axios = require('axios');

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


        thisin the Var api=
    RequestData (ID for the school), {
    }.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(){

        //id

        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}}> 
                               
                            </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;

/ * 

  REACT routing configurations: 
    1, find the official documentation https://reacttraining.com/react-router/web/example/basic 

    2, install install REACT-Router-CNPM dom --save 


    3, find the root component of the project is introduced REACT-Router-DOM 

       Import {BrowserRouter AS Router, the Route, Link} from "REACT-Router-DOM"; 

    . 4, copy the contents of the official website of the document root assembly which is modified (component loads to be introduced in advance) 


         <Router> 

                <Link to = "/"> Home </ Link> 

                <Link to = "/ News"> News </ Link> 

                <Link to = "/ product"> commodity </ Link> 


               <Route Exact path = "/" the Component = {Home } /> 
               <the Route path = "/ News" Component News {} = />     
               <= the Route path "   / Product "Component Product} = {/> 
         </ Router> 


         Exact strictly match


Dynamic routing react by value 

      1, the dynamic routing configuration 

          <the Route path = "/ Content /: AID" the Content Component = {} />    

      2, components which correspond to the acquired dynamic routing loading mass value 

            this.props.match.params 


      Jump : <= {Link to `/ Content / value.aid} {$`}> {value.title} </ Link> 

REACT GET values pass   


      1, obtaining this.props.location.search 


      

         
* / 

Import React, the Component} { from 'REACT' ; 

Import Router {BrowserRouter AS, the Route, from Link} "Router-DOM-REACT" ; 

Import from Home './components/Home' ; 

Import from Pcontent './components/Pcontent' ; 

Import './ assets / css / index.css'

class App extends Component {

  render() {
    return (

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

export default App;

@charset "UTF-. 8" ; 
body, div, UL, Li, OL, h1 of, H2, H3, H4, H5, H6, INPUT, TextArea, SELECT, P, DL, dt, dd, A, IMG, Button, form, Table, TH, TR, TD, tbody, Article This article was, aside, Details, figcaption, Figure, footer, header, HGroup, MENU, NAV, sectionTop { 
  margin: 0 ; 
  padding: 0 ;} 

HTML { 
  font -size: 62.5 % ;
   / * the root element is 10px; 16 * 62.5% = 10 default root element will parse the pc to 12px     * / } 

body { 
  font: 12px /1.5 'YaHei the Microsoft', 'Times New Roman', 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; }

/*详情*/

.back {
  height: 3.8rem;
  line-height: 3.8rem;
  width: 3.8rem;
  border-radius: 50%;
  background: #000;
  position: fixed;
  top: .5rem;
  left: .5rem;
  color: #fff; }
  .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; }

---

/*
react解析html

    https://reactjs.org/docs/dom-elements.html
    

    <div className="p_content"  dangerouslySetInnerHTML={{__html: this.state.list.content}}> </div>
*/

import React, { Component } from 'react';

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

const axios = require('axios');

class Pcontent extends 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(){

       
    // }

    componentDidMount(){

        //id

        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">                
                            {this.state.list.img_url?<img src={`${this.state.domain}${this.state.list.img_url}`} />:""} 

                            {/* <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}}> 
                               
                            </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>                                
                        <className = the Button "addcart"> Add to Cart </ button>            
                        
                        </ div>
                        
                    </footer>


            </div>
        );
    }
}

export default Pcontent;