Ant design Pro 简纪

一、Ant Design Pro 环境准备

写在前面的话

1. 技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd
2. 参考文档

• 安装

1. 安装git 和 node环境
2. 下载项目

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

3. 安装依赖

npm install

package.json中dependencies和devDependencies的部分都会被安装，区别在于前者用于生产环境，后者用于开发环境
-g 表示全局安装，通常用于安装脚手架等工具
–save(-s) 表示本地安装，会被加至dependencies部分
–save-dev 表示本地安装，会被加至devDependencies部分
什么都不加也会安装，但是不会加至package.json中

4. 启动项目

npm start

npm 是干什么的
启动完成后会自动打开浏览器访问 http://localhost:8000

5. 目录结构 目录结构

二、 数据流转

view-->model-->services

数据流转

三、路由配置

1. 路由配置文件

config/router.config.js

路由示例
心仪的图标可以从这里选哦
2.路由&文案映射

src/locales/zh-CN/menu.js

文案映射示例

四、接入其他项目

1.. 修改前端项目的配置文件(config/config.js)，指明服务器上静态文件的位置

publicPath: 'http://xx.xx.xxx.xxx:8995/static/innovate/antdesign/',

2.打包本地前端项目,生成dist文件夹

npm run build

3.拷贝打包好的文件夹dist下文件到服务器上

注意：将文件放置在服务器的{$root}/static/innovate/antdesign/,否则找不到

4. 服务器nginx配置修改

vim /home/xxx/xxx/xxx/webserver/conf/vhost/php.conf 
location ~* "^/innovation/main" {
        root /home/xxx/xxx/xxx/webroot;
        index index.php;
        fastcgi_pass    $php_upstream;
        include         fastcgi.conf;
        rewrite ^/innovate([^/.]*)(/[^\?]*)?((\?.*)?)$ /innovate/index.php$1$2 break;
    }

5.修改二级目录入口

路径：vim /home/bae/xxx/xxx/template/commontpl/index.tpl

修改前
修改后

5.放置dist中index.xml至服务器的下列位置

/home/xxx/xxxx/xxxxx/template/commontpl/innovate

6.重启服务器上nginx

五、数据流转完整示例

具体可参考：

1. view 绑定models image.png

//@connect 连接了名字为pmall1的命名空间，和loading插件
//pmall1为引用的namespace为login中的state对象
//1.将实体pmall1中的state数据绑定到props
//2.通过loading将models的list的key对应的value读取出来。赋值给loading，以方便使用

2. view调用model
   

   示例文件：src/pages/Pmall/Orderclear.js view调用model

3. model调用services
   

   示例文件：src/models/orderclear.js model调用services

4. services调用API
   

   示例文件：src/services/orderclear.js services层调用云图api

核心概念

• State：一个对象，保存整个应用状态
• View：React 组件构成的视图层
• Action：一个对象，描述事件
• connect 方法：一个函数，绑定 State 到 View
• dispatch 方法：一个函数，发送 Action 到 State

---

State 和 View

• State 是储存数据的地方，收到 Action 以后，会更新数据。
• View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

Action
Action 是用来描述 UI 层事件的一个对象。

{
  type: 'click-submit-button',
  payload: this.form.data
}

connect 方法
connect 是一个函数，绑定 State 到 View。

import { connect } from 'dva';

function mapStateToProps(state) {
  return { todos: state.todos };
}
connect(mapStateToProps)(App);

connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。
dispatch 方法
dispatch 是一个函数方法，用来将 Action 发送给 State。

dispatch({
  type: 'click-submit-button',
  payload: this.form.data
})

dispatch 方法从哪里来？被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。

参考资料

• react是什么
• 前端代码注释

{/*xxxx*/}

• form 表单
• 修饰器
• 更新表格
• dva