您的位置：首页 > 其它

Ant Design Pro快速入门

2018-09-06 09:10 921 查看

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

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

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

目录结构浅谈

首先，我们来简单了解一下整个项目的目录结构及其中每个文件的功能。
一个完整的目录结构如下：

其中，关于业务功能的代码都在

src

文件夹下。
而

src

中本身又包含着很多的子文件夹。
其中，我们最常用的应该了

routes

，

services

，

models

以及

components

。
下面，我们来依次了解一下这四个文件夹的作用。

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

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

配置新的路由和菜单

在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',
```
```
}],
```
```
}, {
```
```
// 更多配置
```
```
}];
```

创建一个页面

下面，我们继续来创建一个页面，对应到我们添加的路由中。
在

src/routes

下创建对应的js文件即可。

newPage.js

:
示例如下：

import React, { PureComponent } from 'react';

export default class Workplace extends PureComponent {

```
render() {
```
```
return (
```
```
<h1>Hello World!</h1>
```
```
);
```
```
}
```
```
}
```

新增一个组件

假设该页面相对复杂，我们需要引入一个组件呢？
我们可以在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="示意图">;

```
)
```

增加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部分使用应该得到的返回值进行渲染显示：

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 Pro的快速入门。
在后续文章中，我们会对一些具体的使用来进行分析和剖析。
大家在使用的过程中如果发现一些问题也欢迎大家留言讨论。

```
</imagewrapper></icon>
```

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航