react+fetch+api接口渲染数据移动端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!--react的与dom相关的一些功能-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--将浏览器不支持的jsx语法转化为js语法-->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/style.css"/>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    var bus=$("#app")
    //大盒子
    class Warp extends React.Component{
        render(){
            return(
                <div className="warp">
                    <Header></Header>
                    <Main></Main>
                    <Footer></Footer>
                </div>
            )
        }
    }
   //头部
    class Header extends React.Component{
        render(){
            return(
                <div className="header">

                          <h1>豆瓣电影Top50</h1>

                </div>
            )
        }
    }
   //主体
    class Main extends React.Component{
        constructor(props){
            super(props)
            this.state={
                show:1
            }
        }
        render(){
            console.log(this.state.show)
            // 三元表达式
            return this.state.show==1?<Main1></Main1>:(this.state.show==2?<Main2></Main2>:<Main3></Main3>)
        }
        componentDidMount(){
            bus.on('test',(event,posn)=>{
                // console.log(posn)
                this.setState({
                    show:posn
                })
            })
        }

    }
    //内容
    class Main1 extends React.Component{
        constructor(props){
            super(props)
            this.state={
                arr:[]
            }
        }
        render(){
            return(
                <div className="m_1">
                    <ul>
                        {
                            // console.log(this.state)
                            this.state.arr.map((ele,index)=>{
                                return <li key={index}>
                                    <span><img src={ele.img} alt=""/></span>
                                    <span>

                                    {ele.name}
                                    </span>
                                    <span> {ele.fenshu}</span>
                                </li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        componentDidMount(){
            var url="http://localhost:3001/api/selectData"
  
            fetch(url).then((res)=>{
                    return res.json()
            }).then((res)=>{
                console.log(res.massage)
                this.setState({
                    arr:res.message
                })
            })
        }
    }
    class Main2 extends React.Component{
        render(){
            return(
                <div className="m_2">main2</div>
            )
        }
    }
    class Main3 extends React.Component{
        render(){
            return(
                <div className="m_3">main3</div>
            )
        }
    }
    //底部
    class Footer extends React.Component{
        constructor(porps){
            super(porps)
            this.state={
                show:0
            }
        }
        render(){
            return(
                <div className="footer">

                    <div className="f_1" onClick={()=> {
                       //tab切换
                        this.setState({
                            show:1
                        })
                    }}><img src="img/1_17.jpg" alt=""/></div>
                    <div className="f_2" onClick={()=> {
                        this.setState({
                            show:2
                        })
                    }}><img src="img/1_19.jpg" alt=""/></div>
                    <div className="f_3" onClick={()=> {
                        this.setState({
                            show:3
                        })
                    }}><img src="img/1_21.jpg" alt=""/></div>
                </div>
            )
        }
        componentDidUpdate(){
            bus.trigger('test',this.state.show)
        }


    }
    //渲染页面
    ReactDOM.render(
        <Warp/>,
        document.getElementById('app')
    );
</script>
</body>
</html>
react+fetch+api接口渲染数据移动端

猜你喜欢
