本发明涉及单页面web前端应用，尤其涉及一种基于单页面web前端自动更新版本的方法及系统。
背景技术：
1、web前端不同于app应用有清晰的版本概念，每次发布新版本都会强制提醒客户端下载最新的资源包以完成更新操作。web前端的运行环境是浏览器，浏览器的缓存策略是为了提高网页加载速度和减少服务器负载的重要机制。浏览器的缓存策略虽然可以减少服务端的交互次数来提升响应效率，但是对于单页面的web前端应用来说，在每次发布完最新版本后，浏览器由于已经缓存过历史的静态资源，导致此时用户访问时，不是最新版本的代码。每次发布版本后还需要线下告知用户手动进行刷新，以便获取最新版本，整个过程繁琐且低效。
2、为此，本发明提供了一种基于单页面web前端自动更新版本的方法及系统。
技术实现思路
1、基于此，有必要针对上述技术问题，提供一种基于单页面web前端自动更新版本的方法及系统，该方法旨在解决每次发布最新版本后，单页面web前端应用能够实现自动更新版本，让用户能够第一时间访问到最新资源，提升新应用的访问效率和用户体验。
2、根据本发明的一方面，提供了一种基于单页面web前端自动更新版本的方法，包括：步骤s1：构建单页面应用，根据预设的路由匹配规则，配置页面和路由的映射关系，以实现路由切换时不会从web前端服务器请求新的html；步骤s2：初始化前端代码仓库的package.json 配置文件的版本信息；步骤s3：将异步请求的请求头信息中添加版本信息字段，得到包含版本信息的请求头数据；步骤s4：在web前端服务器中，设置html不缓存配置信息和路由请求配置信息；步骤s5：配置、打包、执行测试和发布流水线，以实现基于流水线的触发机制获取最新版本信息并保存至后端服务器的数据库中；步骤s6：当触发异步请求操作时，后端服务器接收并解析web前端服务器发送的包含当前版本信息的请求头数据，将解析出的当前版本信息和数据库中存储的版本信息进行比较，若当前版本信息低于数据库中存储的版本信息，则触发浏览器从web前端服务器拉取最新html的执行动作，否则，则确定当前版本信息为最新版本信息，并将异步请求的结果信息返回至web前端服务器。
3、在一些实施例的一些可选的实现方式中，所述步骤s1包括：步骤s1.1：基于react架构，构建单页面应用，并基于react router，设置前端路由；步骤s1.2：根据预设的路由匹配规则，配置页面和前端路由的映射关系；步骤s1.3：监听前端路由的变化，根据页面和前端路由的映射关系，显示相应的页面。
4、在一些实施例的一些可选的实现方式中，所述步骤s2包括：获取前端代码仓库的package.json 配置文件，初始化package.json 配置文件的版本信息。
5、在一些实施例的一些可选的实现方式中，所述步骤s5中，配置和打包流水线包括：步骤s5.1：设置对应的前端代码仓库的地址；步骤s5.2：将master分支设置为上线分支；步骤s5.3：拉取master分支上的代码，并读取package.json 配置文件的版本信息；步骤s5.4：将master分支上的代码打包为编译脚本；步骤s5.5：设置拉取的三方镜像源；步骤s5.6：设置部署的web前端服务器的地址；步骤s5.7：采用开源打包工具打包页面包含的资源，并将将打包后的资源部署至对应的web前端服务器的目录下；步骤s5.8：将对应页面的版本信息同步发送至后端服务器，并存储于后端服务器的数据库中。
6、在一些实施例的一些可选的实现方式中，所述步骤s5中，执行测试和发布流水线包括：步骤s5.9：修改单页面应用中某一测试页面的页面信息，更新package.json 配置文件的版本信息，得到对应的测试更新版本信息；步骤s5.10：将测试更新版本信息同步至master分支；步骤s5.11：重复执行步骤s5.3-s5.8；步骤s5.12：访问web前端服务器，在对应的访问测试页面下，获取包含测试更新版本信息的请求头数据，将获取的测试更新版本信息与package.json 配置文件的测试更新版本信息进行对比，当没有差异时，则发布流水线。
7、在一些实施例的一些可选的实现方式中，所述步骤s6包括：当触发异步请求操作时，后端服务器接收并解析web前端服务器发送的包含当前版本信息的请求头数据，将解析出的当前版本信息和数据库中存储的版本信息进行比较，判断当前版本信息是否低于数据库中存储的版本信息，若当前版本信息低于数据库中存储的版本信息，则web前端服务器接收后端服务器返回的更新版本状态标识信息，并通过信息提示方式通知用户有新版本发布，以及触发浏览器从web前端服务器拉取最新html的执行动作；若当前版本信息高于或等于数据库中存储的版本信息，则确定当前版本信息为最新版本信息，并将异步请求的结果信息返回至web前端服务器。
8、在一些实施例的一些可选的实现方式中，所述后端服务器接收并解析web前端服务器发送的包含当前版本信息的请求头数据，包括：后端服务器接收web前端服务器发送的包含当前版本信息的请求头数据，采用request.getheadernames方法读取包含当前版本信息的请求头数据，得到解析出的当前版本信息。
9、根据本发明的第二方面，提供了一种基于单页面web前端自动更新版本的系统，包括：构建模块，用于构建单页面应用，根据预设的路由匹配规则，配置页面和路由的映射关系，以实现路由切换时不会从web前端服务器请求新的html；版本信息初始化模块，用于初始化前端代码仓库的package.json 配置文件的版本信息；第一信息设置模块，用于将异步请求的请求头信息中添加版本信息字段，得到包含版本信息的请求头数据；第二信息设置模块，用于在web前端服务器中，设置html不缓存配置信息和路由请求配置信息；流水线部署模块，用于配置、打包、执行测试和发布流水线，以实现基于流水线的触发机制获取最新版本信息并保存至后端服务器的数据库中；判断模块，用于当触发异步请求操作时，后端服务器接收并解析web前端服务器发送的包含当前版本信息的请求头数据，将解析出的当前版本信息和数据库中存储的版本信息进行比较，若当前版本信息低于数据库中存储的版本信息，则触发浏览器从web前端服务器拉取最新html的执行动作，否则，则确定当前版本信息为最新版本信息，并将异步请求的结果信息返回至web前端服务器。
10、根据本发明的第三方面，一种电子设备，包括存储器、处理器以及存储在存储器中并且可以在处理器上运行的计算机程序，该处理器执行计算机程序时实现上述方法的步骤。
11、根据本发明的第四方面，提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。
12、本发明的优点及有益效果在于：本发明提供的基于单页面web前端自动更新版本的方法及系统，该方法通过在将前端应用打包为单页面应用时，配置页面和路由的映射关系，能够实现路由切换时不会从web前端服务器请求新的html，同时，通过发布流水线，能够在web前端服务器每次发布时获取最新的版本信息，并同步发送至后端服务器，后端服务器会对所有的异步请求作版本信息比对校验，若当前版本信息低于数据库中存储的版本信息，则返回更新版本状态标识信息，以及触发浏览器从web前端服务器拉取最新html的执行动作，以便在每次发布最新版本后，单页面web前端应用能够实现自动更新版本的目的，不仅使用户能够第一时间访问到最新资源，又能高效的使用浏览器的缓存策略，还能够提升web用户的交互体验和系统的易用性，减少用户的更新操作，并降低了沟通确认成本，进一步提升了新应用的访问效率和用户体验。
1.一种基于单页面web前端自动更新版本的方法，其特征在于，包括：
2.根据权利要求1所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述步骤s1包括：
3.根据权利要求1所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述步骤s2包括：
4.根据权利要求1所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述步骤s5中，配置和打包流水线包括：
5.根据权利要求4所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述步骤s5中，执行测试和发布流水线包括：
6.根据权利要求1所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述步骤s6包括：
7.根据权利要求6所述的一种基于单页面web前端自动更新版本的方法，其特征在于，所述后端服务器接收并解析web前端服务器发送的包含当前版本信息的请求头数据，包括：
8.一种基于单页面web前端自动更新版本的系统，其特征在于，包括：
9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并且可以在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述方法的步骤。
