ant design学习笔记（一）

ant design 快速入门

1、目录结构浅谈
ant 中一个完整的目录结构主要包括
src：存放拥有与业务功能的代码
其中，最常用的应该是routes、services、models以及components.
a、routes：每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
b、services：用于与后台交互、发送请求等。
c、models：用于组建的数据存储，接受请求返回的数据等。
d、compoments：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的的组件，建议先放到components文件夹中，并在routes文件夹中的文件引入来使用。

2、配置新的路由和菜单
在Ant Design Pro中，前端路由是通过react-router4.0进行路由管理的。
下面，我们将会讲解如下添加一个新的路由，并在前端页面中增加一个菜单来对应该路由。
在Ant Design Pro中，路由的配置文件统一由src/common/router.js文件进行管理。
示例内容如下

const routerConfig = {
    '/': {
      component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
    },
    '/dashboard/monitor': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
    },
    '/dashboard/workplace': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
    }
}
其中，包含了三个路由：/，/dashboard/monitor，/dashboard/workplace。

同时，指定了这三个路由分别对应的页面文件为layouts/BasicLayout.js，routes/Dashboard/NgMonitor.js以及Dashboard/NgWorkSpace.js文件。

下面，我们可以在侧边栏中填写一项来对应到我们添加的路由中：
示例如下：

const menuData = [{
  name: 'dashboard',
  icon: 'dashboard',  // https://demo.com/icon.png or <icon type="dashboard">
  path: 'dashboard',
  children: [{
    name: '分析页',
    path: 'analysis',
  }, {
    name: '监控页',
    path: 'monitor',
  }, {
    name: '工作台',
    path: 'workplace',
  }, {
    name: '测试页',
    path: 'test',
  }],
}, {
  // 更多配置
}];

3创建一个页面
下面，我们继续来创建一个页面，对应到我们添加的路由中。
在src/routes下创建对应的js文件即可。
newPage.js:
示例如下：

import React, { PureComponent } from 'react';
export default class Workplace extends PureComponent {
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

4、新增一个组件
假设该页面相对复杂，我们需要引入一个组件呢？
我们可以在components文件夹下创建一个组件，并在newPage.js引入并使用。
示例如下：
components/ImageWrapper/index.js

import React from 'react';
import styles from './index.less';    // 按照 CSS Modules 的方式引入样式文件。
export default ({ src, desc, style }) => (
  <div style="{style}" classname="{styles.imageWrapper}">
    <img classname="{styles.img}" src="{src}" alt="{desc}">
    {desc &amp;&amp; <div classname="{styles.desc}">{desc}</div>}
  </div>
);

修改newPage.js:

import React from 'react';
import ImageWrapper from '../../components/ImageWrapper';  // 注意保证引用路径的正确
export default () => (
  <imagewrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意图">;
)

5、增加service和module
假设我们的newPage.js页面需要发送请求，接收数据并在页面渲染时使用接收到的数据呢？
例如，我们可以在组件加载时发送一个请求来获取数据。

componentDidMount() {
  const { dispatch } = this.props;
  dispatch({
    type: 'project/fetchNotice',
  });
  dispatch({
    type: 'activities/fetchList',
  });
  dispatch({
    type: 'chart/fetch',
  });
}

此时，它将会找到对应的models中的函数来发送请求：

export default {
  namespace: 'monitor',
  state: {
    currentServices: [],
    waitingServices: [],
  },
  effects: {
    *get_current_service_list(_, { call, put }) {
      const response = yield call(getCurrentServiceList);
      yield put({
        type: 'currentServiceList',
        currentServices: response.result,
      });
    },
    *get_waiting_service_list(_, { call, put }) {
      const response = yield call(getWaitingServiceList);
      yield put({
        type: 'waitingServiceList',
        waitingServices: response.result,
      });
    },
  },
  reducers: {
    currentServiceList(state, action) {
      return {
        ...state,
        currentServices: action.currentServices,
      };
    },
    waitingServiceList(state, action) {
      return {
        ...state,
        waitingServices: action.waitingServices,
      };
    },
  },
};
而真正发送请求的实际是service文件夹下的文件进行的。
export async function getWaitingServiceList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "waiting"},
  });
}
export async function getCurrentServiceList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "current"},
  });
}

在routes文件夹中，我们可以直接在render部分使用应该得到的返回值进行渲染显示：

扫描二维码关注公众号，回复： 4996659 查看本文章

const { monitor, loading } = this.props;
// monitor指的是相当于数据流
const { currentServices, waitingServices } = monitor;
// 从数据流中取出了具体的变量

mock数据
在我们开发的过程中，通常不可避免的就是mock数据。
那具体应该如下进行mock数据呢？主要依赖的是.roadhogrc.mock.js文件。
打开指定文件，我们可以看到如下的类似内容：

const proxy = {
  'GET /api/fake_list': [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  }, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  }, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  }],
  'POST /api/login/account': (req, res) => {
    const { password, userName, type } = req.body;
    if(password === '888888' &amp;&amp; userName === 'admin'){
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'admin'
      });
      return ;
    }
    if(password === '123456' &amp;&amp; userName === 'user'){
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'user'
      });
      return ;
    }
    res.send({
      status: 'error',
      type,
      currentAuthority: 'guest'
    });
  }
}

在上面的例子中，我们分别描述了针对GET和POST请求应该如下进行数据Mock。

打包
当我们将完整的前端项目开发完成后，我们需要打包成为静态文件并准备上线。
此时，我们应该如何打包项目呢？
非常简单，只需要执行如下命令即可：npm run build
此外，有时我们希望分析依赖模块的文件大小来优化我们的项目：

npm run analyze

在这里插入图片描述
运行完成后，我们可以打开dist/stats.html文件来查询具体内容：

ant design学习笔记（一）

猜你喜欢