import React from 'react'; import logo from './logo.svg'; import './App.css';
import ReactDOM from 'react-dom';
/* eslint-disable no-undef */
//路由配置 //import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from 'react-router'; import { BrowserRouter as Router, Link } from 'react-router-dom'; import {BrowserRouter, Route} from 'react-router-dom'
// axios配置 const axios = require('axios');
class Home extends React.Component { constructor(props) { super(props); this.state = { list: [], //创建数组用来保存获取的接口数据 urls: "http://a.itying.com/" //这里创建urls保存接口的路径,后面img标签调用图片用到 } }
// 获取数据方法函数 getApiData = () => { var api = this.state.urls + "api/productlist"; //拼接api地址
axios.get(api) .then(res => { console.log(res.data.result); this.setState({ list: res.data.result //获取的数据保存到list数组 }) }) .catch(err => { console.error(err); }) } // 生命周期函数---渲染后调用 componentDidMount() { this.getApiData(); } render() { return ( <div className="App"> <BrowserRouter> <div className="item"> { //一级渲染 this.state.list.map((item, index) => { return ( <div className="list" key={index}> <h5>{item.title}{item.pid}</h5>
<ul>
{ // 二级渲染 item.list.map((lis, index) => { return ( <li key={index}> <Link to={`/Dateils/${lis._id}`}> <div> </div> <p>{lis.title}</p> <p style={{color:"red"}}>{lis.price}元</p> </Link> </li> ) }) }
</ul>
</div> ) }) } </div> </BrowserRouter> </div> ) } }
export default Home;
下载地址: axios获取数据接口 基于antd的后台管理系统数据接口对接 |