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