ant+dva Ract系统前端开发教程

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系统

1. 安装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

1. 查看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;}

1. 在/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/ （你需先启动前端服务）

1. 测试Nginx配置文件是否正确：

   nginx -t

2. 启动或重启Nginx服务：

nginx
或
nginx -s reload

6.浏览器中输入http://127.0.0.1/ 访问

Windows系统

1. 下载nginx

2. 在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/;        }    }}

1. 启动Nginx服务：

先进入nginx安装目录（或自己配置环境变量）

nginx -c conf\kdrp.conf

1. 停止Nginx服务：

nginx -s stop 或taskkill /F /IM nginx.exe > nul