一、Ant Design Pro 环境准备
写在前面的话
- 安装
- 安装git 和 node环境
- 下载项目
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
- 安装依赖
npm install
package.json中dependencies和devDependencies的部分都会被安装，区别在于前者用于生产环境，后者用于开发环境
-g 表示全局安装，通常用于安装脚手架等工具
–save(-s) 表示本地安装，会被加至dependencies部分
–save-dev 表示本地安装，会被加至devDependencies部分
什么都不加也会安装，但是不会加至package.json中
- 启动项目
npm start
npm 是干什么的
启动完成后会自动打开浏览器访问 http://localhost:8000
-
目录结构目录结构
二、 数据流转
view-->model-->services
三、路由配置
- 路由配置文件
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/,否则找不到
- 服务器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
五、数据流转完整示例
具体可参考：
-
view 绑定modelsimage.png
//@connect 连接了名字为pmall1的命名空间，和loading插件
//pmall1为引用的namespace为login中的state对象
//1.将实体pmall1中的state数据绑定到props
//2.通过loading将models的list的key对应的value读取出来。赋值给loading，以方便使用
-
view调用model
示例文件：src/pages/Pmall/Orderclear.js
view调用model -
model调用services
示例文件：src/models/orderclear.js
model调用services -
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*/}
