针对ABCmouse的Xadmin管理端使用探究手册

简介

什么是Xadmin

• Xadmin是一个管理端的使用框架，由ImWeb提供，这次我们abcmouse为了整改所有业务的管理端（将原有的所有业务都迁移到这一个管理端），就复用了这个框架
• 首先这个框架分为三个部分
  • 公用框架代码部分（包括左侧页面menu，头部tab，table内容的新增删除位置），技术栈：dva 仓库：xadmin
  • 业务代码部分（包括对应页面的table部分，主要是对原有的table、form、操作基础上进行修改），技术栈：react（封装的xadmin框架）仓库：xadmin-edu
  • 统一处理cgi，将请求转于由java写的增删改查接口（所以，如果没有特殊要求，基本的增删改查这里就已经满足了，只要后台提供一个正确的数据源即可），技术栈：koa 仓库：xadmin-ims
• 如果没有特殊的要求，并且某一个页面的的数据均可由一张表提供，那么只要修改业务代码部分就可以满足所有需求

该框架的操作使用

新增左导航一级目录

1. 进入edu.oa.com（管理文件后台）
   
2. 点击系统设置
   
3. 点击菜单管理
4. 添加菜单
   
5. 填写完成即可，此时在左边导航栏和页面管理都会看到新建的文件夹名字，并且生成了该页面目录的id，这个id便是之后业务代码里面page下的文件夹名字
   

正常简单操作（如何进行页面管理）

条件tips:

• 一张页面的数据是由一张表完成
• 只有增删改查基本的逻辑

1. 进入左边导航页面管理，点击新建一级导航一栏的添加子页面/子目录，或者直接同一级目录一样，直接在文件夹管理后台进行操作新增
2. 配置页面名称，页面路径（此路径为id文件夹下面的页面文件夹的名字）
3. 配置数据源
   i. 进入edu.oa.com，点击系统设置
   ii. 进入数据源管理
   
   iii. 填写相关的数据库配置即可
4. 进行页面的数据源选择
   
5. 填写相关索引等字段（需要与数据库的一致），可以配置是否显现、搜索、必须、样式等等
   
6. 提交配置即可点击新增、删除、获取等等一些基本功能，基本操作在这里：
   http://new.edu.oa.com/docs/#/

本地运行

1. 将上述3个部分代码pull在本地并install
2. 根据xadmin-edu的package.json和webpack.config.js得知，该业务代码是npm run dev之后是开发环境，将page下的文件（也就是页面配置的路径）依据index打包规则，打包到build下的page，对应的index.js会打包成其文件夹名字.js以及.map文件。
   
   
3. 同样生产环境，是npm run webpack，打包在public下面
4. 关于框架代码和koa代码也是npm run dev，本地是localhost:9000，为了能够进行一系列在本地的操作，下面贴出whistle代理代码：上面是对业务代码的代理 下面是对框架代码的代理

//test.admin.abcmouse.oa.com/ims-api/getPageHocJS/ F:\abcmouse-admin\build\pages
http://test.admin.abcmouse.oa.com localhost:9000

温馨提示：

你会发现你的业务的js文件有下波浪提示Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning
解决方法：
在根目录新建tsconfig.json：

{
  "compilerOptions": {
      "experimentalDecorators": true,
      "allowJs": true
  }
}

对于业务代码的操作

条件tips:

• 想要对默认的table显示或者form显示或者表格逻辑操作有所改造
• 上述已表达了该代码基本操作的目录结构
• 关于xadmin的语言修饰符、生命周期等这里不做具体描述看文档 http://new.edu.oa.com/docs/#/

适用于复杂的操作

条件tips:

• 因为后台那边用的webapp，不是http接口，并且后台数据库并不是一张页面的数据放在一个表中，需要进行联表操作，不能直接用数据源，也不能直接用已经有的java提供的接口操作
• 对于基本操作（增删改查）无法满足
• 对于框架代码的样式还有动作逻辑有特殊要求
• 后台可以提供http接口

首先同样是按照上述配置新增页面，但是数据库的数据源配置可以设置为blank，但是这时候只改动业务代码的项目就不够用了，因为业务代码只能改动table form和table的操作，并且此时不能直接用这个框架封装的java给的接口和数据源了

关于框架代码

1. 新增
   

• 这里的添加按钮也是存于业务代码之外的，所以想要修改这里的逻辑还是要修改框架代码主要目录文件在这的index.jsx
  
• 依据它的onClick的事件showAddModal，此方法为显示弹框的函数，其中getEditDataWithDefaultValues是给form的input的默认值，executeLifeCycle这个函数是为了判断生命周期函数，clearSelection为清空函数
  
• 关于form表单所在文件在此，在AddField文件里面，可以修改表单样式
  
• 在这里可以关注下保存，是onAdd函数，通过validateFields可以验证表单的信息，重点关注下add函数，是将表单的（是否编辑、表单内容）参数传递
  
• 该add函数是通过core的index.jsx的父组件传递的,同样重点关注下this.props.onAdd函数
  
• 这个this.props.onAdd函数是TableList的父组件进行传递的，目录位置在此，上述的组件为此文件的DataTable，传递的onAdd是generateOnAddFun函数
  
  
• 在这里关注下editTableData函数，对于表单进行提交
• 当然，这里的函数是从service/api.js中引入，向koa发送请求

2. 删除
3. 获取
4. 编辑
   以上均与添加一致，找到对应的按钮，通过onClick的事件，层层向上获取相应的函数
5. 关于头部的tab所在目录如下

6. 关于左边导航的目录如下：

7. 关于dva 见相关文档，核心思想是将redux-saga和普通修改数据函数以及监听、数据data合在一起，放在models里面 https://dvajs.com/guide/

关于xadmin-ims(koa后台)代码

• 主要业务的router接口如下
  
  对应的增删改查文件位置目录如下：
  
  以添加为例，可以在此进行进一步的封装兼容