Front-End-Versionsverwaltung

1. Szenarioanforderungen

Wenn Benutzer unser Webprojekt verwenden, da es manchmal zu einer Aktualisierung der Produktionsumgebung kommt, wenn der Benutzer die Webseite vor dem Update lädt, wenn der Benutzer nach dem Update nicht aktualisiert, wird dies gelegentlich zu einem Fehler auf der Seite führen In diesem Fall fordern wir den Benutzer häufig zum Aktualisieren auf. Das ist in Ordnung, es handelt sich nicht um einen Fehler auf Geschäfts- oder Codeebene. Da diese Situation in letzter Zeit oft vorgekommen ist, hat mich der Chef gebeten, sie zu lösen.

2. Lösungen

Verwalten Sie Versionsnummern und führen Sie bei jedem Aufruf der Schnittstelle eine Versionsprüfung durch. Wenn die Prüfung bestanden wird, wird normal auf die Schnittstelle zugegriffen. Wenn die Prüfung fehlschlägt, wird ein spezieller Statuscode zurückgegeben. Das Frontend aktualisiert die Seite automatisch um die neuesten statischen Seitenressourcen zu erhalten.

3. Verwirklichung

Zunächst einmal ist es notwendig, die Versionsnummer jedes Mal zu ändern, wenn es gepackt wird, also die Versionsnummer automatisch zu ändern, was durch die Ausführung eines Stücks js beim Packen erreicht wird

Paket.json

{
    "name": "project",
	"version": "0.0.11",
	"lastBuildTime": "2023-02-24 17:28:52",
	"scripts": {
		"dev": "vite",
		"start": "vite",
		"build": "vite build --mode=production",
		"build:auto": "node ./myBuild.js && vite build --mode=production",
		"build:stag": "vite build --mode=staging",
		"serve": "vite preview"
	}
}

myBuild.js

const fs = require("fs")
const dayjs = require("dayjs")
const axios = require("axios")
// 构建版本号的函数，这里只简单做下递增，后面可以优化成每构建一定次数的版本之后几句自动给二级版本号加1
const versionGenerrator = (version) => {
  let newVersion = Number(version[2]);
  console.log([version[0], version[1], ++newVersion].join("."));
  return [version[0], version[1], ++newVersion].join(".");
};
// 设置版本号--传入版本号并保存至数据库，本地也重新生成package.json的文件
const setVersion = (version) => {
  // 构造传入后端接口的参数
  let data = {
    id: 59,
    paramKey: "version_web",
    paramValue: version,
  };
  try {
    axios
      .post(
        "https://gateway.xxxxxxx.com/platform/config/updateByKey",
        data,
        {
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
        }
      )
      .then((response) => {
        if (response.data?.code == 200 && response.data?.data == 1) {
          console.log("文件版本号修改成功，开始写入本地文件");
          packageJson.version = version;
          packageJson.lastBuildTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
          fs.writeFile(
            "./package.json",
            JSON.stringify(packageJson, null, "\t"),
            (err) => {
              if (err) {
                console.log("写入文件失败，请检查是否拥有文件夹权限", err);
              } else {
                console.log("文件写入成功-->" + packageJson.lastBuildTime);
              }
            }
          );
        }
      });
  } catch (error) {
    console.log("版本号写入接口失败，已停止");
  }
};
//  先读取package.json
let packageJson = JSON.parse(fs.readFileSync("./package.json"));
//  构建新的版本号
let version = versionGenerrator(packageJson.version.split("."));
// 调用接口设置到后端并且声成新的package.json
setVersion(version);

Bisher wurde die Versionsnummer automatisch geändert und an den Server gesendet. Der nächste Schritt besteht darin, die Versionsnummer bei jedem Aufruf der Schnittstelle zu überprüfen. Ich entscheide mich dafür, die Überprüfungsaktion direkt auf das Gateway zu legen. Wenn die Überprüfung fehlschlägt, kehrt sie zurück ein 505-Statuscode. Was das Frontend tun muss, ist die aktuelle Versionsnummer in die Header zu schreiben, wenn die Schnittstelle aufgerufen wird.Diese Operation wird auf dem von uns paketierten axios-Request-Interceptor und -Response-Interceptor abgelegt.

// 请求拦截
service.interceptors.request.use(
  (config) => {
    // JWT鉴权处理
    if (store.getters["user/token"]) {
      config.headers["Token"] = store.state.user.token;
    }
    config.headers["version_web"] = version; //版本号，从package.json中引入
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  (response) => {
    if(response.code==505){
        ElMessage.error("检查到版本号不一致自动刷新页面");
        setTimeout(() => {
          window.location.reload();
        }, 3000);
    }
  }
);

Diese Funktion ist hier vollständig realisiert.Wenn der Client-Browser die statische Datei der Version 0.0.1 lädt und die Versionsnummerin der Datenbank 0.0.2 ist, wird die Aufrufschnittstelle 505 zurückgeben und dieSeite automatisch neu laden. Nach einer Diskussion mit unserer Back-End-Architektur war er jedoch der Meinung, dass diese Implementierungsmethode für das Back-End zu viel kosten würde. Er sagte, dass es am besten sei, das Publish-Subscribe-Modell zu verwenden. Ich bin mir nicht ganz sicher, wie ich abonnieren soll in diesem szenario kenne ich auch nicht den mainstream im markt, die lösung ist die, die ich mir ausgedacht und so umgesetzt habe. Wenn Sie einen kleinen Partner haben, der versteht, senden Sie mir bitte eine private Nachricht und fragen Sie nach bezahlter Hilfe.