接口平台设计方案 - xinqilela/- GitHub Wiki

1.命名规范 目录名、方法名、变量名：小驼峰命名 类名、组件名：大驼峰命名 2.目录结构 ├─ build/ # Webpack 配置目录 ├─ dist/ # build 生成的生产环境下的项目 ├─ mock/ # 本地数据存放的位置 ├─ src/ # 源码目录 │ ├─ assets/ # 放置需要经由 Webpack 处理的静态文件（img、css等） │ ├─ components/ # 各个组件 │ │ ├─ header/ │ │ │ ├─ Header.jsx # 网站icon+顶部导航 │ │ ├─ nav/ │ │ │ ├─ TopNav.jsx # 顶部导航 │ │ ├─ commons/ │ │ │ ├─ InputItem.jsx # Input组件 │ │ │ ├─ SelectItem.jsx # Select组件 │ │ │ ├─ ContentTitle.jsx # SearchArea+新建按钮 │ │ │ ├─ SearchArea.jsx # 搜索区域组件 │ │ │ ├─ Crumbs.jsx # 面包屑组件 │ │ │ ├─ Editor.jsx # 富文本编辑器组件 │ │ ├─ contents/ │ │ │ ├─ interfaceManager/ │ │ │ │ ├─ commons/ │ │ │ │ │ ├─ UpdateInterface.jsx # 新建（或编辑）接口 │ │ │ │ │ ├─ UpdateDataQueryVariable.jsx # 新建(或编辑)接口->增加（或编辑）变量 │ │ │ │ │ ├─ UpdateFileDownLoadVariable.jsx # 新建(或编辑)接口->FileDownLoad增加（或编辑）变量 │ │ │ │ ├─ InterfaceList.jsx # 接口列表 │ │ │ │ ├─ AddInterface.jsx # 新建接口 [引用UpdateInterface.jsx] │ │ │ │ ├─ AddDataQueryVariable.jsx # 新建接口->增加变量 [引用UpdateDataQueryVariable.jsx] │ │ │ │ ├─ AddFileDownLoadVariable.jsx # 新建接口->FileDownLoad增加变量
[引用UpdateFileDownLoadVariable.jsx]
│ │ │ │ ├─ InterfaceDocument.jsx # 接口文档 │ │ │ │ ├─ EditInterface.jsx # 编辑接口 [引用UpdateInterface.jsx] │ │ │ │ ├─ EditDataQueryVariable.jsx # 编辑接口->编辑变量 [引用UpdateDataQueryVariable.jsx] │ │ │ ├─ userManager/ │ │ │ │ ├─ commons/ │ │ │ │ │ ├─ UpdateUser.jsx # 新建（或编辑）用户 │ │ │ │ ├─ UserList.jsx # 用户列表 │ │ │ │ ├─ AddUser.jsx # 添加用户 [引用UpdateUser.jsx] │ │ │ │ ├─ EditUser.jsx # 编辑用户 [引用UpdateUser.jsx] │ ├─ redux/ # Redux │ │ ├─ actions/ # ACTION │ │ │ ├─ interfaceManager/ │ │ │ │ ├─ interfaceList.js │ │ │ │ ├─ addInterface.js │ │ │ │ ├─ editInterface.js │ │ │ │ ├─ addDataQueryVariable.js │ │ │ │ ├─ editDataQueryVariable.js │ │ │ │ ├─ addFileDownLoadVariable.js │ │ │ │ ├─ interfaceDocument.js │ │ │ ├─ userManager/ │ │ │ │ ├─ userList.js │ │ │ │ ├─ addUser.js │ │ │ │ ├─ editUser.js │ │ ├─ reducers/ # REDUCER │ │ │ ├─ index.js │ │ │ ├─ interfaceManager/ │ │ │ │ ├─ interfaceList/ │ │ │ │ │ ├─ TableColumns.js │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ interfaceList.js │ │ │ │ ├─ updateInterface/ │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ updateInterface.js │ │ │ │ ├─ updateDataQueryVariable/ │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ updateDataQueryVariable.js │ │ │ │ ├─ updateFileDownLoadVariable/ │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ updateFileDownLoadVariable.js │ │ │ │ ├─ interfaceDocument/ │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ updateFileDownLoadVariable.js │ │ │ ├─ userManager/ │ │ │ │ ├─ userList/ │ │ │ │ │ ├─ TableColumns.js │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ userList.js │ │ │ │ ├─ updateUser/ │ │ │ │ │ ├─ Result.js │ │ │ │ │ ├─ Param.js │ │ │ │ │ ├─ updateUser.js │ │ ├─ store/ # STORE │ ├── routes/ # 路由（ROUTE） │ ├── services/ # 服务（SERVICE，用于统一管理 XHR 请求） │ │ ├─ xhr/ │ │ │ ├─ interfaceManager/ │ │ │ │ ├─ InterfaceListService.js │ │ │ │ ├─ UpdateInterfaceService.js │ │ │ │ ├─ UpdateDataQueryVariableService.js │ │ │ │ ├─ UpdateFileDownLoadVariableService.js │ │ │ │ ├─ InterfaceDocumentService.js │ │ │ ├─ userManager/ │ │ │ │ ├─ UserListService.js │ │ │ │ ├─ UpdateUserService.js │ ├── utils/ # 工具库（UTIL） │ ├── app.js # 启动文件 │ ├── index.html # 静态基页 ├── static/ # 放置无需经由 Webpack 处理的静态文件 ├── .babelrc # Babel 转码配置 ├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹） ├── .eslintrc # ESLint 配置 ├── package.json # npm依赖包配置 3.路由设计 /interfaceManager/interfaceList InterfaceList.jsx /interfaceManager/addInterface AddInterface.jsx /interfaceManager/addInterface/addDataQueryVariable AddDataQueryVariable.jsx /interfaceManager/addInterface/addFileDownLoadVariable AddDataQueryVariable.jsx /interfaceManager/addInterface/interfaceDocument InterfaceDocument.jsx /interfaceManager/editInterface/:id EditInterface.jsx /interfaceManager/editInterface/editDataQueryVariable/:id EditDataQueryVariable.jsx /userManager/userList UserList.jsx /userManager/addUser AddUser.jsx /userManager/editUser/:id EditUser.jsx 4.公共组件 InputItem.jsx Input组件 SelectItem.jsx Select组件 TableTitle.jsx SearchArea+新建按钮（或者面包屑导航） SearchArea.jsx 搜索区域组件 Crumbs.jsx 面包屑组件 5.公共方法 getCrumbsName() 取得当前页面的面包屑导航名称 6.组件划分 见ppt 7.富文本编辑器 react-lz-editor（https://github.com/leejaen/react-lz-editor） 8.时间预估： 项目整体搭建：0.5 公共组件：0.5 InterfaceList：1 AddInterface,EditInterface: 1.5 AddDataQueryVariable,EditDataQueryVariable:1.5 AddFileDownLoadVariable,EditFileDownLoadVariable:0.5 InterfaceDocument:1 UserList,AddUser,AddUser:1.5 showInterfaceDocument:1