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

左手的ㄟ右手 2022-06-16 10:09 176阅读 0赞

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

#### 开发准备： ####

基本知识：

> 1、React [http://reactjs.cn/react/docs/getting-started-zh-CN.html][http_reactjs.cn_react_docs_getting-started-zh-CN.html]或[http://www.runoob.com/react/react-tutorial.html][http_www.runoob.com_react_react-tutorial.html]  
> 2、React on ES6 [http://babeljs.io/blog/2015/06/07/react-on-es6-plus][http_babeljs.io_blog_2015_06_07_react-on-es6-plus]  
> 3、react-router [http://www.uprogrammer.cn/react-router-cn/][http_www.uprogrammer.cn_react-router-cn]  
> 4、mockjs [http://mockjs.com/][http_mockjs.com]  
> 5、webpack [http://www.runoob.com/w3cnote/webpack-tutorial.html][http_www.runoob.com_w3cnote_webpack-tutorial.html]  
> 6、nodejs [http://www.runoob.com/nodejs/nodejs-tutorial.html][http_www.runoob.com_nodejs_nodejs-tutorial.html]

框架知识：

> 1、ant [https://ant.design/docs/react/introduce-cn][https_ant.design_docs_react_introduce-cn]  
> 2、dva [https://github.com/dvajs/dva][https_github.com_dvajs_dva]  
> 3、dva-docs [https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/getting-started.md][https_github.com_dvajs_dva-docs_blob_master_v1_zh-cn_getting-started.md]  
> 4、dva+es6 [https://github.com/dvajs/dva-knowledgemap][https_github.com_dvajs_dva-knowledgemap]

#### 项目准备 ####

> 代码托管  
> [https://coding.net/][https_coding.net]  
> 接口文档管理  
> [http://www.xiaoyaoji.com.cn][http_www.xiaoyaoji.com.cn]  
> 项目原型  
> [https://github.com/zuiidea/antd-admin][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_crm.shenxin99.com_api]  
> 其他请求地址会转发到前端开发环境：[http://localhost:8000/][http_localhost_8000] （你需先启动前端服务）

1.  测试Nginx配置文件是否正确：
    
    > nginx -t
2.  启动或重启Nginx服务：

> nginx  
> 或  
> nginx -s reload

6.浏览器中输入[http://127.0.0.1/][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

[http_reactjs.cn_react_docs_getting-started-zh-CN.html]: http://reactjs.cn/react/docs/getting-started-zh-CN.html
[http_www.runoob.com_react_react-tutorial.html]: http://www.runoob.com/react/react-tutorial.html
[http_babeljs.io_blog_2015_06_07_react-on-es6-plus]: http://babeljs.io/blog/2015/06/07/react-on-es6-plus
[http_www.uprogrammer.cn_react-router-cn]: http://www.uprogrammer.cn/react-router-cn/
[http_mockjs.com]: http://mockjs.com/
[http_www.runoob.com_w3cnote_webpack-tutorial.html]: http://www.runoob.com/w3cnote/webpack-tutorial.html
[http_www.runoob.com_nodejs_nodejs-tutorial.html]: http://www.runoob.com/nodejs/nodejs-tutorial.html
[https_ant.design_docs_react_introduce-cn]: https://ant.design/docs/react/introduce-cn
[https_github.com_dvajs_dva]: https://github.com/dvajs/dva
[https_github.com_dvajs_dva-docs_blob_master_v1_zh-cn_getting-started.md]: https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/getting-started.md
[https_github.com_dvajs_dva-knowledgemap]: https://github.com/dvajs/dva-knowledgemap
[https_coding.net]: https://coding.net/
[http_www.xiaoyaoji.com.cn]: http://www.xiaoyaoji.com.cn
[https_github.com_zuiidea_antd-admin]: https://github.com/zuiidea/antd-admin
[http_crm.shenxin99.com_api]: http://crm.shenxin99.com/api/
[http_localhost_8000]: http://localhost:8000/
[http_127.0.0.1]: http://127.0.0.1/