半个月前终于结束了邮箱系统的开发，前端技术栈用的ant design pro，开发过程中喜忧参半，新颖的框架让我充满了好奇和兴奋，但是基础知识储备的不足也让我一度陷入绝望😣，不过看到最后的结果，心里还是挺满意的😄
1.准备工作
- 学习ES6 你需要了解的 ES6 语法
- 学习React Facebook提供的官方入门教程
- 学习Ant Design 语雀Ant Design 实战教程(阿里提供的官方教程)
- 学习Ant Design Pro Antd Pro官方文档
如果是React零基础的话，这四部分需要依次学习，学完后不仅可以方便你掌握Ant Design PRO，还可以加深对整个前端架构的理解,其中语雀的教程是讲解的最用心的，需要仔细阅读，我当时花了一周学习这些文档T_T
避免有人迷失在文档中，在此先对以上四部分做个浅显的总结：
- ES6就是JavaScript较新的一个版本，添加了许多特性，目前主流前端框架几乎都在使用ES6(Vue/Angular/React/...)
- React的出现解决了前端领域的一个难题：怎么把复杂的页面拆分成一个个组件，然后一个个独立的组件又怎么拼装成可以互相协同的网页。
- Ant Design 就是基于 React 实现的一套组件库
- Ant Design Pro 是利用Ant Design/dva/umi等 实现的后台模版框架
2.项目搭建
$ git clone git@github.com:ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start # 打开浏览器访问 http://localhost:8000
3.项目本地化
- 替换
.git文件夹,Mac环境下需要command+shift+.显示该隐藏文件夹 - 更改favicon
public/favicon.png - 修改页面内的logo
src/assets/logo.svg - 修改
defaultSettings.js中的 tittle 更改内容页标题 - 修改
document.ejs中的 title 更改登录页标题
4.新建自定义页面
-
config/router.config.js在BasicLayout的routes下添加菜单
{
name:'newpage', //菜单名称
icon:'dribbble', //ant-deisgn Icon里挑选
path:'/new-page', //路由名字
component:'./New/NewPage' //组件位置
},
- 在
src/pages目录下创建New文件夹/NewPage.js 和 NewPage.less
NewPage.js
import React,{Component} from 'react';
import styles from './NewPage.less';
class NewPage extends Component{
render(){
return (
<p>new pape</p>
)
}
}
export default NewPage;
5.数据流
这里的数据流💧指的是 Antd Pro 对数据的整个操作流程：例如 如何请求Server的数据，拿到数据后如何加工、渲染，以及如何在本地模拟数据 等等。以下按照前端的分层理念对数据流做一个讲解🌠
前端代码层次（Page > Model > Service）
1.Page 层: 渲染页面、接受用户的操作输入
2:Model 层: 为 Page 做数据、状态的读写、变换、暂存等
3.Service 层: 纯粹的数据读写Antd Pro所用的状态管理框架: DVA
1.DVA简化并规范了Model层的数据处理
2.它是redux、redux-saga 和 react-router 的最佳实践沉淀(官方解释...)目录结构
- config
- mock
- test-mock.js
- src
- pages
- New
- models
- test.js
- NewPage.js
- services
- test-service.js
...
- 代码实现
NewPage.js (Page层)👇
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Avatar } from 'antd';
import StandardTable from '@/components/StandardTable';
@connect(({ test, loading }) => ({
test,
loading: loading.models.test,
}))
class NewPage extends PureComponent {
state = { };
columns = [
{
title: '名称',
dataIndex: 'name'
},
{
title: '头像',
dataIndex: 'avatar',
render: val => <Avatar src={val} />,
},
{
title: '等级',
dataIndex: 'level'
}
];
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'test/fetch',
});
}
render() {
const {
test: { res },
loading,
} = this.props;
const { } = this.state;
return (
<StandardTable
loading={loading}
data={res}
columns={this.columns}
/>
);
}
}
export default NewPage;
model/test.js(Model层)👇
import { queryTest } from '@/services/test-service';
export default {
namespace: 'test',
state: {
res: {
//可以理解为字段声明
list: [],
pagination: {},
},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryTest, payload);
yield put({
type: 'save',
payload: response,
});
},
reducers: {
save(state, action) {
return {
...state,
res: action.payload,
};
},
},
};
services/test-service.js(Service层)👇
import { stringify } from 'qs';
import request from '@/utils/request';
export async function queryTest(params) {
return request(`/api/test?${stringify(params)}`);
}
mock/test-mock.js(Mock层-模拟数据)👇
import { parse } from 'url';
// mock tableListDataSource
let tableListDataSource = [];
for (let i = 0; i < 66; i += 1) {
tableListDataSource.push({
key: i,
name: `Name_ ${i}`,
avatar: [
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
][i % 2],
level: ` Lv_${i}`,
});
}
function getTest(req, res, u) {
let url = u;
if (!url || Object.prototype.toString.call(url) !== '[object String]') {
url = req.url;
}
const params = parse(url, true).query;
let dataSource = tableListDataSource;
let pageSize = 10;
if (params.pageSize) {
pageSize = params.pageSize * 1;
}
const result = {
list: dataSource,
pagination: {
total: dataSource.length,
pageSize,
current: parseInt(params.currentPage, 10) || 1,
},
};
return res.json(result);
}
export default {
'GET /api/test': getTest
};
