一个简单的管理后台-优快云博客

1。前言

作为一个dba，经常遇到需要帮同事客户拉数据，导入导出数据的需求，如果是一些一次性的比较个性化的就没办法，但如果是一些很频繁的逻辑一样的数据就比较浪费时间，每个查询都让开发去写一个前端页面也比较困难，只能自己想办法了。想到自己第一家公司的一位大佬写过一个通用的管理后台可以通过简单的配置把数据库存储过程的调用配置到前端页面上，就想着自己也可以写一个，再扩展一下可以把webapi的调用也做成可配置的，可以节省自己很多重复劳动的工作量。

2。环境

先贴一下我的代码文件链接

链接：https://share.weiyun.com/HLnDTiC8 密码：fynv7m

前端用的vue，对应的helper/dist目录，需要发布到iis，端口我用的是9001

后端用的.netcore，对应的helper/publish目录,需要发布到iis，端口我用的是9002

数据库我用的mysql，目前的代码只支持mysql，如果有朋友需要其他数据库的可以找我要源代码自行修改。对应的helper/table.sql文件，安装好mysql后创建一个库，然后执行这个sql文件创建好表和存储过程。

前端有一个配置文件helper/dist/static/config.js，里面有个ApiUrl: "http://localhost:9002"对应的是调用后端webapi的地址，如果后端webapi配置的端口不是9002就需要修改这个地方。

后端有一个配置文件helper/publish/appsettings.json，里面有个DataSource配置的是mysql数据库的连接字符串，根据自己安装的数据库配置来修改。

3。配置存储过程或webapi

3.1配置调用存储过程

首先配置一下mysql数据库的连接字符串表，这个表的作用是配置存储过程属于哪个实例的。

对应的表是helperhost，字段是connectstring，这个字段是加密的

加密方式：to_base64(AES_ENCRYPT('Data Source=localhost;Port=3306;Initial Catalog=helper;Persist Security Info=True;User ID=root;Password=Hello123;allowLoadLocalInfile=true;',from_base64('zx2ym8hu5iop3cj6rd7cvb==')))

解密方式：AES_DECRYPT(from_base64('REOi4Ug4o9GR4vTC0PG5G3uqxvWRi0kLBnDpXO24HWx/nIfbQcgNclM6L6BMcaANnVencvDkcQO4
ocKWDvW+31DhQns3F4J5R0LfWda8C7UAl4LzfOUpwaIVqSMsFWxVSz+3Z0F+RcxH5I2SZv7T9w=='),from_base64('zx2ym8hu5iop3cj6rd7cvb=='))

标红部分是需要加密/解密的内容，按实际情况替换

假设所有的环境都是在一台服务器上，比如在本地机器，那么helperhost只需要配置本地机器上的数据库的连接字符串就可以了，如果需要调用其他机器上的数据库的存储过程就需要增加一条配置的记录。

然后是配置存储过程。对应的表是helpercategory，字段对应的解释如下

categoryname用来展示的功能名字

spname存储过程名字

type功能枚举，1表示存储过程，3表示webapi

hostid关联helperhost表的id，表示配置的存储过程是哪个数据库的

然后是配置存储过程的参数。对应的表是helperparam，字段对应的解释如下

categoryid关联helpercategory表的id，表示配置的参数是哪个存储过程的

paramname用来展示的参数的名字

paramtype参数类型，int表示是数值类型，在调用的时候不需要带引号，string表示字符串类型，在调用的时候需要带引号

placeholder展示参数的时候的说明文本

param_inputtype参数控件类型，input输入框，upload导入框，datetime日期，select下拉列表，select_dynamic动态下拉列表

param_selectlist下拉列表选项，和param_inputtype字段配合使用，如果param_inputtype配置的select，那么param_selectlist配置的是固定的选项，示例如下[{"key":"大陆","value":"CN"},{"key":"香港","value":"HK"}],其中key是页面展示的名字，value是调用存储过程传入的内容。如果param_inputtype配置的select_dynamic,那么param_selectlist配置的是动态的选项，示例如下select concat('[',GROUP_CONCAT('{"key":"',categoryname,'","value":"',spname,'"}'),']') from helpercategory ，可以通过sql语句动态获取下拉列表的选项

到此存储过程就配置好了，接下来需要配置前端页面的账号和权限。

账号对应的表是helperuserinfo，pwd是密码，使用的md5加密方式

权限对应的表是helperuserauthority，字段对应的解释如下

userid关联helperuserinfo的id

helpercategoryid关联helpercategory表的id

到此一个调用存储过程的配置就好了。举个实际的例子如下

创建一个测试的存储过程，代码如下

create PROCEDURE sp_test20230921(id int)
begin 
	select id;
end

将存储过程配置到相应的表

INSERT INTO `helpercategory` (id,`categoryname`, `spname`, `type`, `hostid`) 
VALUES (1,'测试存储过程', 'sp_test20230921', '1', '1');
INSERT INTO `helperparam` (`categoryid`, `paramname`, `paramtype`, `placeholder`, `param_inputtype`, `param_selectlist`) 
VALUES ('1', '输入的id', 'int', '', 'input', NULL);
INSERT INTO `helperuserinfo` (`id`, `loginname`, `pwd`) 
VALUES ('1', 'helper', md5('helper'));
INSERT INTO `helperuserauthority` (`userid`, `helpercategoryid`) 
VALUES ('1', '1');

然后在浏览器登录前端页面，地址是http://localhost:9001/（这里假设配置的端口和我的一样）

显示的是登录页面如下

输入helperuserinfo表配置的账号密码点击登录进入功能页面如下

点击测试存储过程，输入参数1，点击执行，获取调用存储过程的结果如下

获取结果后可以点击下载结果可以得到excel文件。可以在输入参数后点击直接下载结果，这样可以不用在页面展示结果直接下载excel文件。到这里一个完整的配置存储过程的流程就完成了。

3.2配置调用webapi

对应的表是helpercategory，字段对应的解释如下

categoryname用来展示的功能名字

spname表示webapi的地址

type功能枚举，1表示存储过程，3表示webapi

methodtype表示POST和GET(目前只支持这两个)

body表示调用的webapi的body，json格式

header表示调用的header，示例[{"name":"token","value":"70c66c3f-d82d-496b-a5a2-98b8a0338a87"},{"name":"userid","value":"1"}]

templeexcel表示excel文件模板路径，在调用上传文件并调用存储过程入库的webapi的时候会用到，后面单独写一个章节说明

extralstr表示在调用webapi之前要执行的javascript脚本，可以用来替换一些动态的不需要用户输入的参数

extralstr_afterinterface表示调用webapi之后要执行的javascript脚本，用来将webapi的返回转换成页面能够展示的格式

hostid关联helperhost表的id，会影响helperparam表中配置的动态下拉列表的参数从哪台数据库获取

然后是配置参数，表是helperparam，和配置存储过程的参数类似的，有一个要注意的地方是参数名字和webapi里面配置的替换的名字要一致，在后面实例会说明

然后是配置权限，和存储过程配置权限一样的

接下来讲一个实例。以调用我发的这个前端页面调用后端登录接口为例。

INSERT INTO `helpercategory` (`id`, `categoryname`, `spname`, `type`, `methodtype`, `body`, `header`, `templeexcel`, `extralstr`, `extralstr_afterinterface`, `hostid`) 
VALUES ('2', '测试webapi', 'http://localhost:9002/api/my/Login?user=$账号$&password=$密码$', '3', 'GET', '', '[]', NULL, '', 'if (res.data.status === 1000) {\r\n	if (JSON.parse(res.data.obj).status === 1000) {\r\n		this.resultlist = [[JSON.parse(res.data.obj)]]\r\n	} else {\r\n		this.resultlist = [[JSON.parse(res.data.obj)]]\r\n	}\r\n}', '1');
INSERT INTO `helperparam` ( `categoryid`, `paramname`, `paramtype`, `placeholder`, `param_inputtype`, `param_selectlist`) VALUES ( '2', '账号', 'string', '', 'input', NULL);
INSERT INTO `helperparam` ( `categoryid`, `paramname`, `paramtype`, `placeholder`, `param_inputtype`, `param_selectlist`) VALUES ( '2', '密码', 'string', '', 'input', NULL);
INSERT INTO `helperuserauthority` (`userid`, `helpercategoryid`) 
VALUES ('1', '2');

在helpercategory表的spname配置了一个带参数的webapi地址，其中$账号$和$密码$是配置的用户要输入的参数，这里要和helperparam表配置的paramname一致。

注意helpercategory表的body如果没有内容要配置成空字符串，header如果没有内容要配置成空数组，否则会报错

页面调用的结果如图