zoukankan      html  css  js  c++  java
  • Ant Design Pro快速入门

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

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

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

    目录结构浅谈

    首先,我们来简单了解一下整个项目的目录结构及其中每个文件的功能。 
    一个完整的目录结构如下: 
    title 
    其中,关于业务功能的代码都在src文件夹下。 
    src中本身又包含着很多的子文件夹。 
    其中,我们最常用的应该了routesservicesmodels以及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';
    2. export default class Workplace extends PureComponent {
    3. render() {
    4. return (
    5. <h1>Hello World!</h1>
    6. );
    7. }
    8. }

    新增一个组件

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

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

    修改newPage.js:

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

    增加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',
    3. state: {
    4. currentServices: [],
    5. waitingServices: [],
    6. },
    7. effects: {
    8. *get_current_service_list(_, { call, put }) {
    9. const response = yield call(getCurrentServiceList);
    10. yield put({
    11. type: 'currentServiceList',
    12. currentServices: response.result,
    13. });
    14. },
    15. *get_waiting_service_list(_, { call, put }) {
    16. const response = yield call(getWaitingServiceList);
    17. yield put({
    18. type: 'waitingServiceList',
    19. waitingServices: response.result,
    20. });
    21. },
    22. },
    23. reducers: {
    24. currentServiceList(state, action) {
    25. return {
    26. ...state,
    27. currentServices: action.currentServices,
    28. };
    29. },
    30. waitingServiceList(state, action) {
    31. return {
    32. ...state,
    33. waitingServices: action.waitingServices,
    34. };
    35. },
    36. },
    37. };

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

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

    在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>
     
  • 相关阅读:
    uniapp 的组件 定义了 直接使用即可 。
    uniapp 关闭微信小程序的索引警告
    微信小程序 组件化开发 实现 导航分类文章 小程序
    微信小程序 向下滚动加载更多 和 上滑刷新的写法
    微信小程序 用 Pormise 封装 wx.request 请求
    ES6 再次学习 Promise语法(代码图解)
    Maven依赖排除及版本统一
    Maven依赖使用的范围
    SSM整合时的配置文件
    SSM整合时用到的maven依赖
  • 原文地址:https://www.cnblogs.com/williamjie/p/9596266.html
Copyright © 2011-2022 走看看