具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进一步理解，本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。

如图1所示，示出了本发明第一实施例所提供的一种基于Web前端开发的日报简表网页设计方法的流程图，包括以下步骤：

S1:配置一个新网页页面所需要的路由参数。

S2:模块化布局网页的工具模块。

S3:从组件库中引入组件初步搭建网页架构。

S4:发起获取后端数据请求。

S5:对获取后端数据进行数据处理和渲染。

S6:展示页面内的所有数据。

本实施例的方法是基于JavaScript、scss、React、AntDesign、axios等技术进行开发。开发一个新的页面需要配置相关的路由参数，在本实施例中，采用react-router-dom路由技术配置相关路由参数，采用组件化开发思维进行模块化开发，div布局好网页的表头、搜索栏、切换栏、展示模块等。页面以表格的形式对数据进行展示(页面包含时间、组织结构筛选，支持下载、上传功能)。引入Ant Design组件库里的table、modal、button、message等组件初步搭建完整网页。Ant Design是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于React的前端框架实现。采用Ant Design组件库的table组件来作为此网页表格的技术支撑；引用Ant Design组件库里的message、modal、button组件来辅助实现网页的提示框、按钮等的功能展示。通过react-router-dom实现单页面间页面的跳转；运用moment.js来实现对网页内时间的解析处理。利用axios请求后端数据，通过JavaScript语言对获取到的数据进行数据处理，再将数据利用react技术以及组件内部自带的API渲染到网页上进行展示。采用scss前端语言对页面的个性化展示进行进一步优化修改，实现网页内数据的展示。其中，数据处理具体包括：对后端数据进行结构转换、取整和提取有效字段等处理。

本发明实施例提供的一种基于Web前端开发的日报简表网页方法还包括步骤S7：对时间及组织结构筛选，该步骤S7设置在步骤S5之后S6之前，步骤S7具体包括：获取选择框的值，根据选择框的值向后端请求获取相应条件的数据，将获取的数据在网页页面上展示。

本发明实施例提供的一种基于Web前端开发的日报简表网页设计方法，通过模块化开发应用组件，将原有的交互过程拆分到每个页面，解决了页面个性化缺失的问题，提升了开发时效性，实现了后期分页面维护和个性化展示。

在上述的第一实施例中，提供了一种基于Web前端开发的日报简表网页设计方法，与之相对应的，本申请还提供一种基于Web前端开发的日报简表网页设计系统。请参考图2，其为本发明第二实施例提供的一种基于Web前端开发的日报简表网页设计系统的结构框图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。

如图2所示，示出了本发明第二实施例提供的一种基于Web前端开发的日报简表网页设计系统的结构框图，该系统包括：参数配置模块、布局模块、网页搭建模块、请求发起模块、处理模块和展示模块，参数配置模块用于配置一个新网页页面所需要的路由参数；布局模块用于模块化布局网页的工具模块；网页搭建模块用于从组件库中引入组件初步搭建网页架构；请求发起模块用于发起获取后端数据请求；处理模块用于对获取后端数据进行数据处理和渲染；展示模块用于展示页面内的所有数据。

在本实施例中，处理模块包括数据处理单元和渲染单元，所述数据处理单元用于对获取的后端数据进行结构转换、取整和提取有效字段，所述渲染单元采用组件内部自带的应用程序接口进行渲染。

在本实施例中，工具模块包括表头、搜索栏、切换栏和展示模块。

在本实施例中，系统还包括筛选模块，所述筛选模块用于根据获取选择框的值，根据选择框的值向后端请求获取相应条件的数据，将获取的数据在网页页面上展示。

本发明实施例提供的一种基于Web前端开发的日报简表网页设计系统，通过模块化开发应用组件，将原有的交互过程拆分到每个页面，解决了页面个性化缺失的问题，提升了开发时效性，实现了后期分页面维护和个性化展示。

如图3所示，示出了本发明第三实施例提供的一种智能终端的结构框图，该终端包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行上述实施例描述的方法。

应当理解，在本发明实施例中，所称处理器可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

输入设备可以包括触控板、指纹采传感器(用于采集用户的指纹信息和指纹的方向信息)、麦克风等，输出设备可以包括显示器(LCD等)、扬声器等。

该存储器可以包括只读存储器和随机存取存储器，并向处理器提供指令和数据。存储器的一部分还可以包括非易失性随机存取存储器。例如，存储器还可以存储设备类型的信息。

具体实现中，本发明实施例中所描述的处理器、输入设备、输出设备可执行本发明实施例提供的方法实施例所描述的实现方式，也可执行本发明实施例所描述的系统实施例的实现方式，在此不再赘述。

在本发明还提供一种计算机可读存储介质的实施例，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行上述实施例描述的方法。

所述计算机可读存储介质可以是前述实施例所述的终端的内部存储单元，例如终端的硬盘或内存。所述计算机可读存储介质也可以是所述终端的外部存储设备，例如所述终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述终端的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述终端所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的终端和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露终端和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。