react - 豆瓣電影案例

項目中使用的技術(shù)點

• 1 ant-design 組件庫
• 2 react-router-dom 路由
• 3 fetch API，配合Promise規(guī)范
• 4 跨域獲取數(shù)據(jù)

ant-design - UI組件庫

• antd
• 說明：借助 Ant Design 組件庫快速搭建頁面
• 安裝：npm i -S antd

基本使用

• 注意：該步驟中只引入了一個組件，但卻引入了整個ant包和css樣式
• 推薦：按需加載，即用到哪個組件就只把該組件的樣式導(dǎo)入

// 基礎(chǔ)：導(dǎo)入 react 和 react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 1. 導(dǎo)入 antd 組件
import { DatePicker } from 'antd'

// 2. 導(dǎo)入 樣式
import 'antd/dist/antd.css'

// 3. 使用 日期選擇 組件
ReactDOM.render(<DatePicker />,
    document.getElementById('app'))

按需加載 - 推薦使用方式

• 1 安裝：npm i -D babel-plugin-import
• 2 配置.babelrc
• 說明：只需要導(dǎo)入我們使用的組件即可，不需要再單獨的導(dǎo)入樣式

import React from 'react'
import ReactDOM from 'react-dom'

// 1. 導(dǎo)入 antd 組件
import { DatePicker } from 'antd'

// 2. 使用 日期選擇 組件
ReactDOM.render(<DatePicker />, document.getElementById('app'))

// ---

// .babelrc 配置如下：
"plugins": [
    [ "import", { "libraryName": "antd", "style": "css" }]
]

react-router

• react router 官網(wǎng)
• react router github
• 安裝：npm i -S react-router-dom

基本概念說明

• Router組件本身只是一個容器，真正的路由要通過Route組件定義
• [圖片上傳失敗...(image-8d092d-1521043307374)]

使用步驟

• 1 導(dǎo)入路由組件
• 2 使用 <Router></Router> 作為根容器，包裹整個應(yīng)用（JSX）
  • 在整個應(yīng)用程序中，只需要使用一次
• 3 使用 <Link to="/movie"></Link> 作為鏈接地址，并指定to屬性
• 4 使用 <Route path="/" compoent={Movie}></Route> 展示路由內(nèi)容

// 1 導(dǎo)入組件
import {
  HashRouter as Router,
  Link, Route
} from 'react-router-dom'

// 2 使用 <Router>
<Router>

    // 3 設(shè)置 Link
    <Menu.Item key="1"><Link to="/">首頁</Link></Menu.Item>
    <Menu.Item key="2"><Link to="/movie">電影</Link></Menu.Item>
    <Menu.Item key="3"><Link to="/about">關(guān)于</Link></Menu.Item>

    // 4 設(shè)置 Route
    // exact 表示：絕對匹配（完全匹配，只匹配：/）
    <Route exact path="/" component={HomeContainer}></Route>
    <Route path="/movie" component={MovieContainer}></Route>
    <Route path="/about" component={AboutContainer}></Route>

</Router>

注意點

• <Router></Router>：作為整個組件的根元素，是路由容器，只能有一個唯一的子元素
• <Link></Link>：類似于vue中的<router-link></router-link>標簽，to 屬性指定路由地址
• <Route></Route>：類似于vue中的<router-view></router-view>，指定路由內(nèi)容（組件）展示位置

路由參數(shù)

• 配置：通過Route中的path屬性來配置路由參數(shù)
• 獲?。?code>this.props.match.params 獲取

// 配置路由參數(shù)
<Route path="/movie/:movieType"></Route>

// 獲取路由參數(shù)
const type = this.props.match.params.movieType

路由跳轉(zhuǎn)

• react router - history
• history.push() 方法用于在JS中實現(xiàn)頁面跳轉(zhuǎn)
• history.go(-1) 用來實現(xiàn)頁面的前進（1）和后退(-1)

this.props.history.push('/movie/movieDetail/' + movieId)

fetch

• 作用：Fetch 是一個現(xiàn)代的概念, 等同于 XMLHttpRequest。它提供了許多與XMLHttpRequest相同的功能，但被設(shè)計成更具可擴展性和高效性。
• fetch() 方法返回一個Promise對象

fetch 基本使用

• fetch Response
• fetch 介紹
• Javascript 中的神器——Promise

/*
  通過fetch請求回來的數(shù)據(jù)，是一個Promise對象.
  調(diào)用then()方法，通過參數(shù)response，獲取到響應(yīng)對象
  調(diào)用 response.json() 方法，解析服務(wù)器響應(yīng)數(shù)據(jù)
  再次調(diào)用then()方法，通過參數(shù)data，就獲取到數(shù)據(jù)了
*/
fetch('/api/movie/' + this.state.movieType)
  // response.json() 讀取response對象，并返回一個被解析為JSON格式的promise對象
  .then((response) => response.json())
  // 通過 data 獲取到數(shù)據(jù)
  .then((data) => {
    console.log(data);
    this.setState({
      movieList: data.subjects,
      loaing: false
    })
  })

跨域獲取數(shù)據(jù)的三種常用方式

• 1 JSONP
• 2 代理
• 3 CORS

JSONP

• 安裝：npm i -S fetch-jsonp
• 利用JSONP實現(xiàn)跨域獲取數(shù)據(jù)，只能獲取GET請求
• fetch-jsonp
• fetch-jsonp
• 限制：1 只能發(fā)送GET請求 2 需要服務(wù)端支持JSONP請求

/* movielist.js */
fetchJsonp('https://api.douban.com/v2/movie/in_theaters')
  .then(rep => rep.json())
  .then(data => { console.log(data) })

代理

• webpack-dev-server 代理配置如下：
• 問題：webpack-dev-server 是開發(fā)期間使用的工具，項目上線了就不再使用 webpack-dev-server
• 解決：項目上線后的代碼，也是會部署到一個服務(wù)器中，這個服務(wù)器配置了代理功能即可（要求兩個服務(wù)器中配置的代理規(guī)則相同）

// webpack-dev-server的配置
devServer: {
  // https://webpack.js.org/configuration/dev-server/#devserver-proxy
  // https://github.com/chimurai/http-proxy-middleware#http-proxy-options
  // http://www.itdecent.cn/p/3bdff821f859
  proxy: {
    // 使用：/api/movie/in_theaters
    // 訪問 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
    '/api': {
      // 代理的目標服務(wù)器地址
      target: 'https://api.douban.com/v2',
      // https請求需要該設(shè)置
      secure: false,
      // 必須設(shè)置該項
      changeOrigin: true,
      // '/api/movie/in_theaters' 路徑重寫為：'/movie/in_theaters'
      pathRewrite: {"^/api" : ""}
    }
  }
}

/* movielist.js */
fetch('/api/movie/in_theaters')
  .then(function(data) {
    // 將服務(wù)器返回的數(shù)據(jù)轉(zhuǎn)化為 json 格式
    return data.json()
  })
  .then(function(rep) {
    // 獲取上面格式化后的數(shù)據(jù)
    console.log(rep);
  })

CORS - 服務(wù)器端配合

• 示例：NodeJS設(shè)置跨域
• 跨域資源共享 CORS 詳解 - 阮一峰

// 通過Express的中間件來處理所有請求
app.use(function (req, res, next) {
  // 設(shè)置響應(yīng)頭為允許跨域
  res.header('Access-Control-Allow-Origin', '*');

  // 設(shè)置服務(wù)器支持的所有頭信息字段
  res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,Accept,X-Requested-With');
  // 設(shè)置服務(wù)器支持的所有跨域請求的方法
  res.header('Access-Control-Allow-Methods', 'POST,GET');
  // next()方法表示進入下一個路由
  next();
});