Data-Science-For-Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本文以本仓库中测验应用quiz-app的说明文档为核心系统讲解 Data-Science-For-Beginners 课程配套的课前/课后测验应用如何按既有约定新增一个语言的测验集JSON 结构、index.js导入约定、语言下拉框与?loc查询参数、如何在本地完成安装、开发编译、生产构建与代码检查以及如何将应用部署到 Azure Static Web Apps含完整的 GitHub Actions workflow 示例。读完本文后你可以独立完成测验集的多语言扩展并把应用以 CI/CD 方式发布到 Azure。测验应用概览课程配套的 40 道测验测验应用为数据科学课程共 20 课提供课前pre-lecture与课后post-lecture测验是课程学习闭环的一部分。文档明确说明该课程共有 40 个测验编号从 0 开始计数并按主题拆分成若干分组grouping每个分组对应一个 JSON 文件。从源码结构看应用的技术栈与文档描述完全对应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直接体现在 URL 中测验数据本身是纯 JSON例如 quiz-app/src/assets/translations/en/group-1.json 中的结构为顶层数组元素含title应用标题、complete/error完成与答错提示文案以及quizzes数组每个测验含id、title和quiz题目数组每题含questionText与answerOptions选项文本 isCorrect标志注意isCorrect是字符串true/false而非布尔值。这些结构决定了后文新增语言翻译时的文件形态翻译必须保持与en相同的 JSON 结构和编号对齐。新增一个语言的测验集翻译工作流原文档给出的核心工作流是以en为基准复制结构、逐步接线共 5 步。下面结合仓库源码逐步说明。1. 在assets/translations下创建与en对应的结构基准测验集位于 quiz-app/src/assets/translations/en当前包含group-1.json到group-6.json六个分组文件与一个index.js。新增语言时需要在该目录下创建同名语言文件夹如fr、es放入对应的分组 JSON并保证分组编号与测验编号一致编号从 0 开始。仓库中已有两个参考实现quiz-app/src/assets/translations/es完整的 6 个分组文件 index.jsquiz-app/src/assets/translations/fr目前只有group-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 个元素对应一个全局测验编号这正是文档强调编号必须与测验分组对应的原因。2. 在总入口index.js中注册新语言编辑 quiz-app/src/assets/translations/index.js按en的写法导入新语言目录并挂到messages映射上。当前实现为import englishQuizzes from ./en/; import frenchQuizzes from ./fr/; import spanishQuizzes from ./es/; const messages { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;语言键如fr就是后续 URL 查询参数与路由数据查找所用的本地化缩写。3. 在App.vue的语言下拉框中新增选项应用顶部导航包含一个语言下拉框代码位于 quiz-app/src/App.vue第 12–15 行。当前仅提供en与es两个选项从源码结构看fr虽已在messages中注册但下拉框尚未加入对应optionselect v-modellocale optionen/option optiones/option /select新增语言时要在此追加一个option且缩写必须与该语言的文件夹名一致与messages映射的键一致否则questions[locale]取不到数据。4. 在课程翻译页面的测验链接中带上?loc参数语言切换的最终入口是 URL 查询参数。从 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()采用完全相同的逻辑。因此若课程存在多语言版本页面需要把其中所有指向测验的链接统一加上本地化参数例如?locfr未携带该参数时应用回退为英文这保证了链接的健壮性。本地开发安装、运行与检查文档给出的 4 条命令均可在 quiz-app/package.json 的scripts中得到印证——它们全部委托给 Vue CLI 4.5vue/cli-service ~4.5.0命令实际执行用途npm install—安装依赖首次运行前执行npm run servevue-cli-service serve编译并开启热更新开发服务器npm run buildvue-cli-service build编译、压缩并产出生产构建默认输出到dist/这正是后文 Azure 部署output_location: dist的由来npm run lintvue-cli-service lintESLint 检查并自动修复规则继承plugin:vue/essential与eslint:recommended配置内嵌于package.json在quiz-app目录下依次执行上述命令即可本地起服务。更细粒度的 Vue CLI 行为端口、代理、生产配置等可按文档指引参照 Vue CLI 官方 Configuration Reference 自定义通常通过新增vue.config.js实现当前仓库中该应用未提供此文件说明默认配置已满足需求。此外该文档在仓库中存在英文原版 quiz-app/README.md本文依据的 translations/bg/quiz-app/README.md 是其保加利亚语翻译文末声明该翻译由 Co-op Translator 等 AI 翻译服务生成可能与原意存在偏差英文原版应视为权威文本。部署到 Azure Static Web Apps文档提供了完整的 6 步部署流程适合把测验应用作为静态站点发布准备 GitHub 仓库确保静态网站代码已托管在 GitHub 仓库中并 Fork/克隆该仓库。在 Azure 创建 Static Web App登录 Azure 门户点击 Create a resource搜索 Static Web App点击 Create。配置静态 Web 应用分三组Basics基础Subscription选择 Azure 订阅、Resource Group新建或复用资源组、Name应用名称、Region选择离用户最近的区域Deployment Details部署Source 选择 GitHub授权 Azure 访问你的 GitHub 账号然后依次选择组织、仓库需包含该静态应用和部署分支Build Details构建Build Presets 选择应用所用框架Vue 属于 SPA 类App Location 指定应用代码所在目录根目录则填/API Location 可选Output Location 指定构建产物目录本应用为dist。Review and Create核对设置后点击 CreateAzure 会自动创建所需资源并在你的仓库中生成 GitHub Actions workflow。GitHub Actions WorkflowAzure 会在仓库中自动生成.github/workflows/azure-static-web-apps-name.yml由该 workflow 负责构建与部署。监控部署在 GitHub 仓库的 Actions 页签可查看 workflow 运行情况执行完成后应用即可通过 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其中两个与本仓库结构强相关的参数值得注意app_location: quiz-app指向本仓库根目录下的 quiz-app 子目录而非仓库根output_location: dist对应npm run build的产物目录。触发条件覆盖main分支的 push 以及 pull_request 的 opened/synchronize/reopened/closed 事件即每次合并请求也会触发一次构建校验。结语这份文档把测验数据即内容、语言即文件夹的多语言扩展约定与 Vue CLI 的本地工程命令、Azure Static Web Apps 的 CI/CD 部署流程串成一条完整链路新增语言只需按en的结构复制 JSON 分组、接线三处代码语言目录index.js、总入口index.js、App.vue下拉框再更新课程链接的?loc参数即可而发布环节由 Azure 自动生成的 GitHub Actions workflow 完成。结合 quiz-app 目录下的实际源码可以进一步验证上述每一处约定在当前仓库中的落点。说明测验应用的原型致谢来自文档中提到的 simple-quiz-vue 开源项目本文所有路径均相对本仓库根目录可直接用于继续深入源码。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Data-Science-For-Beginners 测验应用：多语言测验集管理、本地构建与 Azure 静态站点部署
Data-Science-For-Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本文以本仓库中测验应用quiz-app的说明文档为核心系统讲解 Data-Science-For-Beginners 课程配套的课前/课后测验应用如何按既有约定新增一个语言的测验集JSON 结构、index.js导入约定、语言下拉框与?loc查询参数、如何在本地完成安装、开发编译、生产构建与代码检查以及如何将应用部署到 Azure Static Web Apps含完整的 GitHub Actions workflow 示例。读完本文后你可以独立完成测验集的多语言扩展并把应用以 CI/CD 方式发布到 Azure。测验应用概览课程配套的 40 道测验测验应用为数据科学课程共 20 课提供课前pre-lecture与课后post-lecture测验是课程学习闭环的一部分。文档明确说明该课程共有 40 个测验编号从 0 开始计数并按主题拆分成若干分组grouping每个分组对应一个 JSON 文件。从源码结构看应用的技术栈与文档描述完全对应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直接体现在 URL 中测验数据本身是纯 JSON例如 quiz-app/src/assets/translations/en/group-1.json 中的结构为顶层数组元素含title应用标题、complete/error完成与答错提示文案以及quizzes数组每个测验含id、title和quiz题目数组每题含questionText与answerOptions选项文本 isCorrect标志注意isCorrect是字符串true/false而非布尔值。这些结构决定了后文新增语言翻译时的文件形态翻译必须保持与en相同的 JSON 结构和编号对齐。新增一个语言的测验集翻译工作流原文档给出的核心工作流是以en为基准复制结构、逐步接线共 5 步。下面结合仓库源码逐步说明。1. 在assets/translations下创建与en对应的结构基准测验集位于 quiz-app/src/assets/translations/en当前包含group-1.json到group-6.json六个分组文件与一个index.js。新增语言时需要在该目录下创建同名语言文件夹如fr、es放入对应的分组 JSON并保证分组编号与测验编号一致编号从 0 开始。仓库中已有两个参考实现quiz-app/src/assets/translations/es完整的 6 个分组文件 index.jsquiz-app/src/assets/translations/fr目前只有group-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 个元素对应一个全局测验编号这正是文档强调编号必须与测验分组对应的原因。2. 在总入口index.js中注册新语言编辑 quiz-app/src/assets/translations/index.js按en的写法导入新语言目录并挂到messages映射上。当前实现为import englishQuizzes from ./en/; import frenchQuizzes from ./fr/; import spanishQuizzes from ./es/; const messages { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;语言键如fr就是后续 URL 查询参数与路由数据查找所用的本地化缩写。3. 在App.vue的语言下拉框中新增选项应用顶部导航包含一个语言下拉框代码位于 quiz-app/src/App.vue第 12–15 行。当前仅提供en与es两个选项从源码结构看fr虽已在messages中注册但下拉框尚未加入对应optionselect v-modellocale optionen/option optiones/option /select新增语言时要在此追加一个option且缩写必须与该语言的文件夹名一致与messages映射的键一致否则questions[locale]取不到数据。4. 在课程翻译页面的测验链接中带上?loc参数语言切换的最终入口是 URL 查询参数。从 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()采用完全相同的逻辑。因此若课程存在多语言版本页面需要把其中所有指向测验的链接统一加上本地化参数例如?locfr未携带该参数时应用回退为英文这保证了链接的健壮性。本地开发安装、运行与检查文档给出的 4 条命令均可在 quiz-app/package.json 的scripts中得到印证——它们全部委托给 Vue CLI 4.5vue/cli-service ~4.5.0命令实际执行用途npm install—安装依赖首次运行前执行npm run servevue-cli-service serve编译并开启热更新开发服务器npm run buildvue-cli-service build编译、压缩并产出生产构建默认输出到dist/这正是后文 Azure 部署output_location: dist的由来npm run lintvue-cli-service lintESLint 检查并自动修复规则继承plugin:vue/essential与eslint:recommended配置内嵌于package.json在quiz-app目录下依次执行上述命令即可本地起服务。更细粒度的 Vue CLI 行为端口、代理、生产配置等可按文档指引参照 Vue CLI 官方 Configuration Reference 自定义通常通过新增vue.config.js实现当前仓库中该应用未提供此文件说明默认配置已满足需求。此外该文档在仓库中存在英文原版 quiz-app/README.md本文依据的 translations/bg/quiz-app/README.md 是其保加利亚语翻译文末声明该翻译由 Co-op Translator 等 AI 翻译服务生成可能与原意存在偏差英文原版应视为权威文本。部署到 Azure Static Web Apps文档提供了完整的 6 步部署流程适合把测验应用作为静态站点发布准备 GitHub 仓库确保静态网站代码已托管在 GitHub 仓库中并 Fork/克隆该仓库。在 Azure 创建 Static Web App登录 Azure 门户点击 Create a resource搜索 Static Web App点击 Create。配置静态 Web 应用分三组Basics基础Subscription选择 Azure 订阅、Resource Group新建或复用资源组、Name应用名称、Region选择离用户最近的区域Deployment Details部署Source 选择 GitHub授权 Azure 访问你的 GitHub 账号然后依次选择组织、仓库需包含该静态应用和部署分支Build Details构建Build Presets 选择应用所用框架Vue 属于 SPA 类App Location 指定应用代码所在目录根目录则填/API Location 可选Output Location 指定构建产物目录本应用为dist。Review and Create核对设置后点击 CreateAzure 会自动创建所需资源并在你的仓库中生成 GitHub Actions workflow。GitHub Actions WorkflowAzure 会在仓库中自动生成.github/workflows/azure-static-web-apps-name.yml由该 workflow 负责构建与部署。监控部署在 GitHub 仓库的 Actions 页签可查看 workflow 运行情况执行完成后应用即可通过 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其中两个与本仓库结构强相关的参数值得注意app_location: quiz-app指向本仓库根目录下的 quiz-app 子目录而非仓库根output_location: dist对应npm run build的产物目录。触发条件覆盖main分支的 push 以及 pull_request 的 opened/synchronize/reopened/closed 事件即每次合并请求也会触发一次构建校验。结语这份文档把测验数据即内容、语言即文件夹的多语言扩展约定与 Vue CLI 的本地工程命令、Azure Static Web Apps 的 CI/CD 部署流程串成一条完整链路新增语言只需按en的结构复制 JSON 分组、接线三处代码语言目录index.js、总入口index.js、App.vue下拉框再更新课程链接的?loc参数即可而发布环节由 Azure 自动生成的 GitHub Actions workflow 完成。结合 quiz-app 目录下的实际源码可以进一步验证上述每一处约定在当前仓库中的落点。说明测验应用的原型致谢来自文档中提到的 simple-quiz-vue 开源项目本文所有路径均相对本仓库根目录可直接用于继续深入源码。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考