用豆瓣电影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

豆瓣项目(用react+webpack)的更多相关文章

  1. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  2. react +webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  3. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  4. 如何在react&webpack中引入图片?

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  5. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  6. 用React & Webpack构建前端新闻网页

    这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希 ...

  7. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  8. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  9. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  10. NodeJS + React + Webpack + Echarts

    最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1.  在react里封装echarts组件,并调用后端API. (参考的 ...

随机推荐

  1. 【剑指Offer】32、把数组排成最小的数

      题目描述:   输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323.   ...

  2. 将现有硬盘(分区)无损创建为RAID1

    背景 如果现在有一块硬盘(分区)正在使用,如果要设置成RAID1,并不需要将数据拷出,然后创建RAID1. 可以先将此硬盘设置成降级RAID1,然后添加新硬盘再激活RAID1即可,整个过程数据无损. ...

  3. Git 基础教程 之 远程仓库

    ①   注册GitHub账号 由于本地Git仓库和GitHub仓库之间的传输是SSH加密的,所以需要一点设置: a, 创建SSH Key         在用户主目录下,看是否有 .ssh 目录,若无 ...

  4. 【ABCD组】Scrum meeting 2

    前言 第2次会议在6月14日由组长在教9 405召开. 主要对下一步的工作进行说明安排,时长90min. 主要内容 经会议讨论,由于一些对知识掌握的原因,决定放弃java语言实现系统,改用c#完成此系 ...

  5. poj 3177&&3352 求边双联通分量,先求桥,然后求分量( 临界表代码)

    /*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h>//用容器写在3177这个题上会超内存,但 ...

  6. windows集成身份验证

    集成windows身份验证 这种验证方式里面也分为两种情况 NTLM验证 这种验证方式需要把用户的用户名和密码传送到服务端,服务端验证用户名和密码是否和服务器的此用户的密码一致.用户名用明码传送,但是 ...

  7. [bzoj1614][Usaco2007Jan]Telephone Lines 架设电话线_二分答案_最短路

    Telephone Lines bzoj-1614 Usaco-2007Jan 题目大意:给你一个n个点m条边的带边权无向图,求最短路.可以选取k条边免费. 注释:$1\le n\le 10^3$,$ ...

  8. 洛谷—— P2014 选课

    https://www.luogu.org/problem/show?pid=2014 题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课 ...

  9. Spring MVC-表单(Form)标签-文本框(Text Box)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  10. Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理

    1.Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理 2. 自定义注解: 使用@interfac ...