一种前端Web响应数据库反馈方法技术

技术编号:38811415 阅读:21 留言:0更新日期:2023-09-15 19:50
本发明专利技术涉及界面响应布局技术领域,具体涉及一种前端Web响应数据库反馈方法,包括:数据库中包含所有客户端所需数据,所述数据库反应包括以下步骤:步骤一:用户初步接入,在初次接入时识别用户信息,并获取对用户端显示屏数据以及操作区阈值,并对该数据进行标记,同时对接入的ID进行标记;步骤二:布局;步骤三:引入节点链接;步骤四:数据库的响应;相比于现有技术方案,本专利的响应式布局方法和装置具有更高的灵活性和可靠性,能够更好地适应不同设备和屏幕大小的需求,实现了页面布局的自适应调整。此外,本专利还采用了基于数据驱动的方式,通过用户行为数据来动态调整页面布局,提高了页面布局的灵活性和可靠性。页面布局的灵活性和可靠性。页面布局的灵活性和可靠性。

【技术实现步骤摘要】
一种前端Web响应数据库反馈方法


[0001]本专利技术涉及界面响应布局
,尤其涉及一种前端Web响应数据库反馈方法。

技术介绍

[0002]随着互联网技术的不断发展,人们对于网页的要求越来越高。不同的用户群体对于页面的布局和交互方式也有着不同的需求。现有技术方案虽然已经实现了部分响应式布局,但是仍然存在一些缺点和不足,例如无法适应不同设备和屏幕大小的需求,页面布局不够灵活等。
[0003]现有技术方案的缺点和不足:
[0004]现有技术方案虽然已经实现了部分响应式布局,但是仍然存在一些缺点和不足,例如无法适应不同设备和屏幕大小的需求,页面布局不够灵活等。

技术实现思路

[0005]有鉴于此,本专利技术的目的在于提出一种前端Web响应数据库反馈方法,以解决对于现有技术中界面响应布局不灵活以及界面布局不规律的问题。
[0006]基于上述目的,本专利技术提供了一种前端Web响应数据库反馈方法,首先建立对应所需数据库,且数据库中包含所有客户端所需数据,所述数据库反应包括以下步骤:
[0007]步骤一:用户初步接入,在初次接入时识别用户信息,并获取对用户端显示屏数据以及操作区阈值,并对该数据进行标记,同时对接入的ID进行标记;
[0008]步骤二:布局,根据步骤一中识别的客户端显示屏以及操作区阈值进行响应界面布局;
[0009]步骤三:引入节点链接,根据步骤二中的布局结果中的操作界面数据引入对应节点链接;
[0010]步骤四:数据库的响应,用户进入对应节点后,再次重复步骤一至步骤三。
[0011]所述节点链接的铺设包括以下步骤:
[0012]S1:数据库提供数据,布局阶段由云端获取数据库信息并引入布局进行数据界面以及操作界面布局;
[0013]S2:数据库反馈,将数据库中数据根据步骤三的节点链接调取数据库中数据,并反馈至响应端对调取数据进行布局并由客户端显示布局详情。
[0014]所述数据库中至少存储两组数据。
[0015]所述ID接入后进入后识别客户接入设备的基础信息,并且存储在云端中,当对应ID接入后由云端调取数据进行对比判断,最终再由响应布局分析对数据库调取的数据进行界面布局。
[0016]所述响应界面布局基于深度学习的Web前端技术,包括客户端展示的模块。
[0017]所述该步骤运用于手机端、PC端、平板电脑端和TV端。
[0018]所述响应界面布局采用HTML5、CSS3和JAVASCRIPT为调整基础程序。
[0019]本专利技术的有益效果:提高用户体验,相比于现有技术方案,本专利的响应式布局方法和装置具有更高的灵活性和可靠性,能够更好地适应不同设备和屏幕大小的需求。具体来说,本专利采用了CSS3中的媒体查询和动画效果等技术,实现了页面布局的自适应调整。此外,本专利还采用了基于数据驱动的方式,通过用户行为数据来动态调整页面布局,提高了页面布局的灵活性和可靠性。
附图说明
[0020]为了更清楚地说明本专利技术或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本专利技术,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
[0021]图1为本专利技术整体立体结构示意图。
具体实施方式
[0022]为使本专利技术的目的、技术方案和优点更加清楚明白,以下结合具体实施例,对本专利技术进一步详细说明。
[0023]需要说明的是,除非另外定义,本专利技术使用的技术术语或者科学术语应当为本专利技术所属领域内具有一般技能的人士所理解的通常意义。本专利技术中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性,而只是用来区分不同的组成部分。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同,而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接,而是可以包括电性的连接,不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系,当被描述对象的绝对位置改变后,则该相对位置关系也可能相应地改变。
[0024]实施例一:
[0025]首先建立对应所需数据库,且数据库中包含所有客户端所需数据,所述数据库反应包括以下步骤:
[0026]步骤一:用户初步接入,在初次接入时识别用户信息,并获取对用户端显示屏数据以及操作区阈值,并对该数据进行标记,同时对接入的ID进行标记;
[0027]步骤二:布局,根据步骤一中识别的客户端显示屏以及操作区阈值进行响应界面布局;
[0028]步骤三:引入节点链接,根据步骤二中的布局结果中的操作界面数据引入对应节点链接;
[0029]步骤四:数据库的响应,用户进入对应节点后,再次重复步骤一至步骤三。
[0030]所述数据库中至少存储两组数据。
[0031]所述ID接入后进入后识别客户接入设备的基础信息,并且存储在云端中,当对应ID接入后由云端调取数据进行对比判断,最终再由响应布局分析对数据库调取的数据进行界面布局。
[0032]所述响应界面布局基于深度学习的Web前端技术,包括客户端展示的模块。
[0033]所述该步骤运用于手机端、PC端、平板电脑端和TV端。
[0034]所述响应界面布局采用HTML5、CSS3和JAVASCRIPT为调整基础程序。
[0035]其中,本专利技术如图1所示,采用了HTML5、CSS3、JAVASCRIPT中的媒体查询和动画效果等技术,实现了页面布局的自适应调整。具体来说,本专利通过监听浏览器窗口大小变化事件,获取用户屏幕大小信息,然后根据用户屏幕大小信息来动态调整页面布局。此外,本专利还采用了基于数据驱动的方式,通过用户行为数据来动态调整页面布局,提高了页面布局的灵活性和可靠性。
[0036](2)技术方案的具体实现:
[0037](2.1)运用javacript编写特定的比例X(width)=>Y(height)的缩放scale比例1:1同时设定一个通用的像素值如:width=1920,height=1080;宽高比例baseProportion=wdith/height
[0038](2.2)创建一个工具类(函数)如calcRate,在工具类里面监听设备的宽和高比例如:currentRate=window.innerWidth/window.innerHeight,
[0039]如果设备比例大于通用比例currentRate>baseProportion表示更宽:
[0040]scale.width=((window.innerHeight*baseProportion)/baseWidth).toFixed(5)
[0041]scale.height=(windo本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种前端Web响应数据库反馈方法,首先建立对应所需数据库,且数据库中包含所有客户端所需数据,其特征在于,所述数据库反应包括以下步骤:步骤一:用户初步接入,在初次接入时识别用户信息,并获取对用户端显示屏数据以及操作区阈值,并对该数据进行标记,同时对接入的ID进行标记;步骤二:布局,根据步骤一中识别的客户端显示屏以及操作区阈值进行响应界面布局;步骤三:引入节点链接,根据步骤二中的布局结果中的操作界面数据引入对应节点链接;步骤四:数据库的响应,用户进入对应节点后,再次重复步骤一至步骤三。2.根据权利要求1所述的一种前端Web响应数据库反馈方法,其特征在于,所述节点链接的铺设包括以下步骤:S1:数据库提供数据,布局阶段由云端获取数据库信息并引入布局进行数据界面以及操作界面布局;S2:数据库反馈,将数据库中数据根据步骤三的节点链接调取数据库中数据,并反馈至响应端对调取数据进行...

【专利技术属性】
技术研发人员:郑能欢请求不公布姓名请求不公布姓名请求不公布姓名
申请(专利权)人:深圳优制云工业互联网有限公司
类型:发明
国别省市:

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

1