一、Ant Design Pro 環(huán)境準(zhǔn)備

寫在前面的話

1. 技術(shù)?；?ES2015+、React、UmiJS、dva、g2 和 antd
2. 參考文檔

• 安裝

1. 安裝git 和 node環(huán)境
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的部分都會被安裝，區(qū)別在于前者用于生產(chǎn)環(huán)境，后者用于開發(fā)環(huán)境
-g 表示全局安裝，通常用于安裝腳手架等工具
–save(-s) 表示本地安裝，會被加至dependencies部分
–save-dev 表示本地安裝，會被加至devDependencies部分
什么都不加也會安裝，但是不會加至package.json中

4. 啟動項目

npm start

npm 是干什么的
啟動完成后會自動打開瀏覽器訪問 http://localhost:8000

5. 目錄結(jié)構(gòu)
   目錄結(jié)構(gòu)

二、 數(shù)據(jù)流轉(zhuǎn)

view-->model-->services

數(shù)據(jù)流轉(zhuǎn)

三、路由配置

1. 路由配置文件

config/router.config.js

路由示例

src/locales/zh-CN/menu.js

文案映射示例

四、接入其他項目

1.. 修改前端項目的配置文件(config/config.js)，指明服務(wù)器上靜態(tài)文件的位置

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

2.打包本地前端項目,生成dist文件夾

npm run build

3.拷貝打包好的文件夾dist下文件到服務(wù)器上

注意：將文件放置在服務(wù)器的{$root}/static/innovate/antdesign/,否則找不到

4. 服務(wù)器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至服務(wù)器的下列位置

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

6.重啟服務(wù)器上nginx

五、數(shù)據(jù)流轉(zhuǎn)完整示例

具體可參考：

1. view 綁定models
   image.png

//@connect 連接了名字為pmall1的命名空間，和loading插件
//pmall1為引用的namespace為login中的state對象
//1.將實體pmall1中的state數(shù)據(jù)綁定到props
//2.通過loading將models的list的key對應(yīng)的value讀取出來。賦值給loading，以方便使用

2. view調(diào)用model
   

   示例文件：src/pages/Pmall/Orderclear.js
   view調(diào)用model

3. model調(diào)用services
   

   示例文件：src/models/orderclear.js
   model調(diào)用services

4. services調(diào)用API
   

   示例文件：src/services/orderclear.js
   services層調(diào)用云圖api

核心概念

• State：一個對象，保存整個應(yīng)用狀態(tài)
• View：React 組件構(gòu)成的視圖層
• Action：一個對象，描述事件
• connect 方法：一個函數(shù)，綁定 State 到 View
• dispatch 方法：一個函數(shù)，發(fā)送 Action 到 State

State 和 View

• State 是儲存數(shù)據(jù)的地方，收到 Action 以后，會更新數(shù)據(jù)。
• View 就是 React 組件構(gòu)成的 UI 層，從 State 取數(shù)據(jù)后，渲染成 HTML 代碼。只要 State 有變化，View 就會自動更新。

Action
Action 是用來描述 UI 層事件的一個對象。

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

connect 方法
connect 是一個函數(shù)，綁定 State 到 View。

import { connect } from 'dva';

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

connect 方法返回的也是一個 React 組件，通常稱為容器組件。因為它是原始 UI 組件的容器，即在外面包了一層 State。
connect 方法傳入的第一個參數(shù)是 mapStateToProps 函數(shù)，mapStateToProps 函數(shù)會返回一個對象，用于建立 State 到 Props 的映射關(guān)系。
dispatch 方法
dispatch 是一個函數(shù)方法，用來將 Action 發(fā)送給 State。

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

dispatch 方法從哪里來？被 connect 的 Component 會自動在 props 中擁有 dispatch 方法。

參考資料

• react是什么
• 前端代碼注釋

{/*xxxx*/}

• form 表單
• 修飾器
• 更新表格
• dva