移動App第5天-豆瓣電影
Node.js設置跨域
app.use('*', function (req, res, next) {
// 設置請求頭爲允許跨域
res.header("Access-Control-Allow-Origin", "*");
// 設置服務器支持的所有頭信息字段
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
// 設置服務器支持的所有跨域請求的方法
res.header("Access-Control-Allow-Methods", "POST,GET");
// next()方法表示進入下一個路由
next();
});
Promise規範
-
定義：就是一個異步的代碼規範；
-
好處：
-
更好的幫我們解決回調地獄問題
-
能幫我們很好的實現代碼的複用
基於Promise規範的fetch API的使用
項目結構搭建和佈局
-
運行
npm install antd --save安裝ant design -
導入相關組件：
import { DatePicker } from 'antd';
- 導入樣式：
import 'antd/dist/antd.css';
實現ANT組件的按需加載
-
運行
cnpm i babel-plugin-import --save-dev -
修改
.babelrc文件：
{
"presets":["es2015", "stage-0", "react"],
"plugins":[
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }]
]
}
- 然後只需從 antd 引入模塊即可，無需單獨引入樣式。等同於下面手動引入的方式。
使用react-router-dom實現路由跳轉
- HashRouter：是一個路由的跟容器，一個應用程序中，一般只需要唯一的一個HashRouter容器即可！將來，所有的Route和Link都要在HashRouter中進行使用
- 注意：HashRouter中，只能有唯一的一個子元素
-
Link：是相當於超鏈接一般的存在；點擊Link，跳轉到相應的路由頁面！負責進行路由地址的切換！
-
Route：是路由匹配規則，當路由地址發生切換的時候，就會來匹配這些定義好的Route規則，如果有能匹配到的路由規則，那麼，就會展示當前路由規則所對應的頁面！
-
Route：除了是一個匹配規則之外，還是一個佔位符，將來，此Route所匹配到的組件頁面，將會展示到Route所在的這個位置！
// 其中path指定了路由匹配規則，component指定了當前規則所對應的組件
<Route path="" component={}></Route>
-
注意：react-router中的路由匹配，是進行模糊匹配的！可以通過
Route身上的exact屬性，來表示當前的Route是進行精確匹配的 -
可以使用
Redirect實現路由重定向
// 導入路由組件
import {Route, Link, Redirect} from 'react-router-dom'
<Redirect to="/movie/in_theaters"></Redirect>
this.prop和Route的關係【重要】
獲取到參數之後，從服務器獲取電影數據
使用Node服務器轉接豆瓣API
渲染電影列表
相關文章
內容來自網上，記錄學習筆記方便後期查看，如有問題請與我聯繫，謝謝