# API数据源报表制作 ### 一、数据源报表制作、新建数据库表(以student学生表为示例) #### 1、数据库表结构 ![](https://static.jeecg.com/upload/test/dataSource_1604995757499.jpg) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、新增几条数据 ![](https://img.kancloud.cn/84/ce/84ce8d07a9453c454400a80bc6745f10_882x378.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、新增后台api接口(必须为json格式) ``` 注意:必须为图一所示的,并且数据不为空,且用data包裹起来,否则api解析不出来字 段 如果需要分页则需要传total(总页数),count(总条数)如图二,如果要想在浏览页面看到分页效果,需要数据大于10条 ``` ![](https://img.kancloud.cn/1e/22/1e22fa5a70e77cde990bf3cea62081c9_466x383.png) :-: 图一 ![](https://img.kancloud.cn/28/95/28958c771067c3224ff7cf12f301ac10_371x307.png) :-: 图二 ### 二、新建API报表 #### 1、点击头像,鼠标放到新建即可显示 ![](https://img.kancloud.cn/bb/9f/bb9f2c8bc4d934bcd6fef92ae83d41fc_1861x788.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、点击新建进入此页面 ![](https://img.kancloud.cn/16/33/163358cfb722623bf8d0afb302d163a0_1920x908.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、点击数据集管理(API数据集) ![](https://img.kancloud.cn/83/d3/83d3d97cb45ebcbc26f04d0b5686396c_383x464.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 4、进入页面后,填写编码、名称、Api地址、请求方式 ![](https://img.kancloud.cn/ce/93/ce938cd96dc15d2398c32e7dfa13ec6e_1898x420.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) * 编码:API数据源的标识; * 名称:API数据源的名称; * 请求方式:分为get和post;根据后台的请求类型来选择(本章get); * 是否分页:如果有多页预览和打印,需要勾选“是否分页”; * Api地址:配置的API数据源地址(可以为本地和线上,但必须是JSON类型,如:{"data":"[{}]"}); ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 5、填写完成后点击API解析会出现下图(动态报表配置明细) ![](https://img.kancloud.cn/ce/93/ce938cd96dc15d2398c32e7dfa13ec6e_1898x420.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) * 字段名:数据库表中的字段名称 * 排序:显示到第几位,如1排在第一位 * 字段文本:该字段对应的文本(如 name 学生名称) * 类型:数据库表地段类型 ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 6、点击确定返回页面,数据集中下面会有我们刚才创建的内容 ![](https://img.kancloud.cn/0f/a2/0fa2b3f82dff75b724aaf2ef30c5f606_287x338.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 三、填写数据信息、保存浏览 #### 1、填写标题 ![](https://img.kancloud.cn/4e/0b/4e0b26190b856dae2e326151579185bb_1920x903.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、文本内容可将数据拖拽 ![](https://img.kancloud.cn/c0/c2/c0c28ec6a43866e6a700ee7da5a9c941_1920x903.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、保存预览 ![](https://img.kancloud.cn/26/c1/26c15ec5988b12559aa3447d80e2085f_1617x844.png) ![](https://img.kancloud.cn/1c/bf/1cbf54f958f0615dc66c2fe7ad53c0bc_956x507.png) #### 4、分组预览 1)点击班级下面所在表格进行分组 ![](https://img.kancloud.cn/85/d0/85d0b7ecf1155ece9de651f143d3e76c_1601x853.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 2)保存预览 ![](https://img.kancloud.cn/6e/05/6e05d0af0eef8e980ae22170fb326dfa_982x455.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 四、打印、导出 #### 1、打印 打印区域和纸张设置 ![](https://img.kancloud.cn/c0/44/c044fd8a31ba778342bdf835c06c0ce1_989x502.png) 点击“打印”按钮,选择“打印当前屏”或“打印全部”,进入打印预览界面 * 当前页:是我们当前屏幕看见的数据 * 全部:即为全部数据 ![](https://img.kancloud.cn/7e/15/7e15f8e7d79738f02e884c986d269429_301x244.png) ![](https://img.kancloud.cn/ac/7e/ac7ed93512d1f80adcb59d9ddb1fc550_1329x895.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、导出(包含excel和pdf) 点击“导出”按钮,选择“导出excel”或“导出pdf”,可将表单数据导出相应形式; ![](https://img.kancloud.cn/c1/ff/c1ff18462d80eee9f5a8e48be055b1b0_297x222.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 五、菜单配置 #### 1、复制浏览器的链接 ![](https://img.kancloud.cn/a6/39/a6391a79ccae7cdb56cd13c13fb683db_898x576.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、在系统管理菜单管理进行配置 ![](https://img.kancloud.cn/ab/a4/aba41c984395cbedc5697cea3d5e7c9a_329x953.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、点击新增按钮填写信息 1)如果是二级菜单,一级菜单应如下图配置 ``` 注意: * 前段组件必须按照格式填写 layouts/RouteView * 菜单路径必须为/**(本章/test),且不能重复 * 是否为路由菜单:是 ``` ![](https://img.kancloud.cn/71/8b/718bccc8c227f651da8d341a02257b49_864x883.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 2)如果是二级菜单,这里应配置子菜单,否则为一级菜单 ``` 注意: * 前段组件必须按照格式填写 layouts/IframePageView * 用{{ window._CONFIG['domianURL'] }}代替IP地址、端口号和项目名称 * 是否为路由菜单:是 ``` ![](https://img.kancloud.cn/58/76/58767100721e4ac26130fd441f850bf1_852x671.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 4、角色授权 路径:在系统管理->角色授权找到自己对应的角色,鼠标放到更多->授权 勾选刚才创建的菜单 ![](https://img.kancloud.cn/5b/29/5b298cc0e610b06f1123bdab1b37a7d6_810x223.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 刷新页面即可看见点击菜单 ![](https://img.kancloud.cn/eb/aa/ebaa136afd449971e99a957fa1fe884a_1145x801.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png)