Ant Design Pro初体验

2019-04-29 本文已影响0人尼禄祭

半个月前终于结束了邮箱系统的开发，前端技术栈用的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
};

Ant Design Pro初体验

猜你喜欢

热点阅读