步骤:
1. 发送Ajax请求
1.1 在组件的componentWillMount这个生命周期钩子中发送请求
1.2 发送ajax
XMLHttpRequest
jQuery
Fetch(不支持JSONP),但有个包可以fetch-jsonp在npm上找
2. 渲染
如果正在加载,显示spin
如果加载完毕,渲染电影列表
3. 点击不同类型,获取不同数据展示
3.1 在子组件通过componentWillReceiveProps(props){}钩子来接props变动的值
3.2 在路由的Route中,通过设置一个<Route path='/movie/:movieType' component={MovieList} />,:后面的就是这个key,可以通过props.match.params.movieType接收到
3.3 接收到值之后调用setState({ },()=>{ }), 赋予给私有属性,然后通过回调函数重新获取请求
1. 通过编程式导航this.props.history.push()
this.props.history.push(`movie/detail/${movieid}`)
2. 在占位的地方需要精确匹配
<Route path='/movie/:movieType' exact component={MovieList} />
<Route path='/movie/detail/:movieid' component={MovieDetail} />
3. 在MovieDetail.js中,用props接收传来的id
注意:
1. 在jsx中写js代码,需要用{}包起来
百度fetch第一篇文章
getMovieDetail(movieId) {
const url = `${MovieApi.movieApi}subject/${movieId}`
console.log(url)
fetchJsonp(url)
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
isLoading: false,
movieInfo: data
})
})
}
onClick={()=>{this.goBack}}
goBack(){
this.props.history.goBack()
}
1. 写node开发web服务,供我们自己的浏览器访问,并且还要设置允许我们自家浏览器跨域请求
2. 在node中使用一个第三方包request,发送请求给豆瓣服务器,拿到服务器数据
3. 我们node服务器,把数据返回给自己浏览器
详情看:http://www.expressjs.com.cn/starter/generator.html
express应用生成器
1. npm install express-generator -g
2. express myapp
3. cd myapp
npm install
4. set DEBUG=myapp & npm start
5. 然后就可以通过localhost:3000/ 访问了
生成之后装包
yarn add request --save
var request = require('request')
//跨域
app.all('/test', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
//加一个路由
app.get('/detail', (req, res) => {
const movieId = req.query.movieId
const url = `https://api.douban.com/v2/movie/subject/${movieId}`
request(url, (err, response, body) => {
// res.setHeader('Content-Type','application/json;charset=UTF-8')
// res.end(body)
res.send(body)
})
})
传值方记得要用?拼接数据,服务端用query接
const url = `http://localhost:3000/detail?movieId=${movieId}`
fetch(url).then(response=>response.json()).then(data=>{
console.log(data)
this.setState({
isLoading: false,
movieInfo: data
})
})
可以百度豆瓣api
in_theaters: `https://api.douban.com/v2/movie/in_theaters`
top250: `https://api.douban.com/v2/movie/top250`
coming_soon: `https://api.douban.com/v2/movie/coming_soon`
定义自己的私有属性或者继承父亲的
定义方法放到生命周期钩子上
import React, {Component} from 'react'
export default class MovieList extends Component{
constructor(){
super()
this.states ={
movieType: 'in_theaters',
isLoading: true,
movieList: []
}
}
componentWillMount(){
this.getMovieListByType()
}
getMovieListByType(){
}
render(){
return(
<div>
</div>
)
}
}
import React, {Component} from 'react'
import MovieApi from '../../../config'
import fetchJsonp from 'fetch-jsonp'
import {Spin, Alert, Rate} from 'antd'
import '../../static/css/movie.css'
export default class MovieList extends Component{
constructor(){
super()
this.state = {
movieType: 'in_theaters',
isLoading: true,
movieList: []
}
}
componentWillMount(){
this.getMovieListByType()
}
componentWillReceiveProps(props){
this.setState({
isLoading: true,
movieType: props.match.params.movieType
},()=>{
this.getMovieListByType()
})
}
getMovieListByType(){
const url = `${MovieApi.movieApi}${this.state.movieType}`
fetchJsonp(url).then(response=>response.json()).then(data=>{
this.setState({
isLoading: false,
movieList: data.subjects
})
}).catch(e => console.log(e))
}
render(){
if(this.state.isLoading){
return (
<Spin tip="Loading...">
<Alert
message="加载中..."
description="正在拼命的加载中...请稍等..."
type="info"
/>
</Spin>
)
}else{
return(
<div style={{display:'flex',flexWrap:'wrap',textAlign:'center', justifyContent:'space-between'}}>
{this.state.movieList.map((item,key)=>{
return <div key={key} style={{marginBottom: '16px'}} className='item'>
<img src={item.images.medium}/>
<h4>{item.title}</h4>
<h4>电影类型:{item.genres.join(',')}</h4>
<h4>上映年份:{item.year}</h4>
<div>评分:<Rate disabled defaultValue={item.rating.average/2} /></div>
</div>
})}
</div>
)
}
}
}
1. fetch-jsonp
发送jsonp请求
yarn add fetch-jsonp --save
手机扫一扫
移动阅读更方便
你可能感兴趣的文章