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
上一篇: Singleton
下一篇: 精妙的单例类(Singleton)
推荐阅读
-
详解在React项目中安装并使用Less(用法总结)
-
详解React项目如何修改打包地址(编译输出文件地址)
-
.NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程
-
.NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计
-
从零开始学习搭建React脚手架项目
-
React项目动态设置title标题的方法示例
-
使用React服务端渲染Next.js框架构建一个简单项目(实例)
-
react移动端ui框架哪个好(react优秀项目案例)
-
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
-
react移动端ui框架哪个好(react优秀项目案例)