前端学习笔记四十二-移动APP（6）douban电影项目
2020-04-02 本文已影响0人
AizawaSayo
fetch-jsonp插件跨域
1.安装
npm i fetch-jsonp -S
- 导入并和fetch一样使用
fetchJSONP(
"https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b"
)
.then(res => res.json())
.then(data => {
this.setState({
isLoading: false
})
console.log(data)
})
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>
