Data-Science-For-Beginners 题库应用（quiz-app）多语言化与 Azure 静态部署实战指南
【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners
本篇文章以 Data-Science-For-Beginners 仓库中的 quiz-app 说明文档 为骨架，系统讲解该 Vue 2 题库应用（课程课前/课后测验系统）的目录结构、多语言（本地化）翻译扩展流程、本地开发构建命令，以及如何将应用部署到 Azure Static Web Apps 并借助 GitHub Actions 实现自动化 CI/CD。读者阅读完本文后，将能够独立完成「新增一套翻译题库 → 注册到应用 → 修改课程测验链接 → 本地验证 → 云端自动化部署」的完整实战链路。
一、题库应用概览：为数据科学课程配套的课前/课后测验系统
quiz-app 是 Data-Science-For-Beginners 数据科学课程配套的测验应用，提供课前（pre-lecture）与课后（post-lecture）测验，帮助学习者检验对每节课知识点的掌握程度。它是一套基于 Vue 2 + vue-i18n + vue-router 的纯前端静态应用，所有题目以 JSON 形式存放在仓库中，因此天然适合托管到任意静态站点服务。
仓库中 quiz-app 的顶层结构如下：
- quiz-app/README.md：官方使用与部署文档（本文的原始依据）；
- quiz-app/package.json：npm 脚本与依赖声明（vue ^2.6.11、vue-i18n ^8.22.2、vue-router ^3.4.9）；
- quiz-app/src/App.vue：应用根组件，负责语言下拉菜单与
?loc=查询参数解析； - quiz-app/src/main.js：应用入口，注册 vue-i18n 并指定默认语言；
- quiz-app/src/router/index.js：路由定义（首页 /、测验 /quiz/:id、404 兜底）；
- quiz-app/src/components/Quiz.vue：测验渲染与答题判分核心组件；
- quiz-app/src/assets/translations/：所有语言题库 JSON 与语言聚合入口。
从 package.json 可以看到，应用依赖集中在vue（^2.6.11）、vue-i18n（^8.22.2，国际化的关键）、vue-router（^3.4.9）以及core-js，开发依赖则使用@vue/cli-service（~4.5.0）这一 Vue CLI 脚手架来提供serve、build、lint三个核心命令。
二、核心概念：翻译目录与题库分组规则
要理解如何新增翻译，首先必须掌握题库的组织约定。文档明确指出：
- 规范的（canonical）题库位于 quiz-app/src/assets/translations/en；
- 各语言题库按多个分组（group）拆分成 JSON 文件；
- 整个课程共40 道测验（quiz），编号从0开始；
- 新增语言时，必须把编号对齐到正确的测验小节，否则测验链接将无法对应到正确题目。
以英文目录为例，quiz-app/src/assets/translations/en/ 下包含group-1.json至group-6.json共 6 个分组文件，以及一个聚合入口index.js。分组文件是「一个数组，内含一个包含quizzes数组的对象」。以 quiz-app/src/assets/translations/en/group-1.json 为样本，其 JSON 结构如下：
[ { "title": "Data Science for Beginners: Quizzes", "complete": "Congratulations, you completed the quiz!", "error": "Sorry, try again", "quizzes": [ { "id": 0, "title": "Defining Data Science - Pre Quiz", "quiz": [ { "questionText": "Why is the word _Science_ in Data Science?", "answerOptions": [ { "answerText": "It uses scientific methods to analyze data", "isCorrect": "true" }, { "answerText": "Only people with academic degrees can understand it", "isCorrect": "false" }, { "answerText": "To make is sound cool", "isCorrect": "false" } ] } ] } ] } ]字段说明：
| 字段 | 含义 | 取值约定 |
|---|---|---|
title | 分组标题，会显示在导航栏 | 顶层对象标题 |
complete | 全部答对后的祝贺文案 | 顶层对象，本地化字符串 |
error | 答错时的提示文案 | 顶层对象，本地化字符串 |
quizzes | 该分组下的测验数组 | 每个元素含id、title、quiz |
id | 测验唯一编号 | 0～39，与课程小节编号一一对应 |
quiz | 题目数组 | 每道题固定 3 个问题（源码中硬性判断） |
questionText | 题干文本 | 支持 Markdown 下划线语法_word_ |
answerOptions | 选项数组 | 每个选项含answerText与isCorrect |
isCorrect | 是否为正确答案 | 字符串"true"/"false"（注意是字符串而非布尔值） |
其中isCorrect之所以是字符串，是因为 Quiz.vue 中判分逻辑使用isCorrect == "true"进行字符串比较；同时该组件中的handleAnswerClick注释说明「每道测验固定 3 个问题」（nextQuestion < 3作为推进题目的边界条件），翻译时也应遵循这一约定。
三、添加一套翻译题库：四步完整流程
文档给出了新增语言翻译的标准流程，共四个步骤，下面结合仓库源码逐一展开。
步骤 1：创建与英文对应的翻译目录和分组文件
在 quiz-app/src/assets/translations/ 下新建以语言缩写命名的文件夹（例如fr、es，当前仓库已存在这两个翻译目录）。在目录内创建与en结构一一对应的分组 JSON 文件，并严格对齐测验编号。以法语目录 quiz-app/src/assets/translations/fr/ 为例，目前包含group-1.json与group-2.json两个文件——翻译进度可以按需推进，但文件路径与 quiz 编号必须与英文版对应分组保持一致。
步骤 2：编辑语言目录内的 index.js 聚合入口
完成 JSON 翻译后，需要在语言目录内创建index.js，将各分组 JSON 导入并按分组下标组装成 quiz 对象。参考英文版 quiz-app/src/assets/translations/en/index.js 的写法：
import en0 from "./group-1.json"; import en1 from "./group-2.json"; import en2 from "./group-3.json"; import en3 from "./group-4.json"; import en4 from "./group-5.json"; import en5 from "./group-6.json"; const quiz = { 0: en0[0], 1: en1[0], 2: en2[0], 3: en3[0], 4: en4[0], 5: en5[0], }; export default quiz;注意两点约定：其一，导入的文件名要遵循en目录的命名风格（group-N.json）；其二，en0[0]取的是 JSON 数组中的第一个（也是唯一一个）对象，该对象内含完整的quizzes数组。新增语言时应将变量名、分组键（0～5）与文件对应关系全部替换为目标语言。
步骤 3：在顶层聚合入口注册新语言
编辑 quiz-app/src/assets/translations/index.js，导入新语言的入口并注册到messages对象中。当前仓库已有 en / fr / es 三种语言：
import englishQuizzes from './en/'; import frenchQuizzes from './fr/'; import spanishQuizzes from './es/'; const messages = { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;新增语言时只需追加import xxxQuizzes from './xx/';并在messages中增加键值对。这里messages就是 vue-i18n 的消息源（messages），由 App.vue 的questionscomputed 属性与 Quiz.vue 共同消费。
步骤 4：在 App.vue 下拉菜单中注册语言，并更新课程测验链接
语言聚合完成后，还需要两处修改：
（1）App.vue 的下拉菜单。App.vue 的模板中有一处<select v-model="locale">，目前仅列出en与es两个<option>（fr 虽已注册到 messages 但尚未加入下拉菜单）。新增语言时应在此追加<option>xx</option>，语言缩写必须与翻译目录的文件夹名完全一致。该组件的watch.locale会把选中值同步到this.$root.$i18n.locale，从而实现运行时语言切换：
watch: { locale(val) { this.$root.$i18n.locale = val; }, }, created() { this.route = this.$route.params.id; if (this.$route.query.loc) { this.locale = this.$route.query.loc; } else { this.locale = "en"; } },从created钩子可以看出：应用支持通过 URL 查询参数?loc=xx直接指定语言，未指定时默认回退到en（这与 main.js 中VueI18n实例的locale: 'en'与fallbackLocale: 'en'配置保持一致）。
（2）翻译课程中的测验链接。在所有已翻译的课程 Markdown 文档里，凡是引用本测验应用的位置，都需要把语言代码作为查询参数拼进链接，例如?loc=fr。这样用户从某个语言的课程页面进入测验时，应用会自动以该语言渲染题目。
步骤 5（可选）：注意英文目录的增量维护
由于规范题库以英文为准（canonical），当英文侧新增或调整测验时，需要同步检查各翻译目录是否跟进。这是社区协作翻译模型下的常规维护动作，仓库中的fr、es目录仅部分翻译即为增量跟进的实际例证。
四、本地开发与构建：四条核心命令
文档给出了项目搭建与开发的标准命令，这些命令均由 package.json 中的 scripts 定义（底层为vue-cli-service）：
| 命令 | 作用 | 底层实现 |
|---|---|---|
npm install | 安装全部依赖 | 依据 package-lock.json 锁定版本 |
npm run serve | 本地开发服务器，编译并热重载（hot-reload） | vue-cli-service serve |
npm run build | 编译并压缩产物，用于生产部署 | vue-cli-service build，默认输出到dist/ |
npm run lint | 检查并自动修复代码风格问题 | vue-cli-service lint，基于 eslint + plugin:vue/essential |
# 安装依赖 npm install # 开发模式：编译 + 热重载 npm run serve # 生产构建：编译 + 压缩 npm run build # 代码检查与修复 npm run lint几点说明：
- ESLint 配置位于 package.json 的
eslintConfig字段，使用plugin:vue/essential与eslint:recommended规则集，解析器为babel-eslint； - Babel 转译预设位于 quiz-app/babel.config.js，采用
@vue/cli-plugin-babel/preset； browserslist声明> 1%, last 2 versions, not dead，即生产构建会为目标浏览器做兼容性转译与压缩。
如需深度自定义 CLI 配置（如修改输出目录、devServer 端口等），可参考 Vue CLI 的配置文档（README 中原文引用的「Configuration Reference」），在仓库根目录创建vue.config.js进行覆盖。
五、部署到 Azure Static Web Apps：分步指南
文档的后半部分详细讲解了将本应用部署到微软 Azure 静态 Web 应用（Static Web Apps）的完整流程。该服务专为纯前端静态站点设计，免费层即可托管本应用，并自动生成 GitHub Actions 工作流完成构建与发布。
5.1 前置条件与资源创建
- 准备 GitHub 仓库：确保静态 Web 应用代码位于你的 GitHub 仓库中。对本项目而言，即把当前仓库 fork（或 git clone：
git clone https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners）到自己的账号下。 - 创建 Azure 账号并登录 Azure portal。
- 点击Create a resource（创建资源），搜索Static Web App（静态 Web 应用），点击Create（创建）。
5.2 配置项详解
创建向导中的关键配置如下：
基本信息（Basics）：
| 配置项 | 说明 |
|---|---|
| Subscription | 选择你的 Azure 订阅 |
| Resource Group | 新建或复用现有资源组 |
| Name | 为静态 Web 应用命名 |
| Region | 选择离你的用户最近的地域 |
部署详情（Deployment Details）：
| 配置项 | 说明 |
|---|---|
| Source | 选择 GitHub |
| GitHub Account | 授权 Azure 访问你的 GitHub 账号 |
| Organization | 选择你的 GitHub 组织 |
| Repository | 选择包含静态应用代码的仓库 |
| Branch | 选择要部署的分支 |
构建详情（Build Details）：
| 配置项 | 说明 |
|---|---|
| Build Presets | 选择应用所用的框架，本应用应选 Vue |
| App Location | 应用代码所在目录，本应用为quiz-app（因为代码在仓库根目录的子目录中） |
| API Location | 若存在 API 则填写其位置（本应用无后端，可留空，可选） |
| Output Location | 构建产物目录，Vue CLI 默认输出为dist |
5.3 Review 与创建：自动生成 GitHub Actions 工作流
检查配置无误后点击Create。Azure 会自动在仓库中生成一个 GitHub Actions 工作流文件，路径形如.github/workflows/azure-static-web-apps-<name>.yml，后续的构建与部署均由该工作流托管。
5.4 监控部署
前往 GitHub 仓库的Actions标签页，可以看到工作流正在运行。工作流会执行构建并把产物部署到 Azure，成功后应用即在 Azure 提供的 URL 上对外提供服务。
六、GitHub Actions 工作流文件深度解析
文档附带了生成的工作流示例，其核心逻辑是：监听main分支的 push 与 pull_request 事件，使用官方Azure/static-web-apps-deploy@v1action 完成构建与部署。整理后的完整示例：
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/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 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 源代码目录 api_location: "" # API 源码目录（可选，本应用为空） output_location: "dist" # 构建产物目录（可选）逐项说明：
- 事件触发：
push到main时执行完整构建部署；pull_request的 opened / synchronize / reopened / closed 事件也会触发，Azure 的 action 会针对 PR 生成临时预览环境； azure_static_web_apps_api_token：Azure 侧注入的部署令牌，通过仓库 Secrets 引用（${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}），由 Azure 创建资源时自动写入仓库；repo_token：${{ secrets.GITHUB_TOKEN }}，GitHub 自动生成的临时令牌，供 action 与仓库交互；action: "upload"：执行上传部署；对应地，PR 关闭时 action 会以其他 action 值清理临时环境；app_location: "quiz-app"：与 Azure 门户中的 App Location 配置一致，指向 quiz-app 目录；output_location: "dist"：对应npm run build的产物目录，即 quiz-app/package.json 中vue-cli-service build的默认输出。
七、源码级工作原理：测验渲染与国际化链路
为帮助读者在部署后排查问题或继续扩展，这里补充剖析测验应用的核心运行链路。
路由分发：router/index.js 定义了三类路由：首页/（Home 视图）、测验页/quiz/:id（Quiz 组件）、以及/:pathMatch(.*)*的 404 兜底。测验页通过路径参数id定位具体测验编号，同时支持 history 模式（mode: 'history'），因此在静态托管场景下需要服务端或平台侧对 SPA 路由做回退支持（Azure Static Web Apps 默认支持）。
语言初始化：main.js 创建VueI18n实例时指定locale: 'en'与fallbackLocale: 'en'，再注入根实例。App.vue 与 Quiz.vue 都通过this.$root.$i18n.locale读写当前语言。
测验渲染与判分：Quiz.vue 的模板遍历questions[currLocale]（即对应语言的 quiz 对象），再内层遍历q.quizzes，通过v-if="route == quiz.id"命中当前路由对应的测验。答题按钮绑定handleAnswerClick(option.isCorrect)：
handleAnswerClick(isCorrect) { this.error = false; let nextQuestion = this.currentQuestion + 1; if (isCorrect == "true") { // 每道测验固定 3 个问题 if (nextQuestion < 3) { this.currentQuestion = nextQuestion; } else { this.complete = true; } } else { this.error = true; } },判分逻辑要点：答对且未到第 3 题则推进currentQuestion；答完 3 题显示complete文案；答错则显示error文案。这解释了为什么 group-1.json 中每个测验的quiz数组都恰好包含 3 个问题，翻译新增题目时也必须保持每题 3 问的结构，否则答题流程会提前终止或无法结束。
八、常见注意事项与维护建议
- 编号对齐是本地化的第一要务：40 道测验编号（0 起）与课程小节严格对应，翻译文件的
id错位会直接导致「课程链接指向错误题目」； isCorrect必须是字符串：判分使用isCorrect == "true"宽松比较，虽然布尔值true也能通过，但为保持与英文规范题库一致，翻译时应沿用"true"/"false"字符串；- 下拉菜单、顶层 index.js、语言目录 index.js 三处都要注册：仅翻译 JSON 而不修改 App.vue 和两个层级的
index.js，新语言不会被应用识别； - 部署时 App Location 指向
quiz-app：若把位置误填为仓库根目录/，Azure 将无法找到package.json，构建会失败；Output Location 则必须与npm run build的输出目录（dist）一致； - 增量翻译是常态：仓库中 fr 目录只翻译了部分分组文件，说明该应用支持分语言、分进度推进，不必等全部翻译完成再合并。
至此，从题库数据结构、四步翻译注册流程，到本地命令与 Azure 自动化部署，你已经掌握这套测验应用的完整使用与扩展方法，可以基于 quiz-app 目录 独立维护任意语言的题库并上线自己的实例。
【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
