列表、详情从Api获取

Api列表：
详情：?id=5ac1a22011f48140d0002955

二、知识点

路由需要安装，并引用后才能用

路由的使用

api解析：axios ；安装并引用后才能用

生命周期函数

三、实战

src目录结构：

【Src】 │ App.css │ App.js │ ... ├─components │ Home.js │ Pcontent.js │ 模板.js ├─css │ basic.css │ index.css │ pcontent.css └─images 1.jpg 2.jpg 3.jpg

App.js

import React from 'react'; //import './App.css'; import { BrowserRouter as Router, Route } from 'react-router-dom'; //引入路由模块 import Home from './components/Home'; import Pcontent from './components/Pcontent'; 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 {Link} from 'react-router-dom'; import '../css/index.css'; import axios from 'axios'; //或写成：const axios = require('axios'); //import { thisExpression } from '@babel/types'; class Home extends Component{ constructor(props){ super(props); this.state={ list:[], domain:'' } } //获取Api接口的数据 getDataApi=()=>{ //拼装得到完整的Api接口链接 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(){ //调用函数得到api接口数据 this.getDataApi(); } render(){ return( <div> <header className="index_header"> <div className="hlist"> <img alt='热销榜' src={require('../images/rexiao.png')} /> <p>热销榜</p> </div> <div className="hlist"> <img alt='点过的菜' src={require('../images/caidan.png')} /> <p>点过的菜</p> </div> <div className="hlist"> <img alt='猜你喜欢' src={require('../images/sousuo.png')} /> <p>猜你喜欢</p> </div> </header> <div className="content"> { 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}> <div className="inner"> <Link to={`/Pcontent/${v._id}`}> <img alt={v.title} src=http://www.mamicode.com/{`${this.state.domain}${v.img_url}`} /> </Link> <p className="title">{v.title}</p> <p className="price">{v.price}元</p> </div> </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>

【Pcontent.js】

import React, { Component } from 'react'; import axios from 'axios'; import '../css/pcontent.css'; import '../css/basic.css'; import {Link} from 'react-router-dom'; class Pcontent extends Component { constructor(props){ super(props); this.state={ detail_list:[], domain:'' } } componentWillMount(){ //获取整个props查看数据结构 console.log(this.props) //根据数据结构找到传过来的_id console.log(this.props.match.params._id) //根据传过来的_id获取对应详情页面 var id=this.props.match.params._id; var api='?id='+ id; axios.get(api) .then((response)=>{ console.log(response); this.setState({ detail_list:response.data.result[0] }) }) .catch((error)=>{ console.log(error) }) } render() { return ( <div className='pcontent'> <div className="back"><Link to='/'>返回</Link></div> <div className="p_content"> <div className="p_info"> <img alt={this.state.detail_list.title} src=http://www.mamicode.com/{`${this.state.domain}${this.state.detail_list.img_url}`}/> <h2>{this.state.detail_list.title}</h2> <p className="price">{this.state.detail_list.price}元</p> </div> <div className="p_detial"> <h3> 商品详情 </h3> {/*html解析写法*/} <div className="p_content" dangerouslySetInnerHTML={{__html: this.state.detail_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;