用Java实现统一管理js文件的版本号

最新推荐文章于 2024-01-22 11:11:17 发布

幼稚鬼&海南仙女

最新推荐文章于 2024-01-22 11:11:17 发布

阅读量494

点赞数

分类专栏： Java 文章标签： javascript java 前端

本文链接：https://blog.csdn.net/weixin_41705627/article/details/121699002

版权

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 背景

当我们发布前端程序到服务器上后，如果对前端文件进行了修改，例如修改了引用的某个Js文件或css文件，此时重新上传用户可能无法看到更新后的效果，因为浏览器有缓存，当加载资源时发现名称是之前加载过的，就不会重新加载这个资源，需要手动清除缓存后才会更新，这对用户来说是非常不好的体验
因此我们一般会在js文件后添加版本号来避免缓存问题，例如：

<script src="xxx.js?v=1.0"></script>

但是如果每次更新都要挨个修改就可能会有遗漏并且不方便；因此想利用一个工具来集中管理这些版本号

2 需求分析

想实现在 json 文件中记录版本号信息，然后用工具读取这个json 文件，并将版本号信息添加给相应的 javascript 文件

3 实现

注：利用 Spring 的方式来实现

用到的依赖

<dependency>
     <groupId>org.projectlombok</groupId>
     <artifactId>lombok</artifactId>
     <optional>true</optional>
</dependency>
<dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.4</version>
</dependency>
<dependency>
      <groupId>org.json</groupId>
      <artifactId>json</artifactId>
      <version>20160810</version>
</dependency>
<dependency>
     <groupId>org.jsoup</groupId>
     <artifactId>jsoup</artifactId>
     <version>1.11.3</version>
</dependency>

3.1 工具类

读取 JSON 文件并操作 DOM 节点以添加版本号

package com.example.json_util.util;

public class JsonUtil {
    /**
     * 读取指定路径的JSON文件获取文件中的版本信息
     * @param filePath JSON文件的路径
     * 返回一个包含版本信息的item
     * */
    public PathItem readJsonFile(String filePath) throws IOException{
        File file=new File(filePath);
        String content= FileUtils.readFileToString(file,"UTF-8");
        JSONObject jsonObject=new JSONObject(content);
        // 将获取到的版本号信息放到PathItem中
        PathItem item = new PathItem();
        item.setCommonValue(jsonObject.getString("commonMethods"));
        item.setHttpUtilValue(jsonObject.getString("http_util"));
        item.setTokenUtilValue(jsonObject.getString("token_util"));
        item.setListGetValue(jsonObject.getString("listGet"));
        item.setMuiDarkValue(jsonObject.getString("mui_dark"));

        return item;
    }

    /**
     * 给index文件添加版本号
     * @param commonVersion commonMethods.js文件的版本号
     * @param httpVersion http_util.js文件的版本号
     * @param tokenVersion token_util文件的版本号
     * */
    public void addVersionToIndex(String commonVersion, String httpVersion, String tokenVersion) {
        File indexFile = new File("G:/Hbuilder Projects/contact-h5/index.html");
        try {
            Document document = Jsoup.parse(indexFile, "UTF-8", "http://127.0.0.1:8848/contact-h5/");
            // 修改资源的版本号
            resetNodeValue(document, commonVersion, httpVersion, tokenVersion, true);
            // 将修改的结果保存到本地
            saveFiles(document, indexFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 给web中的文件添加版本号
     * @param commonVersion commonMethods.js文件的版本号
     * @param httpVersion http_util.js文件的版本号
     * @param tokenVersion token_util.js文件的版本号
     * @param listVersion listGet.js文件的版本号
     * */
    public void addVersionToWeb(String commonVersion, String httpVersion, String tokenVersion, String listVersion) {
        File webFiles = new File("G:/Hbuilder Projects/contact-h5/web");
        if(webFiles.isDirectory()){
            File[] files = webFiles.listFiles();
            if (files != null) {
                for(File file: files){
                    // 给除error.html以外的文件添加资源版本号
                    if(!file.getName().equals("error.html")){
                        try {
                            Document document = Jsoup.parse(file, "UTF-8", "http://127.0.0.1:8848/contact-h5/web");
                            System.out.println(document.text());
                            // 修改资源的版本号
                            resetNodeValue(document, commonVersion, httpVersion, tokenVersion, false);

                            // 获取listGet节点
                            Element listNode = document.getElementById("listGet");
                            listNode.attr("src", "../js/methods/listGet.js?v=" + listVersion);

                            // 将修改的结果保存到本地
                            saveFiles(document, file);
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }
    }

    /**
     * 获取节点并重新给src属性赋值
     * @param commonVersion commonMethods.js的版本号
     * @param httpVersion http_util.js的版本号
     * @param tokenVersion token_util.js的版本号
     * @param document HTML的解析对象
     * @param isIndex 是否是index.html的标志位
     * */
    public void resetNodeValue(Document document, String commonVersion, String httpVersion,
                               String tokenVersion, boolean isIndex){
        String filePath;
        if(isIndex){
            filePath = "js/";
        }else{
            filePath = "../js/";
        }
        // 获取commonMethods节点
        Element commonNode = document.getElementById("commonMethods");
        commonNode.attr("src", filePath + "commonMethods.js?v=" + commonVersion);

        // 获取http_util节点
        Element httpNode = document.getElementById("httpUtil");
        httpNode.attr("src", filePath + "utils/http_util.js?v=" + httpVersion);

        // 获取token_util节点
        Element tokenNode = document.getElementById("tokenUtil");
        tokenNode.attr("src",  filePath+ "utils/token_util.js?v=" + tokenVersion);
    }

    /**
     * 保存修改结果
     * @param document 解析的HTML对象
     * @param file 要保存的文件
     * */
    public void saveFiles(Document document, File file){
        FileOutputStream fileOutputStream;
        try {
            fileOutputStream = new FileOutputStream(file, false);
            OutputStreamWriter outputStreamWriter = new OutputStreamWriter(fileOutputStream, StandardCharsets.UTF_8);
            outputStreamWriter.write(document.html());
            outputStreamWriter.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

3.2 实体类

用一个实体类来记录各个资源文件的版本号

@Data
public class PathItem {
    // commonMethods.js的版本号
    private String commonValue;
    // http_util.js的版本号
    private String httpUtilValue;
    // token_util.js的版本号
    private String tokenUtilValue;
    // listGet.js的版本号
    private String listGetValue;
    // mui_dark.css的版本号
    private String muiDarkValue;
}

3.3 服务层

接口

public interface ReadService {
    // 读取本地json文件并修改版本号
    void getJsonData();
}

实现类

@Service
public class ReadServiceImpl implements ReadService {
    @Override
    public void getJsonData() {
        // json文件的工具类
        JsonUtil jsonUtil = new JsonUtil();
        try {
            // 获取json文件中的版本号信息并放到item对象中
            var item = jsonUtil.readJsonFile("G:/Hbuilder Projects/contact-h5/json/version.json");
            // 分别获取各个文件的版本信息
            String commonValue = item.getCommonValue();
            String httpUtilValue = item.getHttpUtilValue();
            String tokenUtilValue = item.getTokenUtilValue();
            String listGetValue = item.getListGetValue();
            String muiDarkValue = item.getMuiDarkValue();

            // 修改index中的版本号
            jsonUtil.addVersionToIndex(commonValue, httpUtilValue, tokenUtilValue);
            // 修改web文件夹下的版本号
            jsonUtil.addVersionToWeb(commonValue, httpUtilValue, tokenUtilValue, listGetValue);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

3.4 controller层

用访问地址的方式实现更换功能

@RestController
public class ReadController {
    @Autowired
    private ReadService readService;

    @GetMapping("/json")
    public void getJsonData(){
        readService.getJsonData();
    }
}

4 使用

启动服务后访问 http://127.0.0.1:1121/json 即可对资源的版本号进行更新
ps：1121 是在 application.yml 中设置的端口号，根据自己的设置自行更改

暂时还没想好怎么通用的对JS文件进行版本号管理，有思路的欢迎在评论区友好交流

幼稚鬼&海南仙女

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Java实现统一管理js文件的版本号

当我们发布前端程序到服务器上后，如果对前端文件进行了修改，例如修改了引用的某个Js文件或css文件，此时重新上传用户可能无法看到更新后的效果，因为浏览器有缓存，当加载资源时发现名称是之前加载过的，就不会重新加载这个资源，需要手动清除缓存后才会更新，这对用户来说是非常不好的体验
复制链接

扫一扫

专栏目录