简介
什么是Xadmin
- Xadmin是一个管理端的使用框架,由ImWeb提供,这次我们abcmouse为了整改所有业务的管理端(将原有的所有业务都迁移到这一个管理端),就复用了这个框架
- 首先这个框架分为三个部分
- 公用框架代码部分(包括左侧页面menu,头部tab,table内容的新增删除位置),技术栈:dva 仓库:xadmin
- 业务代码部分(包括对应页面的table部分,主要是对原有的table、form、操作基础上进行修改),技术栈:react(封装的xadmin框架)仓库:xadmin-edu
- 统一处理cgi,将请求转于由java写的增删改查接口(所以,如果没有特殊要求,基本的增删改查这里就已经满足了,只要后台提供一个正确的数据源即可),技术栈:koa 仓库:xadmin-ims
- 如果没有特殊的要求,并且某一个页面的的数据均可由一张表提供,那么只要修改业务代码部分就可以满足所有需求
该框架的操作使用
新增左导航一级目录
- 进入edu.oa.com(管理文件后台)
- 点击系统设置
- 点击菜单管理
- 添加菜单
- 填写完成即可,此时在左边导航栏和页面管理都会看到新建的文件夹名字,并且生成了该页面目录的id,这个id便是之后业务代码里面page下的文件夹名字
正常简单操作(如何进行页面管理)
条件tips:
- 一张页面的数据是由一张表完成
- 只有增删改查基本的逻辑
- 进入左边导航页面管理,点击新建一级导航一栏的添加子页面/子目录,或者直接同一级目录一样,直接在文件夹管理后台进行操作新增
- 配置页面名称,页面路径(此路径为id文件夹下面的页面文件夹的名字)
- 配置数据源
i. 进入edu.oa.com,点击系统设置
ii. 进入数据源管理
iii. 填写相关的数据库配置即可 - 进行页面的数据源选择
- 填写相关索引等字段(需要与数据库的一致),可以配置是否显现、搜索、必须、样式等等
- 提交配置即可点击新增、删除、获取等等一些基本功能,基本操作在这里:
http://new.edu.oa.com/docs/#/
本地运行
- 将上述3个部分代码pull在本地并install
- 根据xadmin-edu的package.json和webpack.config.js得知,该业务代码是npm run dev之后是开发环境,将page下的文件(也就是页面配置的路径)依据index打包规则,打包到build下的page,对应的index.js会打包成其文件夹名字.js以及.map文件。
- 同样生产环境,是npm run webpack,打包在public下面
- 关于框架代码和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给的接口和数据源了
关于框架代码
- 新增
- 这里的添加按钮也是存于业务代码之外的,所以想要修改这里的逻辑还是要修改框架代码主要目录文件在这的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发送请求
- 删除
- 获取
- 编辑
以上均与添加一致,找到对应的按钮,通过onClick的事件,层层向上获取相应的函数 - 关于头部的tab所在目录如下
6. 关于左边导航的目录如下:
7. 关于dva 见相关文档,核心思想是将redux-saga和普通修改数据函数以及监听、数据data合在一起,放在models里面 https://dvajs.com/guide/
关于xadmin-ims(koa后台)代码
- 主要业务的router接口如下
对应的增删改查文件位置目录如下:
以添加为例,可以在此进行进一步的封装兼容