一种前端升级后免清缓存的页面加载方法及装置制造方法及图纸

技术编号:30831981 阅读:21 留言:0更新日期:2021-11-18 12:48
本技术运用于前端页面开发领域,提供了一种前端升级后免清缓存的页面加载方法及装置,主要解决解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题,主要方案包括在配置文件中将版本号加入js,以便页面渲染时按照版本号加载;配置文件中将版本号加入json.js,在生成打包文件的路径中包含版本号;配置文件中版本号加入js,以便页面渲染时按照版本号加载;数据库中新建用于存储新版本号的表,将版本号对应信息写入表中,作为与前端文件版本号的比对标准;在前端页面中请求后端程序,使之同步查询版本号数据表;将查询到的版本号返回前端,前端根据返回的版本号加载js文件并渲染页面。件并渲染页面。件并渲染页面。

【技术实现步骤摘要】
一种前端升级后免清缓存的页面加载方法及装置


[0001]本技术运用于前端页面开发领域,实现对前端页面加载进行控制,解决每次前端升级后用户都需要清理缓存并重新登录才能使用新功能的难题。

技术介绍

[0002]应用系统前端代码升级后,用户在浏览器端需要清理缓存,并再次登录才能使用最新发布的功能。因浏览器端为多用户,用户体验较差,故需对前端页面加载方式进行优化,使用户不用清缓存就能使用新版功能。

技术实现思路

[0003]本方案主要解决问题是基于webpack工具对前端代码进行打包,然后通过AJAX数据交互方式,在页面加载时向后台请求和接收数据,获取前端页面最新版本号并根据该版本号渲染页面,解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题。
[0004]本专利技术为解决上述技术问题采用以下技术手段:
[0005]一种前端升级后免清缓存的页面加载方法,包括以下步骤:
[0006]步骤1:在webpack配置文件webpack.base.config.js中将版本号加入js,以便页面渲染时按照版本号加本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端升级后免清缓存的页面加载方法,其特征在于,包括以下步骤:步骤1:在webpack配置文件webpack.base.config.js中将版本号加入js,以便页面渲染时按照版本号加载;步骤2:配置文件insertjson.js中将版本号加入json.js,在生成打包文件的路径中包含版本号;步骤3:配置文件webpack.childpro.config.js中版本号加入js,以便页面渲染时按照版本号加载;步骤4:数据库中新建用于存储新版本号的表,将版本号对应信息写入表中,作为与前端文件版本号的比对标准;步骤5:在前端页面中请求后端程序,使之同步查询版本号数据表;步骤6:springcloudgateway服务网关接到http请求后,分发给后端并执行接口逻辑,最后将查询到的版本号返回前端,前端根据返回的版本号加载js文件并渲染页面。2.根据权利要求1所述的一种前端升级后免清缓存的页面加载方法,其特征在于,所述步骤1包括以下步骤:步骤1.1:将更新后前端的版本号加入到配置文件webpack.base.config.js中,打包后的js文件后缀会包含该版本号;步骤1.2:用配置文件的参数初始化Compiler对象,加载所有配置的插件,执行对象的run方法开始执行编译;步骤1.3:确定入口:根据配置中的entry找出所有的入口文件;步骤1.4:编译模块:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;步骤1.5:完成模块编译:在经过上一步使用Loader翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;步骤1.6:输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表;步骤1.7:输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统,生成后缀中包含版本号的js文件。3.根据权利要求1所述的一种前端升级后免清缓存的页面加载方法,其特征在于,所述步骤5包括以下步骤:步骤5.1:创建一个异步调用对象XMLHttpRequest;步骤5.2:创建一个新的HTTP请求查询数据库版本,并指定该HTTP请求的方法、URL及验证信息;步骤5.3:设置响应HTTP请求状态变化的函数,在该函数中判断XMLHttpRequest对象的readyState属性值,该属性值为success才继续执行;步骤5.4:设置获取服务器返回数据的语句,判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值是否等于200,只有该属性值为200,才表示异步调用成功;步骤5.5:使用XMLHttpRequest对象的send()方法将HTTP请求发送到Web服务器上。4.根据权利要求1所述的一种前端升级后免清缓存的页面加载方法,其特征在于,所述
步骤6包括以下步骤:步骤6.1:网页客户端向Spring Cloud Gateway发出请求;步骤6.2:在Gateway Handler Mapping中找到与请求相匹配的路由,将其发送到Gateway Web Handler;步骤6.3:Gateway Web Handler再通过指定的过滤器链来将请求发送到实际的服务执行业务逻辑实现查询数据库版本号,然后将版本号返回客户端(网页);步骤6.4:前端根据返回的版本号加载js文件并渲染页面。5.一种前端升级后...

【专利技术属性】
技术研发人员:史晋彪李耀田骏李业陈胜灵
申请(专利权)人:武汉众邦银行股份有限公司
类型:发明
国别省市:

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

1