豆瓣项目（用react+webpack）

用豆瓣电影api的项目

电影列表组件渲染

步骤：
	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

百度fetch第一篇文章

fetchjsonp

    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

可以百度豆瓣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>
        )
    }
}

code

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