基于MVVM架构的数据复选方法、插件和平台与流程

基于mvvm架构的数据复选方法、插件和平台
技术领域
1.本发明涉及web前端开发技术领域，具体涉及一种基于mvvm架构的数据复选方法、复选插件、复选插件使用平台以及终端设备。


背景技术：

2.随着互联网技术的发展，越来越多的大数据应用出现在我们的生活中。用户在应用客户端操作数据库时，常常会用到多选框。
3.现有的多选框大多采用下面这两种方式：一种是普通的下拉框，点开菜单后通过按住ctrl键选择多个选项。此外，另一种方式是使用两个多选框构建滑道选择框。
4.现有的复选实现技术中还存在不足。方式一实现简单，适合选项少的静态数据，但数据项一旦较多时则不能直观展示，操作时需要上下拉动滑动条才能回顾选了哪些项目。方式二展示不够友好。
5.因此现有的复选技术亟待改进。


技术实现要素：

6.基于此，为解决现有技术中存在的技术问题，本发明提出了一种基于mvvm框架的动态数据库，提供方便用户直观快速复选数据项，查看和操作实时的结果项，提高界面数据操作方便性和高效性的数据复选方法、复选插件、平台以及终端设备。
7.第一方面，本实施例提供一种基于mvvm架构的数据复选方法，包括以下步骤：
8.创建内容交互界面；
9.在该内容交互界面上创建用于展示选项数据的复选表格，该复选表格每行的首列设置复选框，该复选表格中的选项数据列表通过显示接口从基于mvvm架构的数据库中实时动态加载；
10.接收用户通过内容交互界面输入的目标选项，并根据该目标选项从所述数据库实时更新该复选表格中的选项数据列表；
11.将该目标选项通过插件接口发送给父组件服务器；
12.其中，该数据库与父组件服务器建立双向数据收发；该内容交互界面与该数据库建立双向数据通信。
13.第二方面，本技术实施例提供一种基于mvvm架构的数据复选插件，包括界面管理组件、显示接口、对话框组件、基于mvvm架构的数据库、界面输入获取单元以及发送单元，
14.该界面管理组件用于创建内容交互界面；
15.该对话框组件用于在该内容交互界面上创建用于展示选项数据的复选表格，该复选表格每行的首列设置复选框，该复选表格中的选项数据列表通过该显示接口从基于mvvm架构的数据库中实时动态加载；
16.该界面输入获取单元用于接收用户通过内容交互界面输入的目标选项并发送给该数据库，该显示接口接收该数据库根据该目标选项实时更新的选项数据列表并展示在该
复选表格中；
17.发送单元用于将该目标选项通过插件接口发送给父组件服务器。
18.第三方面，本技术实施例提供一种应用数据复选插件的平台，包括父组件服务器以及与该父组件服务器通信的客户端应用，该客户端应用包括复选插件；
19.该复选插件包括界面管理组件、显示接口、对话框组件、基于mvvm架构的数据库、界面输入获取单元以及发送单元；
20.该数据库包括基础核心框架、外部数据收发模块以及数据库界面显示接口，该外部数据收发模块用于与父组件服务器实时动态传递数据，该数据库界面显示接口与该显示接口连接；
21.该界面管理组件用于创建内容交互界面；
22.该对话框组件用于在该内容交互界面上创建用于展示选项数据的复选表格，该复选表格每行的首列设置复选框，该复选表格中的选项数据列表通过该显示接口从基于mvvm架构的数据库中实时动态加载；
23.该界面输入获取单元用于接收用户通过内容交互界面输入的目标选项并发送给该数据库；
24.该显示接口连接数据库界面显示接口，接收该数据库根据该目标选项实时更新的选项数据列表并展示在该复选表格中；
25.发送单元用于将该目标选项通过插件接口发送给父组件服务器。
26.第四方面，本技术实施例提供一种终端设备，包括存储器、处理器以及存储在该存储器中并可在该处理器上运行的计算机程序，该处理器执行该计算机程序时实现上述第一方面提供的方法。
27.第五方面，本技术实施例提供了一种计算机程序产品，其中，上述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，上述计算机程序可操作来使计算机执行如本技术实施例第一方面所述的方法中所描述的部分或全部步骤。该计算机程序产品可以为一个软件安装包。
28.可以看出，本技术实施例的数据复选方法、复选插件和平台，在mvvm开源框架vue的基础上，设计一种可绑定动态数据库和静态数据库的复选插件，用户可以方便地通过该复选框进行数据检索，直观快速复选数据项，利用mvvm数据库的双向绑定特征，可实时返回结果。此外，内容交互界面上提供检索窗口，并且选项数据列表通过分页方式展现，提高用户对界面数据操作的方便性和高效性。
附图说明
29.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
30.其中：
31.图1为本实施例的数据复选方法的系统框架图；
32.图2为本实施例的数据复选方法的主要流程图；
33.图3为本实施例的数据复选方法的内容交互界面创建示意图；
34.图4为本实施例的数据复选方法中用户交互时的插件操作流程图；
35.图5为本实施例的复选插件的选择输入框示意图；
36.图6为本实施例的复选插件的选择输入框用户使用过程示意图；
37.图7为本实施例的复选插件的对话框的界面示意图；
38.图8为本实施例的应用复选插件的平台的架构图；
39.图9为本实施例的复选插件的模块示意图；
40.图10为本实施例的终端设备的结构示意图。
具体实施方式
41.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
42.本技术的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。
43.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
44.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
45.如图1所示，本技术实施例的数据复选方法、复选插件和平台，在mvvm框架的基础上，设计一种可绑定动态数据库和静态数据库的复选插件，该复选插件的数据库12包括静态数据库121和动态数据库122。该数据库12与父组件服务器2建立双向数据收发；该内容交互界面10与该数据库12建立双向数据通信。
46.该静态数据库121为web页面静态数据，该动态数据库122为选项数据的动态集合，包括多种项目动态数据，比如商场车位管理、小区停车场管理等等。
47.用户可以方便地通过内容交互界面10的复选框进行数据筛选，直观快速复选数据项，利用mvvm数据库的双向绑定特征，可实时返回结果。
48.mvvm是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。mvvm是model-view-viewmodel的简写。它本质上就是mvc的改进版。mvvm就是将其中的view的状态和行为抽象化，让我们将视图ui和业务逻辑分开。当然这些事viewmodel已经帮我们做了，它可以取出model的数据同时帮忙处理view中由于需要展示内容而涉及的业务逻辑。微软的wpf带来了新的技术体验，如silverlight、音频、视频、3d、动画，这导致了软件ui层更
加细节化、可定制化。同时，在技术层面，wpf也带来了诸如binding、dependency property、routedevents、command、datatemplate、controltemplate等新特性。mvvm(model-view-viewmodel)框架的由来便是mvp(model-view-presenter)模式与wpf结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有mvp框架并且把wpf的新特性糅合进去，以应对客户日益复杂的需求变化。
49.原理：
50.模型(model)：model与mvc模式一样，model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，model不依赖于view和viewmodel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。model在实际开发中根据实际情况可以进行细分。比如城乡规划资源平台就将model将service和reposiroty结合为wcf服务由viewmodel进行调用。
51.视图(view)：视图负责界面和显示。它通过datacontext(数据上下文)和viewmodel进行数据绑定，不直接与model交互。可以绑定behavior/comand来调用viewmodel的方法，command是view到viewmodel的单向通行，通过实现silverlight提供的icomand接口来实现绑定，让view触发事件，viewmodel来处理事件，以解决事件绑定功能。
52.视图模型(viewmodel)：视图模型主要包括界面逻辑和模型数据封装，behavior/command事件响应处理，绑定属性定义和集合等。它是view和model的桥梁，是对model的抽象，比如：model中数据格式是“年月日”，可以在viewmodel中转换model的数据为“日月年”供view显示。
53.方法具体实施例
54.请参考图2，所示为该方法的主要流程图，为完成一次插件中的复选操作，该方法包括以下步骤：
55.步骤1：创建内容交互界面；
56.步骤2：在该内容交互界面上创建用于展示选项数据的复选表格，该复选表格每行的首列设置复选框，该复选表格中的选项数据列表通过显示接口从基于mvvm架构的数据库中实时动态加载；
57.步骤3：接收用户通过内容交互界面输入的目标选项，并根据该目标选项从所述数据库实时更新该复选表格中的选项数据列表；
58.步骤4：将该目标选项通过插件接口发送给父组件服务器。
59.上述步骤1中创建内容交互界面的过程如下：
60.新建div图层的选择输入框，该选择输入框中设置弹框按钮。接收用户输入的选择项。创建对话框，在该对话框上创建用于展示选项数据的复选表格，以选择项为筛选条件，从该数据库中筛选对应的选项数据列表并展示在复选表格中。在该对话框中分页显示该复选表格。
61.此外，在该对话框中创建检索窗口，以检索该数据库调整对应选项数据列表中的选项数据。
62.请参考图3，所述为内容交互界面创建示意图。
63.步骤11-步骤12为用户通过选择输入框输入选择项，比如选择车位、选择项目或者
选择支付方式等。
64.如图5所示，其为未进行操作的选择输入框303的状态图，字段名301为选择输入框的名称，改选择输入框303中设置弹框按钮302。图6所示，为用户输入选择项后的选择输入框405的状态图，在字段名401的选择输入框中，用户输入了选项1和选项2，该弹框按钮404随之后移。
65.步骤13为用户确定选择项后，新建对话框，亦即选择对话框。
66.步骤14-步骤16为对话框，又称复选对话框的制作。
67.图7所示为对话框的示意图。在该对话框上创建用于展示选项数据的复选表格506。在该对话框中分页显示该复选表格，如507和509所示。在该对话框中创建检索窗口502。在对话框脚位置放置确定508和取消510两个按钮。
68.图4所示，为用户在对话框完成目标选项的复选过程。用户确定复选的目标选项后，如步骤25-步骤27所示，触发input事件将目标选项通知父组件服务器，父组件服务器更新本地表单数据，随之关闭选择对话框。
69.图9所示为本实施例复选插件的软件模块结构示意图。该种基于mvvm架构的数据复选插件1包括界面管理组件62、显示接口61、对话框组件64、基于mvvm架构的数据库12、界面输入获取单元63、检索组件65以及发送单元66。
70.该界面管理组件62用于创建内容交互界面10。
71.该对话框组件64用于在该内容交互界面10上创建用于展示选项数据的复选表格，该复选表格每行的首列设置复选框，该复选表格中的选项数据列表通过该显示接口61从基于mvvm架构的数据库12中实时动态加载。
72.该界面输入获取单元63用于接收用户通过内容交互界面输入的目标选项并发送给该数据库12，该显示接口61接收该数据库12根据该目标选项实时更新的选项数据列表并展示在该复选表格中。
73.发送单元66用于将该目标选项通过插件接口发送给父组件服务器。
74.其中，该基于mvvm架构的数据库12包括基础核心框架122、控制模块123、外部数据收发模块124以及数据库界面显示接口121。该外部数据收发模块124用于与父组件服务器2实时动态传递数据，该数据库界面显示接口121与该内容交互界面的显示接口61连接。
75.该检索组件65用于在该对话框中创建检索窗口以及检索按钮，以检索该数据库调整对应选项数据列表中的选项数据。
76.请一并参考图8，该应用数据复选插件的平台包括父组件服务器2以及与该父组件服务器通信的客户端应用3，该客户端应用3包括复选插件1。
77.图10是本技术实施例终端设备的结构示意图。如图10所示，该实施例的终端设备600包括：一个或多个处理器601(图中仅示出一个主处理器)、存储器602以及存储在所述存储器602中并可在所述处理器601上运行的计算机程序604。所述处理器601执行所述计算机程序604时实现上述基于mvvm架构的数据复选方法实施例中的步骤。
78.所述终端设备600可以是人工智能终端、桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。本领域技术人员可以理解，图10仅仅是终端设备600的示例，并不构成对终端设备600的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线等。
79.所称处理器601可以是中央处理单元(central processing unit，cpu)，还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field-programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
80.所述存储器602可以是所述终端设备600的内部存储单元，例如终端设备600的硬盘或内存。所述存储器602也可以是所述终端设备600的扩展内存设备，例如所述终端设备600上配备的插接式硬盘，智能存储卡(smart media card，smc)，安全数字(secure digital，sd)卡，闪存卡(flash card)等。进一步地，所述存储器602还可以既包括所述终端设备600的内部存储单元也包括扩展内存608。
81.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述处理器或者编译器的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本技术的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
82.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
83.以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。