ant+dva Ract系統前端開發教程
開發準備：
基本知識：
1、React http://reactjs.cn/react/docs/getting-started-zh-CN.html或http://www.runoob.com/react/react-tutorial.html
2、React on ES6 http://babeljs.io/blog/2015/06/07/react-on-es6-plus
3、react-router http://www.uprogrammer.cn/react-router-cn/
4、mockjs http://mockjs.com/
5、webpack http://www.runoob.com/w3cnote/webpack-tutorial.html
6、nodejs http://www.runoob.com/nodejs/nodejs-tutorial.html
框架知識：
1、ant https://ant.design/docs/react/introduce-cn
2、dva https://github.com/dvajs/dva
3、dva-docs https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/getting-started.md
4、dva+es6 https://github.com/dvajs/dva-knowledgemap
項目準備
代碼託管
https://coding.net/
接口文檔管理
http://www.xiaoyaoji.com.cn
項目原型
https://github.com/zuiidea/antd-admin
開發及構建
目錄結構
├── /mock/ # 數據mock的接口文件
├── /dist/ # 項目輸出目錄
├── /src/ # 項目源碼目錄
│ ├── /static/ # 靜態文件 image……
│ ├── /components/ # 項目組件
│ ├── /routes/ # 路由組件
│ ├── /models/ # 數據模型
│ ├── /services/ # 數據接口
│ ├── /utils/ # 工具函數
│ ├── route.js # 路由配置
│ ├── index.js # 入口文件
│ └── index.html
├── package.json # 項目信息
└── proxy.config.js # 數據mock配置快速開始
開發
進入目錄安裝依賴: npm i 或者 yarn install
編譯運行：npm run dev # 使用mock攔截請求，數據存儲在localStroge裏；否則請求開發環境接口。
打開 http://localhost 或者 127.0.0.1構建
npm run build #將會生成dist目錄注意事項
* 生產環境中，已有數據接口，請將src/utils/index.js第四行 require(‘./mock.js’)註釋
* 開發環境中，如再mock目錄新增文件，請在src/utils/mock.js第二行的mockData數組中添加
* 開發環境中，如需要調試開發環境接口，在mock中將api/xxx/xx/的前面加上off/
* 如需重寫antd樣式配置，請修改src/theme.js
* 項目配置文件在src/utils/config.js
* 如需重寫異步請求函數，請修改src/utils/request.js （關於爲什麼使用robe-ajax而不是fetch：在一個無服務器的環境中模擬數據請求，Mock不能攔截Fetch，只能攔截XHR，所以我選了一個類似jquery Ajax的庫robe-ajax）
那些年遇到的坑~
問題：手動操作更改組件狀態後，同跳由跳轉傳參或重新點擊菜單同路由，組件狀態無法自動初始化，state值不重置
解決方案：state裏添加resetFlag標識，組件裏添加reset()方法，根據resetFlag標識進行重置
本地環境配置nginx，與開發聯調
目的：前端本地開發環境聯調測試服務器上的後端，Cookie不能跨域問題
Mac系統
- 安裝Nginx：
brew install nginx
安裝目錄：/usr/local/Cellar/nginx/
配置文件路徑：/usr/local/etc/nginx
日誌位置：
/usr/local/var/log/nginx/access.log
/usr/local/var/log/nginx/error.log
- 查看Nginx配置文件：/usr/local/etc/nginx/
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include /usr/local/etc/nginx/conf.d/*.conf;
}- 在/usr/local/etc/nginx/conf.d/目錄下新建一個配置文件kdrp.conf：
觀察上面include的目錄，有的可能不是conf.d, 是servers目錄
server {
listen 80;
server_name localhost;
charset utf-8;
client_max_body_size 75M;
location ^~ /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://crm.shenxin99.com/api/;
}
location / {
proxy_pass http://localhost:8000/;
}
}以/api/開頭的請求地址會轉發到測試服務器上 http://crm.shenxin99.com/api/
其他請求地址會轉發到前端開發環境：http://localhost:8000/ （你需先啓動前端服務）
測試Nginx配置文件是否正確：
nginx -t
啓動或重啓Nginx服務：
nginx
或
nginx -s reload
6.瀏覽器中輸入http://127.0.0.1/ 訪問
Windows系統
下載nginx
在nginx安裝目錄的conf目錄下新建一個配置文件kdrp.conf：
worker_processes 1;
error_log logs/error-debug.log info;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost 127.0.0.1 ;
charset utf-8;
client_max_body_size 75M;
location ^~ /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://crm.shenxin99.com/;
}
location / {
proxy_pass http://localhost:8000/;
}
}
}- 啓動Nginx服務：
先進入nginx安裝目錄（或自己配置環境變量）
nginx -c conf\kdrp.conf- 停止Nginx服務：
nginx -s stop
或
taskkill /F /IM nginx.exe > nul