react+axios+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/babel-standalone@6.15.0/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>
)
}
//使用axios
componentDidMount(){
var url="http://localhost:3001/api/selectData"
axios.get(url).then((res)=>{
// console.log(res.data.message)
this.setState({
arr:res.data.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>