react项目:Ant-Design篇
一、创建react项目
打开命令窗口，创建react项目：npx create-react-app my-react
src/新建component文件夹放组件，在App.js里可以引入about组件
src/component/about:
rfce回车(这需要安装一个VScode插件ES7 react/redux），组件内容
import React, { useState， useEffect } from "react";
npm i axios
import axios from “axios”;
function里：
const [tvs, setTvs] = useState([]);
useEffect(() => {
axios
.get(
"https://pcw-api.iqiyi.com/search/recommend/list?channel_id=8&data_type=1&mode=24&page_id=1&ret_num=48"
)
.then((res) => {
console.log(res.data);
// 获取到数据后，设置state数据
setTvs(res.data.data.list);
});
}, []);
在return里，map遍历循环取到数据，渲染页面
{tvs.map((a) => (
<p key={a.albumId}>{a.name}</p>
))}
二、 分页效果
about的function里:设置page的state值，在初始化里传入参数page,page改变
const [page, setPage] = useState(1);
useEffect(() => {
// 这里loadTV()是把上面axios.get封装好的获取数据的函数，效果一样
loadTV(page).then((res) => {
// 这里用解构赋值在原数据基础上渲染增加下一页的数据
setTvs([...tvs, ...res.data.data.list]);
});
}, [page]);
三、NProgress进度条插件
在GitHub里搜nprogress，rstacruz/nprogress，里面有配置信息
你如果想自定义UI，找到template
NProgress.config({
template:"<div class="...">.....</div>"
});
Resouses里也有现成的loading效果，
打开终端 npm i nprogress
配置文件都在node_modules/nprogress里
在src/index.js里引入一下nprogress：import "nprogress/nprogress.css";
在components/about.jsx里引入nprogress: import NProgress from "nprogress"
useEffect(() => {
// 加载数据前进度条开始
NProgress.start()
loadTV(page).then((res) => {
setTvs([...tvs, ...res.data.data.list]);
// 数据加载完，进度条结束，这里的进度条都是假进度
NProgress.done()
});
}, [page]);
**全局拦截**
我们每一个请求都要写进度条引入NProgre.start()，NProgress.done()就太麻烦了，所以我们需要封装好请求数据的代码（src/utils/request.js）,然后统一在请求数据的时候做一个全局拦截。上述about.jsx里的进度条的代码就可以删掉了。
request.js:
import axios from "axios";
import NProgress from "nprogress";
const instance = axios.create({
timeout: 5000,
});
// 封装get请求
// 这里的get是函数名
export function get(url, params) {
// 这里的get是请求方式
return instance.get(url, {
params,
});
}
// 封装post请求
export function post(url, data) {
return instance.post(url, data);
}
node_modules/axios/README.md找到全局拦截这段代码，粘到我们封装好的request.js里，前面引入一下进度条
`import NProgress from "nprogress"
`import "nprogress/nprogress.css";
在下面全局拦截这段代码的return config;前面加上 NProgress.start();
在return response;前面加上 NProgress.done();
在return Promise.reject(error);报错前也停掉进度条 NProgress.done();
注意：在request.js里我定义了const instance = axios.create，所以别忘记把全局拦截这段代码里的axios.改成instance.，如果你没定义axios那就不用改了。
全局拦截：
// Add a request interceptor
// 下面这一行的axios要改成instance
axios.interceptors.request.use(function (config) {
// Do something before request is sent
NProgress.start();
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
// 下面这一行的axios要改成instance
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
NProgress.done();
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
NProgress.done();
return Promise.reject(error);
});
四、ANT-Design
目前antd是4点多的版本
npm i antd
在index.js里引入antd的css，import “antd/dist/antd.css”
Button
例如我们需要在about页面用到antd的button，import { Button } from “antd”;
<Button
onClick={() => {
setPage(page + 1);
}}
type="primary"
>下一页</Button>
Card
如果我们需要用到卡片
import { Button, Card } from "antd";
const { Meta } = Card;
https://ant.design/components/card-cn/
对应的代码复制粘贴
icon图标
打开终端：npm i @ant-design/icons
还有栅格等用法
五、收藏功能
这里用的本地存储localstorage
将加入收藏，删除收藏，获取收藏列表三个请求封装在utils/fav.js里
/**
* 加入收藏
* @param id
*/
export function inCollection(id) {
const favs = getCollections();
if (favs.indexOf(id) === -1) {
favs.push(id);
}
localStorage.setItem("favs", JSON.stringify(favs));
}
/**
* 取消收藏
* @param {*} id
*/
export function cancelCollection(id) {
const favs = getCollections(); // 获取现有的收藏信息
if (favs.indexOf(id) > -1) {
// 获取当前数据的索引
favs.splice(favs.indexOf(id), 1);
}
localStorage.setItem("favs", JSON.stringify(favs));
}
/**
* 获取收藏信息
*/
export function getCollections() {
let result = [];
try {
if (localStorage.getItem("favs")) {
result = JSON.parse(localStorage.getItem("favs"));
}
} catch (err) {
console.log(err);
}
return result;
}
在about.jsx里引用一下，import { getCollections, inCollection, cancelCollection } from "../utils/fav";
function里：const collections = getCollections();
在Card组件里的actions属性里添加判断，
<Row gutter={4} justify="center" align="middle">
{tvs.map((a) => (
<Col span={6} key={a.albumId}>
<Card
hoverable
style={{ width: 200, margin: "2rem auto" }}
cover={<img alt="game" src={a.imageUrl} />}
actions={[
// >-1 表示存在
collections.indexOf(a.albumId) > -1 ? (
<Button
onClick={() => {
cancelCollection(a.albumId);
setCollected(!isCollected);
}}
type="danger"
>
<HeartTwoTone twoToneColor="#eb2f96" />
</Button>
) : (
<Button
onClick={() => {
inCollection(a.albumId);
setCollected(!isCollected);
}}
type="primary"
>
<HeartTwoTone />
</Button>
),
]}
>
<Meta title={a.name} description={a.playUrl} />
</Card>
</Col>
))}
</Row>
<Button
onClick={() => {
setPage(page + 1);
}}
type="primary"
loading={isloading}
>
下一页
</Button>
六、antd Table组件
import { Table} from “antd”; //引入table
import { loadTV } from “…/api/game”; //引入封装好的加载数据的js文件
const columns = [
{
title: "序号",
align: "center",
width: 80,
render: (text, record, index) => {
// console.log(text);
// console.log(record);
// console.log(index);
return <span>{index + 1}</span>;
},
},
{
title: "名字",
width: 400,
dataIndex: "name",
key: "name",
align: "center",
},
{
title: "图片",
dataIndex: "imageUrl",
render: (text, record) => {
return (
<img
src={record.imageUrl}
alt={record.name}
style={{ width: "80px" }}
/>
);
},
},
{
title: "简介",
dataIndex: "description",
},
];
定义一个组件People： function People() {
定义数据和页面切换
const [dataSource, setDS] = useState([]);
const [page, setPage] = useState(1);
初始化时加载数据loadTV，同时监听页数变化[page]
useEffect(() => {
loadTV(page).then((res) => {
setDS(res.data.data.list);
});
}, [page]);
最后return（
<div>
<Table
// 边框效果
bordered={true}
// 数据
dataSource={dataSource}
columns={columns}
// 分页器
pagination={{
// 默认当前页
defaultCurrent: 1,
total: 50,
showSizeChanger: true,
// 每页数量
defaultPageSize: 12,
// 切换页面
onChange: (p) => {
setPage(p);
},
}}
/>
;
</div>
）
本文地址：https://blog.csdn.net/weixin_46508028/article/details/107780978