使用的都是爱奇艺电影接口
demo1–承接上上篇脚手架生成的react来继续的
修改了List.jsx和创建文件 src/api/favs.js
favs.js
export function onCollection(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(); // 获取现有的收藏信息
const index = favs.indexOf(id); // 获取当前数据的索引,favs.finIndex(i=>i.id===id)也可查找索引,但是相比indexOf麻烦些
if (index > -1) {
favs.splice(index, 1); // 删除元素
}
localStorage.setItem("favs", JSON.stringify(favs)); // 保存
}
/**
* 获取收藏信息
*/
export function getCollections() {
let result = []; // 这块的let不能写成const,会报错导致页面错误
try {
if (localStorage.getItem("favs")) {
result = JSON.parse(localStorage.getItem("favs"));
}
} catch (err) {
console.log(err);
}
return result;
}
List.jsx
import React, { useState, useEffect } from "react";
import { Button, Card, Row, Col } from "antd";
import { loadDMList } from "../api/iqiyi";
import { getCollections, onCollection, cancelCollection } from "../api/fav";
const { Meta } = Card;
function List() {
const [books, setBooks] = useState([]); // 数据
const [page, setPage] = useState(1); // 页码
const [isLoading, toggleLoading] = useState(false); // 加载状态
// 因为localStorage的修改不会让页面重新渲染,页面的重新渲染是因为state数据的改变会让function重新执行一遍,
const [isCollected, setCollected] = useState(false); // 是否收藏状态改变。
const collections = getCollections();
// 初始化的时候执行
useEffect(() => {
// setBooks([1, 2, 3, 4, 5, 6]);
toggleLoading(true);
loadDMList(page).then((res) => {
setBooks([...books, ...res.data.data.list]);
toggleLoading(false);
});
}, [page]);
return (
<div>
<h1>我是一个List组件</h1>
<Row justify="center" align="middle">
{books.map((book) => (
<Col span={6} key={book.albumId}>
<Card
hoverable
style={{ width: 240, margin: "1rem auto" }}
cover={<img alt="example" src={book.imageUrl} />}
actions={[
collections.indexOf(book.albumId) > -1 ? (
<Button
onClick={() => {
cancelCollection(book.albumId);
setCollected(!isCollected);
}}
type="danger"
>
取消
</Button>
) : (
<Button
onClick={() => {
onCollection(book.albumId);
setCollected(!isCollected);
}}
type="primary"
>
收藏
</Button>
),
]}
>
<Meta title={book.name} description="www.instagram.com" />
</Card>
</Col>
))}
</Row>
<Button
onClick={() => {
setPage(page + 1);
}}
type="primary"
loading={isLoading}
>
下一页
</Button>
</div>
);
}
export default List;
demo2—手写的react页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="no-referrer" />
<title>练习</title>
<link
rel="stylesheet"
href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
html,
body,
#app,
.container {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: black;
color: white;
}
.container {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
.movies {
width: 100%;
flex: 1;
padding: 0.1rem;
overflow: auto;
}
.item {
width: 25%;
float: left;
padding: 0.3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid gray;
}
.item img {
height: 200px;
}
.item h3 {
margin: 0.8rem 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item p {
color: gray;
font-size: 0.8rem;
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.m {
display: block;
margin: 1rem auto;
width: 400px;
height: 300px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script src="./data.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
function loadCollections() {
let stars = [];
if (localStorage.getItem("stars")) {
try {
stars = JSON.parse(localStorage.getItem("stars"));
} catch (err) {}
}
return stars;
}
function Movie(props) {
const { item, playMovie, startToggle, collections } = props;
return (
<div className="item">
<img
onClick={() => playMovie(item.playUrl)}
src={item.imageUrl}
alt={item.name}
/>
<h3>{item.name}</h3>
<p>{item.description}</p>
<i
onClick={() => startToggle(item)}
className="fa fa-heart"
style={
collections.indexOf(item.albumId) > -1 ? { color: "red" } : {}
}
></i>
</div>
);
}
function App() {
const [movies, setMovies] = useState(moviesData.data.list); // 列表
const [url, setUrl] = useState(""); // 播放地址
const [collections, setCollections] = useState([]); // 收藏列表
// 播放
const playMovie = (path) => {
setUrl(`http://jx.618g.com/?url=${path}`);
};
// 收藏或者取消
const startToggle = (item) => {
let stars = loadCollections();
if (stars.indexOf(item.albumId) == -1) {
stars.push(item.albumId);
} else {
stars.splice(stars.indexOf(item.albumId), 1);
}
localStorage.setItem("stars", JSON.stringify(stars));
setCollections([...stars]);
};
useEffect(() => {
// fetch(
// "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=24&page_id=1&ret_num=48"
// )
// .then((res) => res.json())
// .then((res) => setMovies(res.data.list));
setCollections(loadCollections());
}, []);
return (
<div className="container">
<iframe className="m" src={url} frameborder="0"></iframe>
<div className="movies">
{movies.map((item) => (
<Movie
key={item.albumId}
item={item}
startToggle={startToggle}
playMovie={playMovie}
collections={collections}
/>
))}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>