列の目標
このコラムでは、vue と要素 UI の共同テクノロジー スタックの制御の下で、柔軟な使用のための効果的なソース コードの例と情報ポイントの紹介を提供します。
(1) vue2 のいくつかの基本操作を提供します: インストール、参照、テンプレートの使用、計算、監視、ライフサイクル (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured、components、)、 $root 、 $parent 、 $children 、 $slots 、 $refs 、 props、 $emit 、eventbus 、provide / inject、Vue.observable、$listeners、$attrs、$nextTick 、v-for、v-if、v-else 、v-else-if、v-on、v-pre、v-cloak、v-once、v-model、v-html、v-text、キープアライブ、スロット スコープ、フィルター、v-bind、。 stop、.native、ディレクティブ、mixin、レンダリング、国際化、Vue Router など。
(2) 提供要素 UI の经典操作: -cascader、el-input-number、el-switch、el-slider、el-time-picker、el-date-picker、el-upload、el-rate、el-color -ピッカー、el-transfer、el-form、el-table、el-tree、el-pagination、el-badge、el-avatar、el-skeleton、el-empty、el-descriptions、el-result、el-statistic 、el-alert、v-loading、$ message、$alert、$prompt、$confirm、$notify、el-breadcrumb、el-page-header、el-tabs、el-dropdown、el-steps、el-dialog、 el-tooltip、el-popover、el-popconfirm、el-card、el-carousel、el-collapse、el-timeline、el-divider、el-calendar、el-image、el-backtop、el-infinite-scroll、エルドロワー等
この記事の内容
アプリケーションシナリオ
vue プロジェクトで作業している場合、新しいバージョンがパッケージ化されてサーバーにリリースされるたびに、対応する js、css、およびその他のファイルのフィンガープリントが変更されます。ホットアップデートを行うにはどうすればよいですか?著者のプロジェクトでは、多くのユーザー関連情報がローカルストレージに保存されています。新しいリリースが作成されると、一部の情報を変更する必要があります。このとき、ユーザーは再度ログインして情報を再取得し、ローカルストレージに保存する必要があります。
1. リリースバージョンを設定し、統一されていない場合は強制的にログアウトし、再度ログインします。
ソフトウェア開発プロセスでは、ソフトウェアのバージョンの管理と制御を容易にするために、通常、ソフトウェア開発の進捗状況とリリース計画に基づいて、対応するバージョン番号のルールが策定されます。一般的なバージョン番号の形式には次のものがあります。
- メジャー バージョン番号: ソフトウェアのメジャー アップデートと改良点を示します。通常、ソフトウェアは、機能に大きな変更や互換性がない場合にアップグレードされます。通常、番号が使用されます。急行。
- マイナー バージョン番号: ソフトウェアのマイナー アップデートと改善を示します。通常、ソフトウェアに特定の改善や新機能が追加された場合、ソフトウェアはアップグレードされます。通常、数字は次のとおりです。中古の特急です。
- パッチ バージョン番号: ソフトウェアの修復とバグ修正を示します。通常、更新バージョンはソフトウェアに脆弱性やエラーが発生したときにリリースされ、通常は番号で表されます。 。
- ビルド バージョン番号: ソフトウェアのコンパイル済みバージョンとビルド番号を示します。通常、異なるビルド バージョンを区別するために使用され、通常は数字または文字で表されます。
(1) main.jsにバージョン番号を設定する
(2) メインページで、新しくリリースされたバージョンがローカルストレージのバージョン番号と一致しているかどうかを確認します。
getVersion(){
let v = localStorage.getItem("version");
if (v!= null) {
if(v!=this.$root.version){
this.$router.push({
path: "/login"})
}
} else {
this.$router.push({
path: "/login"})
}
},
マウントされたライフサイクルで呼び出します
mounted() { … this.getVersion(); }
(3) ログインページのlocalStorageのバージョン項目の追加と削除を決定
mounted(){ localStorage.removeItem(“バージョン”); }
この文をログイン成功関数に追加します
localStorage.setItem(“バージョン”, this.$root.version)
この時点でバージョンが一致していない場合は、再度ログインして新しいバージョン番号情報を取得します。
2. クライアントがハングアップし続け、ページが閉じないため、定期的に判断して強制的に再ログインする必要があります。
ブロガーはこの記事のソリューションを採用しましたhttps://blog.csdn.net/weixin_42000816/article/details/131800399。
新しいソリューションのアイデアは、index.html ファイルをポーリングしてリクエストし、その中の js ファイルを解析することです。各 js ファイルには Vue パッケージ化後にフィンガープリント識別があるため、各パッケージ化後にフィンガープリントを比較し、存在するかどうかを分析できます。ファイルに変更が加えられた場合、ユーザーは更新するように求められます。
自動更新.js
let lastSrcs; //上一次获取到的script地址
let needTip = true; // 默认开启提示
const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm;
async function extractNewScripts() {
const html = await fetch('/?_timestamp=' + Date.now()).then((resp) => resp.text());
scriptReg.lastIndex = 0;
let result = [];
let match;
while ((match = scriptReg.exec(html))) {
result.push(match.groups.src)
}
return result;
}
async function needUpdate() {
const newScripts = await extractNewScripts();
if (!lastSrcs) {
lastSrcs = newScripts;
return false;
}
let result = false;
if (lastSrcs.length !== newScripts.length) {
result = true;
}
for (let i = 0; i < lastSrcs.length; i++) {
if (lastSrcs[i] !== newScripts[i]) {
result = true;
break
}
}
lastSrcs = newScripts;
return result;
}
const DURATION = 5000;
function autoRefresh() {
setTimeout(async () => {
const willUpdate = await needUpdate();
if (willUpdate) {
const result = confirm("页面有更新，请刷新查看");
if (result) {
location.href('/login');
}
needTip = false;
}
if(needTip){
autoRefresh();
}
}, DURATION)
}
autoRefresh();
注: オリジナルの作成者の判断とは少し異なります。つまり、ページは自動的に更新されず、ログイン ページにジャンプします。
main.jsで導入
「@/utils/auto-update.js」をインポートします
バックエンド処理ソリューション
その後、バックエンドの同僚が、よりシンプルで実用的な解決策を考え出しました。それは、nginx 上にネゴシエーション キャッシュと強力なキャッシュを設定し、フロントエンドで処理する必要をなくすというものでした。
location /test {
#try_files $uri $uri/ /notFound.html;
#index index.html index.htm;
if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
add_header Cache-Control "public, max-age=25920000";#非html缓存1个月
}
if ($request_filename ~* ^.*[.](html|htm)$) {
add_header Cache-Control "public, no-cache";
}
}
详情参考：https://article.juejin.cn/post/7215881683294879801