DBA开发PC和手机报表解决方案及Step By Step实践

作者：长江支流

​“ 只写一个数据库的结构化查询SQL语句，因为这是绝大部分企业的信息中心数据库管理员DBA都会做的事情。但是，他们虽然精通数据库但并不是程序员，一般不会写C、C#、Java等后端代码，也可能不会用JavaScript、Html H5、Asp.Net写前端客户端代码。然而，即使这样不会，不写代码也罢，一样在PC、安卓、苹果手机上显示他们查询的数据报表。”

上一篇，我们写了：

不是程序员可能做报表吗？

https://blog.csdn.net/flygoldfish/article/details/118874013

看了效果，今天，不仅看效果，而且自已动手，不用前端也不用后端，一步一步的实现查询过滤分页，同时运行于PC、安卓、苹果手机和平板上。

目录结构参考：

本文基本按如下Word文档目录组织，如需word文档请联系作者或留言。

背景

—

    我们先给出一个表名T_RD_Accounts 的数据结构，用于组织存储计算机管理的本地用户名即账号相关信息，然后，只写一个数据库的结构化查询SQL语句，因为这是绝大部分企业的信息中心数据库管理员DBA都会做的事情。

    但是，DBA他们虽然精通数据库但并不是程序员，一般不会写C、C#、Java等后端代码，也可能不会用JavaScript、Html H5、Asp.Net写前端客户端代码。然而，即使这样不会，不写代码也罢，一样在PC、安卓、苹果手机上显示他们查询的数据报表。

    有人说，我是前端开发人员，不会后台代码，那更是如虎添翼，可以用熟悉的Html Table显示数据，也可以用自定义的DIV模板显示数据，将前端界面固定表头、固定底部、增加查询过滤等，与后端有关的直接调用WebAPI，无需后台代码。

    还有人说，我是后端开发人员，不会前端代码，咱们提供完整的MVC开发示例，让后端人员学习Asp.NetCore跨平台开发提供WebAPI，向前端人员学习Ajax调用WebAPI实现增、删、改、查到底是怎么运行的。为了通用于PC、安卓、IOS手机及平板，应用H5输出自动或手动完成报表显示。

    总之，不写代码，或者少写代码，工作提高效率，减少维护成本，无论你是DBA还是前端开发人员或者后端程序员，全面了解流水线的工作，绝对比只会在流水线上某一点工作人员更有价值。要想成为全栈开发人员，要想成为程序员的程序员，为程序员提供二次开发工具，本文提供了应用的思路原理及技巧与实践。

01

—

数据结构

    下面是账号表在数据库中的结构，表名T_RD_Accounts，其中主键字段ID是自动增值，Account表示账号，其它字段意义不是很大，将账号做简单分组及组内排序，并给账号一个初始密码并做描述。

复制如下网址：

http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid?controller=rdcrm/mobile/resource/rdcrm_accountlist

在电脑、手机、平板上都可以查看数据。

02

—

无代码0前端0后端极速预览

  下面，我们不用写任何前端代码，也不用写后台代码，直接显示上面数据结构中账号表T_RD_Accounts的数据。我们在完善的过程中，只需要修改rdcrm_accountlist.xml，无需编译，直接运行。

PC电脑显示

  下面，是运行在电脑中，打开IE11后，在地址栏中输入：

http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid.aspx?controller=rdcrm/mobile/resource/rdcrm_accountlist

或者

http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid?controller=rdcrm/mobile/resource/rdcrm_accountlist

其中，WebMIS.Web/UI/NormViewGrid.aspx 或WebMIS.Web/UI/NormViewGrid是路由，对应于一个母版, 后面为简单好记我们直接叫NormViewGrid母版，rdcrm_accountlist是rdcrm_accountlist.xml的主文件名，作为路由参数controller的参数值。

  回车，效果图，没有一行代码，绝对没有写一行前端代码，也没写后端代码。

安卓手机

下面，是运行在安卓手机效果图，绝对没有写一行前端代码，也没写后端代码。

苹果手机

下面，是运行在苹果手机效果图，绝对没有写一行前端代码，也没写后端代码。

IPAD平板

下面，是运行在IPAD平板效果图，绝对没有写一行前端代码，也没写后端代码。

03

—

原理机制

    根据一个xml文件即控制文件，作为WebMIS.Web/UI/NormViewGrid路由controller的参数值（不需要.xml扩展名），系统捕获到请求时，系统有一个XML解析机制，解析xml中的Select的SQL语句包括变量替换，读取数据库中的满足条件的数据，组织成json，这就自动完成了后台WebAPI。再根据xml中的Filter、Filds、Pagination将过滤区、字段列标题、绑定区、分页等全部动态的输出到网页，并可能动态的输出JS脚本。这样，就自动完成了前端代码，而不需要手写前端代码。

    在Asp.Net中采用了Asp.Net 的母版方式，而Asp.Net Core中采用布局方式，默认输出JQuery EasyUI DataGrid，所以，只要改变母版或布局（以下简称母版），二次开发就可以按自已的个性化显示报表例如Html Table方式、DIV模板方式等，更可以自已写前端直接调用后端动态生成的WebAPI。

  在前面描述过打开IE11后，在地址栏中输入：

 http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid.aspx?controller=rdcrm/mobile/resource/rdcrm_accountlist

或者

 http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid?controller=rdcrm/mobile/resource/rdcrm_accountlist

敲回车，直接输出了报表数据界面，就是应用了母版NormViewGrid作为路由，将读取的数据显示在相应的模板中。

    一个带.aspx，一个不带，Asp.Net只运行在Windows平台，而Asp.Net Core是跨平台的，不仅可以运行于Windows，而且可以部署并运行在Linux、macOS、Docker等。为了兼容以前的网址即Asp.Net的带有.aspx，所以，在开发Asp.Net Core版本的二次开发平台时，将路由设置了带.aspx和不带.aspx两种情况，以便将原来旧版的网址拷过来也可以直接使用。

    总之，xml控制文件，不仅提供了数据源，而且还指出了显示界面要输出的字段及过滤和分页等，解析器解析了xml后读取相应数据输出前端脚本。当然，还可以动态的加载模板、回调、无极报表等更多高级功能。

    另外，xml控制文件里，也可以只写一个SQL语句，用来提供WebAPI，返回json数据，这将在WebAPI数据源中具体说明。

04

—

XML文件查看

上面已说了XML配置的数据源路径及名称，这里提供一个下载查看的网址。

http://rdcrmdemo.userbo.com:8080/download/rdcrm/mobile/resource/rdcrm_accountlist.xml

下面是用IE11打开网址后，查看XML文件的截图。

查看XML文件代码如下

<?xml version="1.0" encoding="utf-8"?><WebMisControllerSerializer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">  <Controller>    <Select>      SELECT ID,Account,AccountSort,AccountGroup,InitPassword,Memo      FROM T_RD_Accounts      Where 1=1 @var_AccountExpress    </Select>    <SortFields>Account,AccountSort</SortFields>​​    <Options>      <IsLoadData>true</IsLoadData>​      <IsPagination>true</IsPagination>      <Pagination>        <PageSize>10</PageSize>        <PageList>5, 10,15,20, 50, 100</PageList>      </Pagination>    </Options>​    <Filter>      <Field>        <ID>filter_find</ID>        <Title>请输入查询账号</Title>        <Width>120</Width>        <SqlReplace>          <Name>@var_AccountExpress</Name>          <Express> And Account Like '%@filter_find%'</Express>        </SqlReplace>      </Field>    </Filter>​    <Fields>​      <Field>        <ID>Account</ID>        <Title>账号</Title>        <Align>Center</Align>        <Width>40%</Width>      </Field>      <Field>        <ID>AccountSort</ID>        <Title>排序</Title>        <Align>Center</Align>        <Width>20%</Width>      </Field>      <Field>        <ID>Memo</ID>        <Title>备注</Title>        <Align>Center</Align>        <Width>40%</Width>      </Field>​    </Fields>  </Controller></WebMisControllerSerializer>

05

—

WebAPI数据源（无需后端编程）

    前端要显示数据，传统需要专业的开发人员开发后台代码，按照MVC方式，需要大量的开发代码和调试，我们将这一切简化，只要会SQL语句，根据上面的数据结构，写一个查询语句，就可以提供一个不用写代码的WebAPI提供数据，供前端调用，这样不用写后端代码，解放程序员。而如果不会前端代码，再根据需要将要显示的字段在XML中描述出来，按上面说的原理，直接访问NormViewGrid模版网址，将xml文件作为参数，自动动态生成前端。这样，即使不会后端，也不会前端，0代码就可以搞定。

    因此，这种二次开发方式，适合很多企业的DBA，也适合一些企业的信息中心，还可以帮助软件公司快速的完成需求调研在做调研的时候直接把界面给客户看。因为在做需求调研的时候客户往往提出需求等我们再出需求说明书，做原型，搞完开会后再给客户看，客户对界面最敏感，往往这里怎么怎么，那里不是那样的等等，容易返工。应用二次开发工具，再无任何前端代码、无后端代码，专业的报表界面即显示，提高工作效率，适应业务需求，将更多的精力放在业务上，而不是代码上。

数据库中查询SQL

    下面这句SQL语句，只要是DBA，学过数据库的人，都会。即查询账号表中的数据。注意，很多人会写成Select * From T_RD_Accounts，没毛病，在本机执行全部显示挺好，但是在网络中，尽量只查显示的字段，以提高效率。

XML中的查询SQL

    下面，给出了VS Code代码截图，我们将上面的SQL，写在XML中，我们把这个xml文件叫控制文件，所以有个标签Controller，所有配置全部作为Controller子节点。将如上SQL，写到Select标签中。rdcrm_accountlist.xml文件存到指定的目录。

    在XML文件中，将查询SQL或模板写入<Select>标签中，查询上面数据结构中账号表T_RD_Accounts，可以只列出要显示的字段，其它字段不必全部列出，否则增加网络传输负担。

    <Select>      SELECT ID      ,Account      ,AccountSort      ,AccountGroup      ,InitPassword      ,Memo      FROM T_RD_Accounts    </Select>

    别外，SQL中可以用变量，在查询过滤拼SQL中进行变量替换，非常灵活，无论是And关系还是Or关系还是其组合，甚至嵌套SQL子查询，都可以，这样，可以做出任意复杂的SQL报表，在后面会进一步讲。

WebAPI访问数据

    有了上面的xml文件，我们就可以直接访问一个固定的action，将控制文件（不用写扩展名）作为参数即可以获取SQL语句对应的数据，将返回json格式数据。

    打开浏览器，在地址栏中输入如下网址：

http://rdcrmdemo.userbo.com:8080/Action/QueryAction?action=Query&controller=rdcrm/mobile/resource/rdcrm_accountlist

下面是在谷歌浏览器中打开网址后返回的json格式数据效果图。

    根据上面的操作我们了解了，只要写一个SQL，就不用再写MVC中的Model、Controller等大量代码，还一个最大的好处，是不用编译，做软件实施的人员，最怕每次改点东西，就要编译、测试、发布。

    因此，有了以上操作，你不用会写后台代码，一样搞定WebAPI。会前端代码，直接调用，不会前端代码，根据之前说的原理，直接调用NormViewGrid母版，将数据显示出来。至于SQL中增加Where条件，一步一步的来。

06

—

据源WebAPI数据显示（无需前端编程）

    在xml控制文件中，写了SQL语句，不用再写后端代码就实现了WebAPI获取数据。能不能不写前端，就在网页或手机和平板上显示数据呢，答案是肯定的。  

前端显示字段

    在XML文件中，将前端要显示的数据列，写入< Fields >标签中，注意<ID>是查询SQL中的字段名或别名，而不是数据结构中的字段名，Title是显示在前端表格列标题。另外，还可以设置列标题、对齐方式、宽度等等。

运行效果

    有了上面的xml文件，我们就可以直接访问一个固定的母版NormViewGrid，将控制文件（不用写扩展名）作为参数即可以获取SQL语句对应的数据并显示在前端。

打开浏览器，在地址栏中输入如下网址：

http://rdcrmdemo.userbo.com:8080/WebMIS.Web/UI/NormViewGrid?controller=rdcrm/mobile/resource/rdcrm_accountlist

下面是在IE11浏览器中打开网址后效果图。

    我们可以看到，系统自动将XML中配置的字段列，显示在JQuery EasyUI DataGrid中。默认情况下，没有加载数据，单击查询，即可显示数据。

    后面我们一步一步的配置改成加载界面时就显示数据，并增加查询条件、分页、变量替换等。

07

—

分页及过滤

    在前面写的xml控制文件中，写了SQL语句，但是并没有Where条件，实际应用中，肯定是要分页并按一定条件查询。  

分页选项

    在XML文件中，可以增加选项目，当界面加载时就加载数据，也可以增加分页选项，设定默认每页显示的行数和可选页面大小。

 <Options>      <IsLoadData>true</IsLoadData>      <IsPagination>true</IsPagination>      <Pagination>        <PageSize>10</PageSize>        <PageList>5, 10,15,20, 50, 100</PageList>      </Pagination></Options> 

    页面加载时，并没有加载数据，我们只需要在controller中，增加选项，让界面加载时就加载数据，IsLoadData设置为true，并且指定分页及页面大小，如图所示。

运行效果

  下面是运行效果图，加载页面时加载数据，并且分页，默认显示10条数据。

查询过滤    

    假设要对Account字段进行过滤，可以在<Filter>中增加<Field>配置，其中<ID> 对应SQL中的字段，注意如果字段有别名则取别名，<Title>是前端界面的文字标签，<Width>是文字标签对应的输入框宽度。

    下面是运行后，输入查询的值例如cx9012后查询效果图。

    此时，是完全匹配查询，如果需要多个查询字段，可以在<Filter>中增加<Field>配置，但是这时查询条件都是And的关系。要表达任意的查询条件And、Or以及Like模糊查询，需需要用到查询SQL模板及变量替换。

08

—

SQL模板及变量替换

    在XML文件中，我们写了简单的SQL查询语句，其实，可以写任意复杂的查询语句，变且可以在SQL中用变量，在运行时，系统根据变量查找Form、QueryString、Session等找相应的值自动进行变量替换，然后再根据替换后的SQL进行查询。

    在XML文件中，将前端要传入的查询过滤条件字段，写入< Filter>标签中，系统根据配置，替换上述查询SQL或模板中的对应变量。<ID>显示在前端的用户输入或选择的input域，<Title>作为input的一个标签提示，<Width>为显示宽度。然后，进行SQL变量替换，将查询SQL或模板中的对应变量，用运行时用户的输入替换相应的值后，拼在SQL中。当用户没有输入时，相应的变量不起作用，不影响SQL。

    下面，我们在SQL语句中增加一行：

      Where 1=1 @var_AccountExpress

    我们在Filter的过滤ID写一个比较直观的filter_find表示要过滤查找见名知意，然后在SQL替换中，用@前缀表示这是一个变量，而Name中的@var_AccountExpress表示要替换的SQL中的变量，运行时用Express里的解析后的值替换，如下图所示：

    下面是运行后，输入模糊查询的值05后查询效果图的解析后的值替换，如下图所示：

    当需要多个字段查询时，可以在<Filter>中增加<Field>增加配置。大多数拼SQL,都用And的关系，而WebMIS.Net平台，因为支持查询SQL或模板，应用变量替换，所以任意复杂的And、Or关系以及嵌套的SQL，都可以轻松搞定。

    当需要多个字段查询时，可以在<Filter>中增加<Field>增加配置。大多数拼SQL,都用And的关系，而WebMIS.Net平台，因为支持查询SQL或模板，应用变量替换，所以任意复杂的And、Or关系以及嵌套的SQL，都可以轻松搞定。

09

—

后续关注

  上面，实现是自动生成的JQuery EasyUI DataGrid风格的报表，其实也可以根据自已的模板生成其它风格。接下来，我们将自已动手实现HtmlTable、DIV模板方式，做一个更像手机APP的报表，进一步了解通用于PC、手机的报表解决方案。

具体指引详见WebMIS.Net快速开发平台、《计算机远程租赁管理系统》、《客户缴费系统》

声明：本文版权为长江支流周方勇所有，如需转载，请保留完整的内容及出处。

作者：长江支流flygoldfish@163.com微信:winxin8001234567 微信公共号:UserBoWechat