Ant Design Pro快速入门

在上一篇文章中，我们介绍了如何构建一个Ant Design Pro的环境。

同时讲解了如何启动服务并查看前端页面功能。

在本文中，我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功能。

目录结构浅谈

首先，我们来简单了解一下整个项目的目录结构及其中每个文件的功能。 
一个完整的目录结构如下： 
title 
其中，关于业务功能的代码都在src文件夹下。 
而src中本身又包含着很多的子文件夹。 
其中，我们最常用的应该了routes，services，models以及components。 
下面，我们来依次了解一下这四个文件夹的作用。

  1. routes：每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
  2. services：用于与后台交互、发送请求等。
  3. models：用于组件的数据存储，接收请求返回的数据等。
  4. components：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的组件，建议将该组件写入components文件夹中，并在routes文件夹中的文件引入来使用。

其余的文件夹和文件功能和含义我们不再此处展开说明，但是会在后续使用过程中随时进行补充说明。

配置新的路由和菜单

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

  1. const routerConfig = {
  2. '/': {
  3. component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
  4. },
  5. '/dashboard/monitor': {
  6. component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
  7. },
  8. '/dashboard/workplace': {
  9. component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
  10. }
  11. }

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

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

  1. const menuData = [{
  2. name: 'dashboard',
  3. icon: 'dashboard', // https://demo.com/icon.png or <icon type="dashboard">
  4. path: 'dashboard',
  5. children: [{
  6. name: '分析页',
  7. path: 'analysis',
  8. }, {
  9. name: '监控页',
  10. path: 'monitor',
  11. }, {
  12. name: '工作台',
  13. path: 'workplace',
  14. }, {
  15. name: '测试页',
  16. path: 'test',
  17. }],
  18. }, {
  19. // 更多配置
  20. }];

创建一个页面

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

  1. import React, { PureComponent } from 'react';
  3. export default class Workplace extends PureComponent {
  4. render() {
  5. return (
  6. <h1>Hello World!</h1>
  7. );
  8. }
  9. }

新增一个组件

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

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

修改newPage.js:

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

增加service和module

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

  1. componentDidMount() {
  2. const { dispatch } = this.props;
  3. dispatch({
  4. type: 'project/fetchNotice',
  5. });
  6. dispatch({
  7. type: 'activities/fetchList',
  8. });
  9. dispatch({
  10. type: 'chart/fetch',
  11. });
  12. }

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

  1. export default {
  2. namespace: 'monitor',
  4. state: {
  5. currentServices: [],
  6. waitingServices: [],
  7. },
  9. effects: {
  10. *get_current_service_list(_, { call, put }) {
  11. const response = yield call(getCurrentServiceList);
  12. yield put({
  13. type: 'currentServiceList',
  14. currentServices: response.result,
  15. });
  16. },
  17. *get_waiting_service_list(_, { call, put }) {
  18. const response = yield call(getWaitingServiceList);
  19. yield put({
  20. type: 'waitingServiceList',
  21. waitingServices: response.result,
  22. });
  23. },
  24. },
  26. reducers: {
  27. currentServiceList(state, action) {
  28. return {
  29. ...state,
  30. currentServices: action.currentServices,
  31. };
  32. },
  33. waitingServiceList(state, action) {
  34. return {
  35. ...state,
  36. waitingServices: action.waitingServices,
  37. };
  38. },
  39. },
  40. };

而真正发送请求的实际是service文件夹下的文件进行的。

  1. export async function getWaitingServiceList() {
  2. return request('/api/get_service_list', {
  3. method: 'POST',
  4. body: {"type": "waiting"},
  5. });
  6. }
  8. export async function getCurrentServiceList() {
  9. return request('/api/get_service_list', {
  10. method: 'POST',
  11. body: {"type": "current"},
  12. });
  13. }

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

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

mock数据

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

  1. const proxy = {
  2. 'GET /api/fake_list': [{
  3. key: '1',
  4. name: 'John Brown',
  5. age: 32,
  6. address: 'New York No. 1 Lake Park',
  7. }, {
  8. key: '2',
  9. name: 'Jim Green',
  10. age: 42,
  11. address: 'London No. 1 Lake Park',
  12. }, {
  13. key: '3',
  14. name: 'Joe Black',
  15. age: 32,
  16. address: 'Sidney No. 1 Lake Park',
  17. }],
  18. 'POST /api/login/account': (req, res) => {
  19. const { password, userName, type } = req.body;
  20. if(password === '888888' &amp;&amp; userName === 'admin'){
  21. res.send({
  22. status: 'ok',
  23. type,
  24. currentAuthority: 'admin'
  25. });
  26. return ;
  27. }
  28. if(password === '123456' &amp;&amp; userName === 'user'){
  29. res.send({
  30. status: 'ok',
  31. type,
  32. currentAuthority: 'user'
  33. });
  34. return ;
  35. }
  36. res.send({
  37. status: 'error',
  38. type,
  39. currentAuthority: 'guest'
  40. });
  41. }
  42. }

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

打包

当我们将完整的前端项目开发完成后，我们需要打包成为静态文件并准备上线。 
此时，我们应该如何打包项目呢？ 
非常简单，只需要执行如下命令即可：

  1. npm run build

此外，有时我们希望分析依赖模块的文件大小来优化我们的项目：

  1. npm run analyze

title

运行完成后，我们可以打开dist/stats.html文件来查询具体内容：

title

至此为止，我们就讲解完成了Ant Design Pro的快速入门。 
在后续文章中，我们会对一些具体的使用来进行分析和剖析。 
大家在使用的过程中如果发现一些问题也欢迎大家留言讨论。

  1. </imagewrapper></icon>
 
posted @ 2018-09-06 09:10  割肉机  阅读(36716)  评论(1)    收藏  举报