1.本发明涉及前端领域，特别涉及一种前端网页开发方法、装置、存储介质和电子设备。
背景技术：
：：2.现代的web系统开发技术丰富多彩，主流的vue、react、angular等前端框架都需要专业的前端开发人员来开发、维护，甚至很多并不是非常订制化的系统也遵循这套开发规则；3.在很多系统中需要集成大量的细节功能，包括：可以对数据进行筛选、有按钮可以刷新数据、编辑单行数据、批量修改和删除、查询某列、按某列排序、隐藏某列、开启整页内容拖拽排序、表格分页、数据汇总、支持导出excel等，这些功能都需要开发大量代码，通常需要技术人员逐一进行开发，开发难度大，效率较低。技术实现要素：4.鉴于上述问题，本发明提供一种克服上述问题或者至少部分地解决上述问题的前端网页开发方法、装置、存储介质和电子设备。5.第一方面，一种前端网页开发方法，包括：6.获得目标网页的路由信息；7.根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；8.将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。9.结合第一方面，在某些可选的实施方式中，所述获得目标网页的路由信息，包括：10.加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；11.通过所述组件集成的vue-router功能获取所述目标网页的路由信息。12.结合第一方面，在某些可选的实施方式中，所述根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数，包括：13.根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。14.结合上一个实施方式，在某些可选的实施方式中，所述将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，包括：15.通过amis.embed对象将所述网页配置参数渲染至指定的页面容器中，从而得到所述语法内容，以便于所述amis工具根据所述语法内容解析得到所述网页内容。16.结合第三个实施方式，在某些可选的实施方式中，在所述将所述网页配置参数解析为符合amis工具的语法内容之后，所述方法还包括：17.变更所述数据库中存储的与所述路由信息相关联的网页配置参数，从而修改所述网页内容。18.第二方面，一种前端网页开发装置，包括：路由信息获得单元、请求发送单元和网页获得单元；19.所述路由信息获得单元，用于获得目标网页的路由信息；20.所述请求发送单元，用于根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；21.所述网页获得单元，用于将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。22.结合第二面，在某些可选的实施方式中，所述路由信息获得单元，包括：组件加载子单元和路由信息获得子单元；23.所述组件加载子单元，用于加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；24.所述路由信息获得子单元，用于通过所述组件集成的vue-router功能获取所述目标网页的路由信息。25.结合第二方面，在某些可选的实施方式中，所述请求发送单元，包括：请求发送子单元；26.所述请求发送子单元，用于根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。27.第三方面，一种计算机可读存储介质，其上存储有程序，所述程序被处理器执行时实现上述任一项所述的前端网页开发方法。28.第四方面，一种电子设备，所述电子设备包括至少一个处理器、以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述任一项所述的前端网页开发方法。29.借由上述技术方案，本发明提供的前端网页开发方法、装置、存储介质和电子设备，可以通过获得目标网页的路由信息；根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。由此可以看出，本发明基于amis工具解析得到相应网页内容，无需技术人员逐一进行开发相应的功能，效率较高。30.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。附图说明31.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：32.图1示出了本发明提供的一种前端网页开发方法的流程图；33.图2示出了本发明提供的一种前端网页开发装置的结构示意图；34.图3示出了本发明提供的一种电子设备的结构示意图。具体实施方式35.现有的前端项目都需要专业的前端人员开发完之后，再通过webpack等工具打包构建，然后再通过上线发布流程等多方审批、构建、灰度测试验证等步骤完成上线。重复性开发工作多、效率低，一点点简单的修改和维护都需要重复上述步骤；本发明可以通过在线修改对应页面的json配置，尤其是列表、表单此类页面不需要专业的前端维护，开发、修改后的前端业务代码不需要发布审批运维等维护工作，只需要把json配置保存到数据库直接上线即可，从而减少页面开发工作，极大提升效率。36.下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。37.如图1所示，本发明提供了一种前端网页开发方法，包括：s100、s200和s300；38.s100、获得目标网页的路由信息；39.可选的，本发明所说的目标网页可以是目标需要建立的网页，也可以是已经开发完成、需要修改或者维护的网页，本发明对此不做限制。40.可选的，每个网页均有唯一对应的url地址，即本发明所说的路由信息至少包括url地址。本发明可以预先将url地址与相应的网页配置参数关联存储，以便于在需要时，通过url地址可以查询获得相应的网页配置参数，本发明对此不做限制。41.可选的，本发明对于获得目标网页的路由信息的方式不做具体限制，任何可行的方式均属于本发明的保护范围。例如，结合图1所示的实施方式，在某些可选的实施方式中，所述s100包括：步骤1.1和步骤1.2；42.步骤1.1、加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；43.步骤1.2、通过所述组件集成的vue-router功能获取所述目标网页的路由信息。44.可选的，本发明可以预先开发相应的组件，一个组件可以对应多个不同的目标网页。当需要开发或者维护相应网页时，本发明的执行主体可以通过加载该组件，并由该组件通过vue-router提供的router-path获取到目标网页的路由信息，本发明对此不做限制。45.可选的，vue-router和router-path均是本领域的公知概念，本发明对此不做过多描述，具体请参见本领域的相关说明。46.s200、根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；47.可选的，如前所述，与路由信息相关联的网页配置参数可以预先存储在数据库中，所以可以根据路由信息向数据库发送相应的请求，以获得相应的网页配置参数，本发明对此不做限制。48.例如，结合图1所示的实施方式，在某些可选的实施方式中，所述s200包括：49.根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。50.可选的，xmlhttprequest对象是浏览器领域的公知概念，本发明对此不做过多描述，具体请请参见相关说明。需要说明的是：amis配置参数包括请求拦截、渲染容器、请求和响应组件参数等，用于定义网页整个交互流程；页面菜单信息包括路由、菜单名称和菜单id等，用于展示和关联唯一的网页。51.s300、将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。52.可选的，amis工具有其特定的语法内容，为了能够让amis工具准确解析得到相应的网页内容，本发明可以通过预先开发的renderamis公共函数将网页配置参数解析成amis工具能够识别的语法内容，本发明对此不做限制。53.可选的，renderamis公共函数所关联的组件可以用于解析amis配置参数和渲染配置。54.可选的，amis工具属于本领域的公知概念，其功能和使用方法可以参见本领域的相关说明，本发明对此不做过多描述。需要说明的是：amis工具将网页配置参数解析成网页内容后，本发明可以通过浏览器提供的document.createelement等api创建、更新html代码，以便于浏览器自动渲染成可视的前端网页，本发明对此不做限制。55.可选的，document.createelement属于本领域的公知概念，本发明对此不做过多描述，具体请参见本领域的相关说明。56.本发明对于将所述网页配置参数解析为所述语法内容的过程不做限制，任何可行的方式均属于本发明的保护范围。例如，结合上一个实施方式，在某些可选的实施方式中，所述s300包括：57.通过amis.embed对象将所述网页配置参数渲染至指定的页面容器中，从而得到所述语法内容，以便于所述amis工具根据所述语法内容解析得到所述网页内容。58.可选的，amis.embed对象属于本领域的公知概念，本发明对此不做过多描述，具体请参见本领域的相关说明。59.可选的，在某些可选的实施方式中，在所述s300中的将所述网页配置参数解析为符合amis工具的语法内容之后，所述方法还包括：60.变更所述数据库中存储的与所述路由信息相关联的网页配置参数，从而修改所述网页内容。61.可选的，本发明可以进行自定义的表单配置，不懂前端的开发人员只需要配置主要变量即可按预备好的模板生成对应的amis字符串，即生成对应的amis配置参数。62.可选的，开发人员可以通过变更主要变量，从而变更amis配置参数，也可以直接在数据库的数据库表单中变更相应的amis配置参数，从而变更网页配置参数，本发明对此不做限制。63.可选的，如前所述，网页内容与网页配置参数对应，当网页配置参数变更后，网页内容也自然发生相应的变化，从而实现对网页的开发、变更和维护，本发明对此不做限制。64.可选的，为了进一步清楚描述本发明的方案，本实例以素材库系统的初始文件列表页面做一个详细的场景示例：65.开发人员进入到指定的配置页面，选择页面的上级菜单、填写页面菜单名称、路由名称即可进行下一步配置页面的详细参数。66.点击添加列表配置，在弹出的抽屉表单中填写好查询表单的详细参数信息，如：表单项的label名称、对应的key-value、表单项类型(输入框、选择下拉、时间框和复选框等)，甚至可以填写表单项的正则表单式来满足个性化的逻辑。67.填写好搜索表单的内容后，下一步可以配置页面中间部分的按钮操作逻辑。对应的amis配置参数为“bulkactions”，这里我们可以配置按钮的“type”、“action”、“actiontype”、“label”和“name”等属性，甚至可以配置按钮的api，来直接发送ajax请求。“bulkactions”里面的按钮会自动和表格的“columns”关联起来，比如表格没有加载数据出来，这些按钮就不会展示出来或者是“disable”状态；68.下一步可以配置表格“columns”的参数，比如基本的“name”、“label”和“name”的值会自动匹配到加载出来的数据的对应的字段名称。表单行默认的“key”为id，我们也可以配置指定其他的“name”为id。69.amis也提供了“tableclassname”来让我们自定义表格的具体样式，满足多样化的ui画面需求；70.更为人性化的是，amis提供了跨页存储状态的能力，比如我们要跨页选中多条表格数据、允许最大选择的表格行、表格行不能被选中的逻辑等等；这是很多ui框架不具备的能力，通常需要开发者自己实现这些逻辑。71.上线后的页面，后续需要再次维护、调整，可以通过请求加载页面具体的amis参数进行二次编辑即可。这样不需要提交前端任何代码，可以做到不需要升级发布应用就能进行一些常规的业务迭代。72.如图2所示，本发明提供了一种前端网页开发装置，包括：路由信息获得单元100、请求发送单元200和网页获得单元300；73.所述路由信息获得单元100，用于获得目标网页的路由信息；74.所述请求发送单元200，用于根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；75.所述网页获得单元300，用于将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。76.结合图2所示的实施方式，在某些可选的实施方式中，所述路由信息获得单元100，包括：组件加载子单元和路由信息获得子单元；77.所述组件加载子单元，用于加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；78.所述路由信息获得子单元，用于通过所述组件集成的vue-router功能获取所述目标网页的路由信息。79.结合图2所示的实施方式，在某些可选的实施方式中，所述请求发送单元200，包括：请求发送子单元；80.所述请求发送子单元，用于根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。81.结合上一个实施方式，在某些可选的实施方式中，所述网页获得单元300包括：网页获得子单元；82.所述网页获得子单元，用于通过amis.embed对象将所述网页配置参数渲染至指定的页面容器中，从而得到所述语法内容，以便于所述amis工具根据所述语法内容解析得到所述网页内容。83.可选的，在某些可选的实施方式中，所述装置还包括：参数变更单元；84.所述参数变更单元，用于在所述将所述网页配置参数解析为符合amis工具的语法内容之后，变更所述数据库中存储的与所述路由信息相关联的网页配置参数，从而修改所述网页内容。85.本发明提供了一种计算机可读存储介质，其上存储有程序，所述程序被处理器执行时实现上述任一项所述的前端网页开发方法。86.如图3所示，本发明提供了一种电子设备70，所述电子设备70包括至少一个处理器701、以及与所述处理器701连接的至少一个存储器702、总线703；其中，所述处理器701、所述存储器702通过所述总线703完成相互间的通信；所述处理器701用于调用所述存储器702中的程序指令，以执行上述任一项所述的前端网页开发方法。87.在本技术中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。88.本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。89.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。90.以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。当前第1页12当前第1页12
技术特征：1.一种前端网页开发方法，其特征在于，包括：获得目标网页的路由信息；根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。2.根据权利要求1所述的方法，其特征在于，所述获得目标网页的路由信息，包括：加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；通过所述组件集成的vue-router功能获取所述目标网页的路由信息。3.根据权利要求1所述的方法，其特征在于，所述根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数，包括：根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。4.根据权利要求3所述的方法，其特征在于，所述将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，包括：通过amis.embed对象将所述网页配置参数渲染至指定的页面容器中，从而得到所述语法内容，以便于所述amis工具根据所述语法内容解析得到所述网页内容。5.根据权利要求3所述的方法，其特征在于，在所述将所述网页配置参数解析为符合amis工具的语法内容之后，所述方法还包括：变更所述数据库中存储的与所述路由信息相关联的网页配置参数，从而修改所述网页内容。6.一种前端网页开发装置，其特征在于，包括：路由信息获得单元、请求发送单元和网页获得单元；所述路由信息获得单元，用于获得目标网页的路由信息；所述请求发送单元，用于根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；所述网页获得单元，用于将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。7.根据权利要求6所述的装置，其特征在于，所述路由信息获得单元，包括：组件加载子单元和路由信息获得子单元；所述组件加载子单元，用于加载所述目标网页对应的组件，其中，所述组件对应多个不同的目标网页；所述路由信息获得子单元，用于通过所述组件集成的vue-router功能获取所述目标网页的路由信息。8.根据权利要求6所述的装置，其特征在于，所述请求发送单元，包括：请求发送子单
元；所述请求发送子单元，用于根据所述路由信息中的url地址，通过xmlhttprequest对象向数据库发送所述http请求，以向所述数据库请求获得所述网页配置参数，其中，所述网页配置参数至少包括相应的amis配置参数和页面菜单信息。9.一种计算机可读存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时实现如权利要求1至5中任一项所述的前端网页开发方法。10.一种电子设备，其特征在于，所述电子设备包括至少一个处理器、以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如权利要求1至5中任一项所述的前端网页开发方法。
技术总结本发明公开了本发明提供的前端网页开发方法、装置、存储介质和电子设备，可以通过获得目标网页的路由信息；根据所述路由信息发送相应的请求，以请求获得预先配置的与所述路由信息相关联的网页配置参数；将所述网页配置参数解析为符合amis工具的语法内容，以便于所述amis工具根据所述语法内容解析得到符合浏览器解析规则的网页内容，其中，所述网页内容与所述目标网页对应。由此可以看出，本发明基于amis工具解析得到相应网页内容，无需技术人员逐一进行开发相应的功能，效率较高。效率较高。效率较高。
技术研发人员：刘功贺 李东 周红丽
受保护的技术使用者：湖南快乐阳光互动娱乐传媒有限公司
技术研发日：2022.03.30
技术公布日：2022/7/5
