Ant Design Pro V2 运用点滴 [1]

github地址：https://github.com/ant-design/ant-design-pro
文档地址：https://pro.ant.design/docs/getting-started-cn

前序准备

你的本地环境需要安装 node 和 git。技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，

进行开发之前，你需要一定的react语法、Js(ES6)、dva的基础。看完以下链接就开始写页面吧，遇到不会的再去查，这样学比较快。

dva知识地图
js快速预览
react快速预览
react小书
dva文档
react中文文档
ES6

目录结构

├── config                    #umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

安装

从 GitHub 仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

本地开发

$ npm install    //安装依赖
$ npm start     //启动

如果网络状况不佳，可以使用 cnpm 进行加速。
启动完成后会自动打开浏览器访问 http://localhost:8000

首页截图

新建一个页面。

1.在路由中新建一条页面的配置。先不要管报错，因为路由对应的component和models你还没有，继续往下看。这个在config\router.config.js里进行添加。

      {
        name: 'book',
        icon: 'book',
        path: '/book',
        hideChildrenInMenu:true,
        routes: [
          { path: '/book', component: '/book/List' }
          {
            path: '/book/list',
            name: 'list',
            component: './Book/List',
          },
          {
            path: '/book/detail',
            name: 'list',
            component: './Book/detail',
          },
        ],
      },
      /**省略*/

。book为model，要在pages目录新建book文件夹，里面放list,detail文件
。path: '/book/list',：显示路径，
。name：菜单名称
。component：即为该路由记录对应的实际组件
。 name 和 icon分别代表生成菜单项的图标和文本。
。 hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看分步表单的配置
。 hideInMenu 可以在菜单中不展示这个路由，包括子路由。效果可以查看 exception/trigger页面
。 authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示
。你可能注意到配置中的 name 和菜单实际展示的不同，这是因为使用了全球化组件的原因

2,新建菜单项
这个在src\locales\zh-CN.js与 src\locales\zh-CN\menu.js里进行添加。

import globalHeader from './zh-CN/globalHeader';
import login from './zh-CN/login';
import menu from './zh-CN/menu';
import monitor from './zh-CN/monitor';
import result from './zh-CN/result';
import settingDrawer from './zh-CN/settingDrawer';
import settings from './zh-CN/settings';
import pwa from './zh-CN/pwa';
import translator from './zh-CN/book';   //新增加的

export default {
  'menu.home': '首页', 
  'menu.book': '图书',          //新增加的
  'menu.book.list': '图书列表',      
  'menu.book.detail': '图书详情',
  'menu.form': '表单',
  'menu.form.basicform': '基础表单',
  'menu.form.stepform': '分步表单',
  'menu.form.stepform.info': '分步表单（填写转账信息）',
  'menu.form.stepform.confirm': '分步表单（确认转账信息）',
  'menu.form.stepform.result': '分步表单（完成）',
  'menu.form.advancedform': '高级表单',
  'menu.list': '内容',
  /**省略*/
};

3,新建Book文件夹 ,
路由增一条之后，需要去对应的路径新建页面。一般都放在pages文件夹中,在pages中主要涉及两个操作，第一个就是如何拿到数据，第二个就是如何发送同步或异步请求来更新页面数据。

如何拿到数据
在该模块中，就是每个路由所对应的页面，下面主要了解数据是如何在页面中取到的：

import { connect } from 'dva';
 
@connect(({ article,loading }) => ({
  book,
  loading: loading.models.book,
}))
export default class Problem extends PureComponent {
  render() {
    const { problem, user } = this.props;
    return (
      {problem.title}
    );
  }
}

从上面的代码可以看到在页面中导入了dva框架，用dva的connect方法可以拿到所有的state，我们只需要在页面中获取需要的state即可。拿到之后所有的数据都是以props的形式嵌入页面的，也就是我们就像操作props来对待这些数据即可。

如何更新页面数据
在和model关联的页面中，都会给页面传入dispatch() 这个方法，该方法就是分发的意思，可以发出一个Action，Action是Redux中的概念，发出这个Action后就会找到页面所对应的model，然后做出相应的处理。如下：

componentDidMount() {
   const { dispatch } = this.props;
   dispatch({         //dispatch相当于触发一个action
     type: 'book/fetch',   //  models文件夹下book文件里面effects下面的*fetch方法
     payload: {   //  提交的参数
       id: this.props.match.params.id,
     }，
   });
 }

dispatch中的参数就是一个Action。第一个type字段由两部分组成，前半部分是model的namespace（命名空间），后半部分是该Action的处理位置，对应model中的effects（处理异步逻辑）,或reducers（处理同步逻辑）。

4,新建model文件，在model中触发指定的action

import { book} from '../services/api';

export default {
  namespace: 'book',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) { 
      const response = yield call(book, payload);  // 请求services文件夹
      yield put({      // 请求成功后 执行 reducers里面的save方法
        type: 'save',
        payload: response,
      });
    },
  },

  reducers:{
      queryList(state, action){
          //将服务器的数据刷新到页面中
         return{
              ...state,
              results:action.payload, 
         };
  },
 },
};

namespace：该字段就相当于model的索引，根据该命名空间就可以找到页面对应的model;
state：表示这个models下存储的数据，
effects：处理所有的异步逻辑，将返回结果以Action的形式交给reducer处理；
reducers：处理所有的同步逻辑，将数据返回给页面；

5,service文件夹下新建API地址
发送请求到/api/listUser这个地址，就是模仿一下后台接口的实现，对请求进行了进一步的封装。

export async function queryUser(params) {
  return request(`/api/book?${stringify(params)}`);
}

6，在目录mock文件下模拟数据，
Mock的功能就是可以在本地模拟后台的行为，

参考资料：
ant-design-pro浅析总结 https://blog.csdn.net/qq_40963664/article/details/80678884
antdpro 获取数据，触发请求到服务器 https://www.jianshu.com/p/7dd08549d450
Ant Design Pro 上手备忘录 https://segmentfault.com/a/1190000013102730?utm_source=tag-newest
使用ant design Pro开发项目的小结 https://juejin.im/post/5b4604c8f265da0f6131f27a

http://blog.poetries.top/2018/09/16/ant-design-pro/ Ant Design Pro总结篇
https://www.smwenku.com/a/5b7e83a32b7177683857c4bb/zh-cn/ 表单
https://www.cnblogs.com/xujiazheng/p/7500547.html redux的基本原理(Redux 是 JavaScript 状态容器，提供可预测化的状态管理。)
https://blog.csdn.net/u013510614/article/details/51679012 React服务器端渲染
https://github.com/dvajs/dva-example-user-dashboard 《12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)》
https://blog.csdn.net/weixin_40792878/article/details/82050726 dva学习--在组件中dispatch一个action
https://blog.csdn.net/weixin_40792878/article/details/81606792 dva学习-model的数据管理
待续>>>

Ant Design Pro V2 运用点滴 [1]

前序准备

目录结构

安装

本地开发

新建一个页面。

你可能感兴趣的:(Ant Design Pro V2 运用点滴 [1])