驗(yàn)應(yīng)用:多語言測(cè)驗(yàn)集管理、本地構(gòu)建與 Azure 靜態(tài)站點(diǎn)部署)
Data-Science-For-Beginners 測(cè)驗(yàn)應(yīng)用多語言測(cè)驗(yàn)集管理、本地構(gòu)建與 Azure 靜態(tài)站點(diǎn)部署【免費(fèi)下載鏈接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!項(xiàng)目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本文以本倉庫中測(cè)驗(yàn)應(yīng)用quiz-app的說明文檔為核心系統(tǒng)講解 Data-Science-For-Beginners 課程配套的課前/課后測(cè)驗(yàn)應(yīng)用如何按既有約定新增一個(gè)語言的測(cè)驗(yàn)集JSON 結(jié)構(gòu)、index.js導(dǎo)入約定、語言下拉框與?loc查詢參數(shù)、如何在本地完成安裝、開發(fā)編譯、生產(chǎn)構(gòu)建與代碼檢查以及如何將應(yīng)用部署到 Azure Static Web Apps含完整的 GitHub Actions workflow 示例。讀完本文后你可以獨(dú)立完成測(cè)驗(yàn)集的多語言擴(kuò)展并把應(yīng)用以 CI/CD 方式發(fā)布到 Azure。測(cè)驗(yàn)應(yīng)用概覽課程配套的 40 道測(cè)驗(yàn)測(cè)驗(yàn)應(yīng)用為數(shù)據(jù)科學(xué)課程共 20 課提供課前pre-lecture與課后post-lecture測(cè)驗(yàn)是課程學(xué)習(xí)閉環(huán)的一部分。文檔明確說明該課程共有 40 個(gè)測(cè)驗(yàn)編號(hào)從 0 開始計(jì)數(shù)并按主題拆分成若干分組grouping每個(gè)分組對(duì)應(yīng)一個(gè) JSON 文件。從源碼結(jié)構(gòu)看應(yīng)用的技術(shù)棧與文檔描述完全對(duì)應(yīng)quiz-app/package.json 中dependencies聲明了vue ^2.6.11、vue-i18n ^8.22.2、vue-router ^3.4.9說明這是一個(gè)基于 Vue 2 vue-i18n 做國(guó)際化、vue-router 做路由的單頁應(yīng)用quiz-app/src/router/index.js 使用history模式定義了/首頁測(cè)驗(yàn)列表、/quiz/:id按編號(hào)進(jìn)入具體測(cè)驗(yàn)和通配 404 三條路由——即測(cè)驗(yàn)編號(hào)0到39直接體現(xiàn)在 URL 中測(cè)驗(yàn)數(shù)據(jù)本身是純 JSON例如 quiz-app/src/assets/translations/en/group-1.json 中的結(jié)構(gòu)為頂層數(shù)組元素含title應(yīng)用標(biāo)題、complete/error完成與答錯(cuò)提示文案以及quizzes數(shù)組每個(gè)測(cè)驗(yàn)含id、title和quiz題目數(shù)組每題含questionText與answerOptions選項(xiàng)文本 isCorrect標(biāo)志注意isCorrect是字符串true/false而非布爾值。這些結(jié)構(gòu)決定了后文新增語言翻譯時(shí)的文件形態(tài)翻譯必須保持與en相同的 JSON 結(jié)構(gòu)和編號(hào)對(duì)齊。新增一個(gè)語言的測(cè)驗(yàn)集翻譯工作流原文檔給出的核心工作流是以en為基準(zhǔn)復(fù)制結(jié)構(gòu)、逐步接線共 5 步。下面結(jié)合倉庫源碼逐步說明。1. 在assets/translations下創(chuàng)建與en對(duì)應(yīng)的結(jié)構(gòu)基準(zhǔn)測(cè)驗(yàn)集位于 quiz-app/src/assets/translations/en當(dāng)前包含group-1.json到group-6.json六個(gè)分組文件與一個(gè)index.js。新增語言時(shí)需要在該目錄下創(chuàng)建同名語言文件夾如fr、es放入對(duì)應(yīng)的分組 JSON并保證分組編號(hào)與測(cè)驗(yàn)編號(hào)一致編號(hào)從 0 開始。倉庫中已有兩個(gè)參考實(shí)現(xiàn)quiz-app/src/assets/translations/es完整的 6 個(gè)分組文件 index.jsquiz-app/src/assets/translations/fr目前只有g(shù)roup-1.json、group-2.json與index.js是一個(gè)進(jìn)行中的翻譯樣例。各語言index.js的約定可以從 quiz-app/src/assets/translations/en/index.js 看出它依次導(dǎo)入 6 個(gè)分組 JSON并以測(cè)驗(yàn)編號(hào)為鍵導(dǎo)出對(duì)象import en0 from ./group-1.json; import en1 from ./group-2.json; // ... group-3 到 group-6 const quiz { 0: en0[0], 1: en1[0], // ... 5: en5[0], }; export default quiz;即每個(gè)分組文件的第 0 個(gè)元素對(duì)應(yīng)一個(gè)全局測(cè)驗(yàn)編號(hào)這正是文檔強(qiáng)調(diào)編號(hào)必須與測(cè)驗(yàn)分組對(duì)應(yīng)的原因。2. 在總?cè)肟趇ndex.js中注冊(cè)新語言編輯 quiz-app/src/assets/translations/index.js按en的寫法導(dǎo)入新語言目錄并掛到messages映射上。當(dāng)前實(shí)現(xiàn)為import englishQuizzes from ./en/; import frenchQuizzes from ./fr/; import spanishQuizzes from ./es/; const messages { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;語言鍵如fr就是后續(xù) URL 查詢參數(shù)與路由數(shù)據(jù)查找所用的本地化縮寫。3. 在App.vue的語言下拉框中新增選項(xiàng)應(yīng)用頂部導(dǎo)航包含一個(gè)語言下拉框代碼位于 quiz-app/src/App.vue第 12–15 行。當(dāng)前僅提供en與es兩個(gè)選項(xiàng)從源碼結(jié)構(gòu)看fr雖已在messages中注冊(cè)但下拉框尚未加入對(duì)應(yīng)optionselect v-modellocale optionen/option optiones/option /select新增語言時(shí)要在此追加一個(gè)option且縮寫必須與該語言的文件夾名一致與messages映射的鍵一致否則questions[locale]取不到數(shù)據(jù)。4. 在課程翻譯頁面的測(cè)驗(yàn)鏈接中帶上?loc參數(shù)語言切換的最終入口是 URL 查詢參數(shù)。從 quiz-app/src/App.vue 的created()鉤子可以看到解析邏輯created() { this.route this.$route.params.id; if (this.$route.query.loc) { this.locale this.$route.query.loc; // 例如 /quiz/0?locfr } else { this.locale en; // 缺省回退到英文 } },quiz-app/src/views/Home.vue 中的created()采用完全相同的邏輯。因此若課程存在多語言版本頁面需要把其中所有指向測(cè)驗(yàn)的鏈接統(tǒng)一加上本地化參數(shù)例如?locfr未攜帶該參數(shù)時(shí)應(yīng)用回退為英文這保證了鏈接的健壯性。本地開發(fā)安裝、運(yùn)行與檢查文檔給出的 4 條命令均可在 quiz-app/package.json 的scripts中得到印證——它們?nèi)课薪o Vue CLI 4.5vue/cli-service ~4.5.0命令實(shí)際執(zhí)行用途npm install—安裝依賴首次運(yùn)行前執(zhí)行npm run servevue-cli-service serve編譯并開啟熱更新開發(fā)服務(wù)器npm run buildvue-cli-service build編譯、壓縮并產(chǎn)出生產(chǎn)構(gòu)建默認(rèn)輸出到dist/這正是后文 Azure 部署output_location: dist的由來npm run lintvue-cli-service lintESLint 檢查并自動(dòng)修復(fù)規(guī)則繼承plugin:vue/essential與eslint:recommended配置內(nèi)嵌于package.json在quiz-app目錄下依次執(zhí)行上述命令即可本地起服務(wù)。更細(xì)粒度的 Vue CLI 行為端口、代理、生產(chǎn)配置等可按文檔指引參照 Vue CLI 官方 Configuration Reference 自定義通常通過新增vue.config.js實(shí)現(xiàn)當(dāng)前倉庫中該應(yīng)用未提供此文件說明默認(rèn)配置已滿足需求。此外該文檔在倉庫中存在英文原版 quiz-app/README.md本文依據(jù)的 translations/bg/quiz-app/README.md 是其保加利亞語翻譯文末聲明該翻譯由 Co-op Translator 等 AI 翻譯服務(wù)生成可能與原意存在偏差英文原版應(yīng)視為權(quán)威文本。部署到 Azure Static Web Apps文檔提供了完整的 6 步部署流程適合把測(cè)驗(yàn)應(yīng)用作為靜態(tài)站點(diǎn)發(fā)布準(zhǔn)備 GitHub 倉庫確保靜態(tài)網(wǎng)站代碼已托管在 GitHub 倉庫中并 Fork/克隆該倉庫。在 Azure 創(chuàng)建 Static Web App登錄 Azure 門戶點(diǎn)擊 Create a resource搜索 Static Web App點(diǎn)擊 Create。配置靜態(tài) Web 應(yīng)用分三組Basics基礎(chǔ)Subscription選擇 Azure 訂閱、Resource Group新建或復(fù)用資源組、Name應(yīng)用名稱、Region選擇離用戶最近的區(qū)域Deployment Details部署Source 選擇 GitHub授權(quán) Azure 訪問你的 GitHub 賬號(hào)然后依次選擇組織、倉庫需包含該靜態(tài)應(yīng)用和部署分支Build Details構(gòu)建Build Presets 選擇應(yīng)用所用框架Vue 屬于 SPA 類App Location 指定應(yīng)用代碼所在目錄根目錄則填/API Location 可選Output Location 指定構(gòu)建產(chǎn)物目錄本應(yīng)用為dist。Review and Create核對(duì)設(shè)置后點(diǎn)擊 CreateAzure 會(huì)自動(dòng)創(chuàng)建所需資源并在你的倉庫中生成 GitHub Actions workflow。GitHub Actions WorkflowAzure 會(huì)在倉庫中自動(dòng)生成.github/workflows/azure-static-web-apps-name.yml由該 workflow 負(fù)責(zé)構(gòu)建與部署。監(jiān)控部署在 GitHub 倉庫的 Actions 頁簽可查看 workflow 運(yùn)行情況執(zhí)行完成后應(yīng)用即可通過 Azure 分配的 URL 訪問。示例 Workflow 文件文檔給出的 workflow 示例對(duì)原文中api_location一處明顯缺失的引號(hào)做了修正其余語義保持不變name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: upload app_location: quiz-app # App source code path api_location: # API source code path optional output_location: dist # Built app content directory - optional其中兩個(gè)與本倉庫結(jié)構(gòu)強(qiáng)相關(guān)的參數(shù)值得注意app_location: quiz-app指向本倉庫根目錄下的 quiz-app 子目錄而非倉庫根output_location: dist對(duì)應(yīng)npm run build的產(chǎn)物目錄。觸發(fā)條件覆蓋main分支的 push 以及 pull_request 的 opened/synchronize/reopened/closed 事件即每次合并請(qǐng)求也會(huì)觸發(fā)一次構(gòu)建校驗(yàn)。結(jié)語這份文檔把測(cè)驗(yàn)數(shù)據(jù)即內(nèi)容、語言即文件夾的多語言擴(kuò)展約定與 Vue CLI 的本地工程命令、Azure Static Web Apps 的 CI/CD 部署流程串成一條完整鏈路新增語言只需按en的結(jié)構(gòu)復(fù)制 JSON 分組、接線三處代碼語言目錄index.js、總?cè)肟趇ndex.js、App.vue下拉框再更新課程鏈接的?loc參數(shù)即可而發(fā)布環(huán)節(jié)由 Azure 自動(dòng)生成的 GitHub Actions workflow 完成。結(jié)合 quiz-app 目錄下的實(shí)際源碼可以進(jìn)一步驗(yàn)證上述每一處約定在當(dāng)前倉庫中的落點(diǎn)。說明測(cè)驗(yàn)應(yīng)用的原型致謝來自文檔中提到的 simple-quiz-vue 開源項(xiàng)目本文所有路徑均相對(duì)本倉庫根目錄可直接用于繼續(xù)深入源碼?!久赓M(fèi)下載鏈接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!項(xiàng)目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考