您当前的位置:首页 > 网站建设 > React
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

api接口可用

51自学网 2020-03-12 18:06:50
  React
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的后台管理系统数据接口对接
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1