基于用户需求定制页面的方法技术

技术编号:33308991 阅读:8 留言:0更新日期:2022-05-06 12:20
本申请涉及一种基于用户需求定制页面的方法,包括:接收用户的页面定制需求,页面定制需求中包括用户在预先构建的组件库选择的需求组件名称。获取需求组件名称对应的组件信息。基于Vue

【技术实现步骤摘要】
基于用户需求定制页面的方法


[0001]本申请涉及前端页面搭建
,尤其涉及一种基于用户需求定制页面的方法。

技术介绍

[0002]在物流业蓬勃发展的今天,物流数据不仅仅可以表示公司的运营状况,还可以用来预测物流的轨迹,进而发现转运过程存在的问题。物流公司的高层管理者需要根据物流数据报表的展示趋势来做下一步的决策,因此物流数据的呈现至关重要。现有技术中,物流数据的报表一般都是在前端按照产品需求列出来,根据权限做一些隐藏,对权限相同的用户展示的内容相同,这样的系统虽然能笼统的满足用户查看数据的需求,但是由于同一权限的用户查看的物流数据内容相同,对仅关注某一领域物流数据的用户并不友好,若用户需要查看的几条物流数据关联的组件分布在不同的前端页面,则需要在这几个页面之间切换查看,用户体验不佳。

技术实现思路

[0003]为至少在一定程度上克服相关技术中物流数据报表的前端页面展示形式单一的问题,本申请提供一种基于用户需求定制页面的方法。
[0004]本申请的方案如下:
[0005]一种基于用户需求定制页面的方法,包括:
[0006]接收用户的页面定制需求,所述页面定制需求中包括用户在预先构建的组件库选择的需求组件名称;
[0007]获取所述需求组件名称对应的组件信息;
[0008]基于Vue

router框架和所述组件信息,生成定制化动态页面路由;
[0009]根据所述组件信息,获取对应的组件本地文件;
[0010]根据所述组件本地文件,在所述定制化动态页面路由中注册组件并进行加载;
[0011]将所述注册后的组件与对应的数据请求接口进行绑定。
[0012]优选的,在本申请一种可实现的方式中,所述获取所述需求组件名称对应的组件信息,包括:
[0013]确定所述需求组件名称对应的组件编码,根据所述组件编码创建需求组件列表;
[0014]根据所述需求组件列表生成对应的组件信息。
[0015]优选的,在本申请一种可实现的方式中,所述获取所述需求组件名称对应的组件信息后,所述方法还包括:
[0016]将所述组件信息与所述用户进行绑定并存入数据库。
[0017]优选的,在本申请一种可实现的方式中,还包括:
[0018]缓存所述定制化动态页面路由中的组件状态及数据。
[0019]优选的,在本申请一种可实现的方式中,所述将所述注册后的组件与对应的数据
请求接口进行绑定后,所述方法还包括:
[0020]拦截通过所述数据请求接口送入的请求进行权限验证;
[0021]拦截通过所述数据请求接口送入的返回结果进行返回结果分析处理,并对错误的返回结果进行收集。
[0022]本申请提供的技术方案可以包括以下有益效果:本申请中的基于用户需求定制页面的方法,包括:接收用户的页面定制需求,页面定制需求中包括用户在预先构建的组件库选择的需求组件名称。获取需求组件名称对应的组件信息。基于Vue

router框架和组件信息,生成定制化动态页面路由。根据组件信息,获取对应的组件本地文件,根据组件本地文件,在定制化动态页面路由中注册组件并进行加载,将注册后的组件与对应的数据请求接口进行绑定。本申请中,用户可以在预先构建的组件库选择自己需要查看的数据关联的组件,根据用户的页面定制需求生成用户的定制化动态页面路由,使得用户可以在自己定制的动态页面中查看自己需要的数据,提升用户体验。
[0023]应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本申请。
附图说明
[0024]此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。
[0025]图1是本申请一个实施例提供的一种基于用户需求定制页面的方法的流程示意图。
具体实施方式
[0026]这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
[0027]一种基于用户需求定制页面的方法,参照图1,包括:
[0028]S11:接收用户的页面定制需求,页面定制需求中包括用户在预先构建的组件库选择的需求组件名称;
[0029]定制化页面首先需要用户在预先构建的组件库选择需要的组件。为了方便用户确定自己需要的组件,本实施例中,组件库中的组件的展示方式为展示组件名称。
[0030]S12:获取需求组件名称对应的组件信息;
[0031]包括:
[0032]确定需求组件名称对应的组件编码,根据组件编码创建需求组件列表;
[0033]根据需求组件列表生成对应的组件信息。
[0034]本实施例中,为了后续方便根据用户选择的组件搭建定制化页面,为各组件分配唯一组件编码,并将组件的组件名称和组件编码进行绑定。
[0035]本实施例中,根据用户的页面定制需求中的需求组件名称确定用户需求的组件对应的组件编码。由于用户一般可能需要查看多条物流数据,所以一般会选择多个需求组件,
本实施例中,根据各组件的组件编码创建需求组件列表,后台根据需求组件列表生成对应的组件信息。
[0036]组件信息至少包括:组件名称、文件在本地名称、数据接口、组件编码等。
[0037]进一步的,获取需求组件名称对应的组件信息后,方法还包括:
[0038]将组件信息与用户进行绑定并存入数据库。
[0039]本实施例中将组件信息与用户进行绑定并存入数据库,用于后续生成用户的定制化页面,也便于后续查询历史数据。
[0040]S13:基于Vue

router框架和组件信息,生成定制化动态页面路由;
[0041]Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。Vue

router是Vue官方的路由管理器,它和Vue的核心深度集成,让构建单页面应用变得易如反掌。
[0042]本实施例中,基于Vue

router框架实现动态路由技术,结合动态路由技术,无论用户需要定制多少页面,都可以自动化的生成动态路由并不需要开发任何代码。
[0043]S14:根据组件信息,获取对应的组件本地文件;
[0044]由于后台提供的仅是组件信息,本实施例中可以但不限于通过前端打包工具Webpack中提供的require本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种基于用户需求定制页面的方法,其特征在于,包括:接收用户的页面定制需求,所述页面定制需求中包括用户在预先构建的组件库选择的需求组件名称;获取所述需求组件名称对应的组件信息;基于Vue

router框架和所述组件信息,生成定制化动态页面路由;根据所述组件信息,获取对应的组件本地文件;根据所述组件本地文件,在所述定制化动态页面路由中注册组件并进行加载;将所述注册后的组件与对应的数据请求接口进行绑定。2.根据权利要求1所述的方法,其特征在于,所述获取所述需求组件名称对应的组件信息,包括:确定所述需求组件名称对应的组件编码,根据所述组...

【专利技术属性】
技术研发人员:秦雨
申请(专利权)人:上海中通吉网络技术有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1