一、框架组成
该框架名称由来是由于后端项目也集成了前端的项目，所以起了这样一个名字，其实由我们前端角度来看，这个“全家桶”框架主要由“react + umi + dva”这三个组成，这样的话其实这套全家桶就很像ant pro这套东西了。
二、目录结构
config - - umi 配置，包含路由，构建等配置dist - - 打包输出目录
mock - - 存放mock数据相关
public - - 静态资源存放，可以在项目中图片资源路径可以直接通过src="/图片名称"输出图片
script - - 脚本目录
src - -
assets - - 资源相关
component - - 组件
layouts - - 全局布局相关组件
locales - - 多语言相关包
pages - - 页面相关
actions - - dva触发数据改变事件存放
models - - dva数据相关存放，建议使用全局model，把页面数据都放到这个目录下进行管理，这样方便查找，不要放到页面pages里
service - - 接口相关存放目录
utils - - 工具函数存放，这里建议多使用lodash里的工具函数，这里只放一些业务的工具函数
e2e - - 自动化测试相关
下图是项目中的结构图：
三、项目前端整体架构介绍
1、全局布局组成
该框架使用了嵌套式布局，在顶层路由上使用一层layout组件，然后根据路由的嵌套来输出页面，该顶层layout组件决定了网站整体的布局，下图是我们项目中用到的布局
注意：下图所示的component就是布局组件了，底下所有router的页面都会在此下面进行渲染输出
2、全局路由权限控制
本套框架中权限校验这块主要是做在了“组件渲染”这一块，而不是常见的路由跳转这一块了，我们从上面的嵌套布局里可以了解到，有一个“src/pages/Authorized”相关的，这个路由入口文件就是决定了全部组件渲染的规则了，里面的逻辑判断控制了该嵌套规则在所有组件的露出。
3、全局样式相关
在项目中我们会用到很多公用的样式或者公用的样式函数，这些css我们可以写在 src - -> global.less上，为了养成规范，每个成员开始编写可能涉及全局样式时 ，都该考虑下写在这里。
4、全局model数据层的控制
数据的交互在项目中，我们会使用到很多，如果我们数据都写在页面state上，这样管理起来不方便，而且会让页面显得很臃肿，所以我们就要使用dva来操纵和管理数据，dva其实核心还是（redux + react-router + redux-saga），其中redux就是管理数据相关了。然后就是怎么把model里的数据引入到各个页面中了，这就涉及到@connect这个语法了，这个函数可以把model里的state数据引入页面中，而页面中会通过props接收，如下：@connect(({testModel}) => ({ ...testModel))这样就可以把model目录下namespace命名为“testModel”的数据引入页面中的props了，我们就可以通过this.props.xxx来获取model下对应的state了
5、全局的请求方法
请求数据的插件是使用了dva里的fetch插件，该插件封装了get/post等请求，项目的请求封装都放在了utils - - > request.js，fetch的具体api请点击https://github.com/matthew-andrews/isomorphic-fetch。
四、相关注意点或者规范
1、ant design中推荐使用驼峰式的样式书写，如：'fontSize'2、在ant design的框架下推荐XXX.js文件与XXX.css（或XXX.less）文件放在一起，而不是使用分开的css、html、js目录分别管理不同类型的文件。这是源自react的模块化管理的思想3、........后面再写了
五、总结
由于部门现在这套框架中ant design是使用了v3版本，但现在ant4都出来了，所以在后面的规范中，可能要加强对ant这些常用公用相关的组件的业务封装，不然版本更新改起来会好多东西要改。
