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.js； - quiz-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中注册，但下拉框尚未加入对应<option>）：
<select v-model="locale"> <option>en</option> <option>es</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?loc=fr } else { this.locale = "en"; // 缺省回退到英文 } },quiz-app/src/views/Home.vue 中的created()采用完全相同的逻辑。因此，若课程存在多语言版本页面，需要把其中所有指向测验的链接统一加上本地化参数，例如?loc=fr；未携带该参数时应用回退为英文，这保证了链接的健壮性。
本地开发：安装、运行与检查
文档给出的 4 条命令均可在 quiz-app/package.json 的scripts中得到印证——它们全部委托给 Vue CLI 4.5（@vue/cli-service ~4.5.0）：
| 命令 | 实际执行 | 用途 |
|---|---|---|
npm install | — | 安装依赖（首次运行前执行） |
npm run serve | vue-cli-service serve | 编译并开启热更新开发服务器 |
npm run build | vue-cli-service build | 编译、压缩并产出生产构建（默认输出到dist/，这正是后文 Azure 部署output_location: "dist"的由来） |
npm run lint | vue-cli-service lint | ESLint 检查并自动修复（规则继承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：核对设置后点击 "Create"，Azure 会自动创建所需资源，并在你的仓库中生成 GitHub Actions workflow。
- GitHub Actions Workflow：Azure 会在仓库中自动生成
.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/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 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），仅供参考
