静态资源Html、css、js文件在浏览器访问时,浏览器会对其进行缓存。修改了静态资源后,如果不使用浏览器的清除缓存功能,代码不会马上生效。为了让代码修改后,使马上生效,需要在加载的文件后面增加版本号。
Laytp
框架修改静态文件版本号的方法十分简单。
修改两个框架入口文件
/public/admin/index.html
框架主界面
/public/admin/login.html
登录界面
将如下部分的静态资源版本号进行修改
localStorage.setItem("version","1.0.2.Release");//静态资源版本号
加载css和js使用document.write
进行加载,文件后面加上v=版本号
。示例:
document.write("<link rel='stylesheet' href='/static/admin/css/admin.css?v="+localStorage.getItem("version")+"'>");
平常开发,我们会经常修改js文件,用修改版本号的版本更新js会影响开发效率。
Chrome和Firefox等浏览器都有F12打开调试工具的功能。在网络栏有停用缓存或者禁用缓存英文是Disable Cache
,将这个选项前面的勾点上,不要关闭调试工具,那么每次请求就都不会有浏览器缓存了
为了保证正在使用后台的用户,能及时运行最新的js代码,新增接口 /admin.common/getStaticVersion
返回最新的静态资源版本号。
/**
* 获取静态资源版本号
* 静态资源版本号三个地方需要一致,这个前提条件很重要
* /public/admin/index.html localStorage.setItem("version","4.0.0.Release");//静态资源版本号
* /public/admin/login.html localStorage.setItem("version","4.0.0.Release");//静态资源版本号
* /app/controller/admin/Common.php getStaticVersion方法返回的version值
* 本接口的作用:
* 程序员修改了js文件,css文件时,需要修改静态资源版本号,否则浏览器会缓存旧文件
* 哪怕三处地方都修改了,前端用户生效最新的静态资源的前提是,需要刷新整个页面
* 对于正在使用后台的用户,在没有刷新整个页面时,不会获取最新的静态资源
* 为了能让正在使用后台的用户能及时刷新页面运行最新的静态资源代码,这里提供获取静态资源版本号的接口
* 前端代码什么时机会请求此接口:
* - 一开始想的是,前端循环请求此接口,发现与本地版本号不一致就弹窗刷新,但是循环请求此接口会影响开发体验,因为循环请求接口在F12的调试工具里面会不断展示AJAX请求
* - 优化解决方案:
* - facade.ajax函数执行完成会请求此接口,实际请求方法,facade.getStaticVersion()
* - 数据表格渲染完成,会请求此接口
* @return bool|string|\think\response\Json
*/
public function getStaticVersion()
{
return $this->success('获取成功', ['version' => ConfServiceFacade::get('system.basic.adminStaticVersion', '4.0.0.Release')]);
}
testtest