Fork me on GitHub

koa学习-首页构建-7

封装 axios 请求库

在lib里面新建一个request.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import axios from 'axios';
import { message } from 'antd';
const defaultAxiosConf = {
timeout: 5000
// 最大的请求时间
}
const _request = (params = {}, fn = () => {}) => {
return axios({
...defaultAxiosConf,
...params
}).then(res => {
const {
success,
data,
err,
code
} = res.data;
if (code === 401) {
// 用户没有资格访问
window.location.href = '/';
return;
}
if (success) {
fn(false);
return data;
}
throw err;
}).catch(err => {
fn(false);
// 终止整个请求
message.error(String(err || '网络错误'))
})
}
export default (param) => {
const type = typeof param;
// 判断一波类型
if (type === 'function') {
param(true);
return (obj) => _request(obj, param);
}
if (type === 'object' && type !== null) {
return _request(param);
}
}

然后修改一波首页:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from 'react';
import Layout from '../../layouts/default';
import Content from './content';
import { request } from '../../lib';
import { Menu } from 'antd';
export default class Home extends React.Component{
constructor(props){
super(props);
this.state = {
years: ['2025','2024','2023','2022','2021','2020','2019','2018'],
type: this.props.match.params.type,
year: this.props.match.params.year,
movies: []
}
}
componentDidMount(){
this._getAllmovies();
}
_getAllmovies = () => {
request(window._LOADING_)({
method:'get',
url:`api/v0/movies?type=${this.state.type || ''}&year=${this.state.year || ''}`
}).then(res => {
this.setState({
movies: res
}).catch(()=>{
this.setState({
movies: []
})
})
})
}
_renderContent = () => {
const { movies } = this.state;
if(!movies || !movies.length) return null;
return(
<Content movies = {movies}/>
)
}
_selectItem = ({ key }) => {
this.setState({
selectedKeys:key
})
}
render(){
const { years,selectedKeys } = this.state;
return(
<Layout {...this.props}>
<div className="flex-rot full">
<Menu
defaultSelectedKeys={[selectedKeys]}
mode='inline'
style ={{height:'100%',overflowY:'scroll',maxWidth:'230'}}
onSelect ={this._selectItem}
className="align-self-start"
>
{
years.map((item,index)=>(
<Menu.Item key={index}>
<a href={`/year/${item}`}>{item} 年上映</a>
</Menu.Item>
))
}
</Menu>
<div className="flex-1 scroll-y align-self-start">
// 使用一个_renderContent()方法来渲染
{this._renderContent()}
</div>
</div>
</Layout>
)
}
}

抽离首页的卡片组件

直接看代码,数据从首页传递到content.js 页面的时候,用props接下来即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React , { Component } from 'react';
import { Row,Card, Col, Badge,Icon } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const site = 'http://wdlj.zoomdong.xin/';
const Meta = Card.Meta;
export default class Content extends Component{
_renderContent = () => {
const { movies } = this.props;
return(
<div style={{ padding: '30px' }}>
<Row>
{
movies.map((item,index)=>(
<Col
key = {`${item.rate}${index}`}
xl={{span:6}}
lg={{span:8}}
md={{span:12}}
sm={{span:24}}
style={{marginBottom:'8px'}}
>
<Card
bordered={false}
hoverable
style={{ width:'100%' }}
actions={[
// 这里放更新时间
<Badge>
<Icon style={{ marginRight:'2px' }} type='clock-circle'/>
{moment(item.meta.createdAt).fromNow(true) }
前更新
</Badge>,
<Badge>
<Icon style={{marginRight:'2px'}} type='star'/>
{item.rate} 分
</Badge>
]}
cover={
<img
// 这里对图片的处理使用了七牛的图片剪裁功能
src={site + item.posterKey + '?imageMogr2/thumbnail/x1680/crop/1080x1600'} />}
>
{/* 标题和描述 */}
<Meta
style = {{ height:'202px',overflow:'hidden' }}
title={<Link to={`/detail/${item._id}`} >{item.title}</Link>}
description={<Link to={`/detail/${item._id}`} >{item.summary}</Link>}
/>
</Card>
</Col>
))
}
</Row>
</div>
)
}
render(){
// console.log(this.props);
return(
<div style={{ padding: '10px' }}>
{ this._renderContent() }
</div>
)
}
}

后面还有一些功能比较繁琐,其实基本都是一些前端构建的东西,这一部分可以直接去我的github上面查看源码.

很抱歉,这篇blog烂尾了QAQ.

后续直接到部署上线那一块去。

-------------本文结束感谢您的阅读-------------