Web-Dev-For-Beginners 测验应用Quiz App多语言题库本地化、本地运行与 Azure Static Web Apps 部署实战指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文以 Web-Dev-For-Beginners 课程仓库中的 quiz-app 为主线系统讲解其多语言题库的 JSON 数据结构与注册流程、基于 Vue 3 Vite 的本地构建运行方式以及通过 Azure Static Web Apps 实现零成本部署的完整步骤。读完本文你将能够独立为课程新增一种语言的测验题库并完成从npm install到云端上线含 GitHub Actions 自动重新部署的全流程操作。一、Quiz 应用是什么quiz-app 是为 Web Dev for Beginners 数据科学/Web 开发课程配套的课前与课后测验系统位于仓库的 quiz-app 目录。整套课程共包含40 道测验编号从 0 开始计数即测验 id 从 1 排到 40每个测验内固定包含3 道小题用于检验学习者对每节课程知识的掌握情况。应用本身是一个标准的 Vue 3 单页应用依赖vue^3.4.29与vue-router^4.3.3详见 package.json构建工具Vite^6.4.2别名指向./src配置见 vite.config.js路由/测验列表、/quiz/:id单套测验答题页、/about按需懒加载定义见 src/router/index.js。二、多语言题库的核心翻译 JSON 文件结构quiz-app 的多语言能力完全由数据驱动。每门语言的测验内容存放在一个独立的 JSON 文件中全部位于 quiz-app/src/assets/translations 目录下其中英文版en.json是权威基准canonical其他语言如 en.json 同级的ko.json、ja.json、zh_cn.json、fr.json、pt-BR.json等 16 个语言文件均以它为模板翻译而来。一个翻译文件的顶层结构如下[ { title: A title, complete: A complete button title, error: An error message upon selecting the wrong answer, quizzes: [ { id: 1, title: Title, quiz: [ { questionText: The question asked, answerOptions: [ { answerText: Option 1 title, isCorrect: true }, { answerText: Option 2 title, isCorrect: false } ] } ] } ] } ]各字段语义如下字段类型含义titlestring应用/题库的顶层标题completestring全部答对后的完成提示文案errorstring选错答案时显示的错误提示文案quizzesarray该语言下的全部测验组40 套quizzes[].idnumber测验编号须与课程章节对齐quizzes[].titlestring测验标题如 Lesson 1 - Intro to Programming Languages: Pre-Lecture Quizquizzes[].quizarray该套测验下的小题固定 3 道quiz[].questionTextstring题干quiz[].answerOptionsarray选项列表answerOptions[].answerTextstring选项文本answerOptions[].isCorrectboolean/string是否为正确答案以真实文件 en.json 为例第一套测验id: 1的标题是Lesson 1 - Intro to Programming Languages: Pre-Lecture Quiz其中一道题A program can be created without the creator writing any code的正确答案为true而Low level languages are a popular choice for的正确答案是Hardware。注意在en.json的实际数据中isCorrect以字符串true/false存储这与上方文档示例中的布尔值写法略有差异——答题逻辑见下文源码通过字符串比较isCorrect true判断正确性因此两种写法中字符串形式才是与本仓库运行时代码严格兼容的写法新增翻译时建议沿用en.json的字符串形式。三、新增一种语言的完整步骤3.1 创建翻译 JSON 文件在 quiz-app/src/assets/translations 目录下新建一个语言 JSON 文件例如ex.json把en.json中的全部 40 套测验复制过来并逐字段翻译成目标语言。需要注意编号对齐quizzes[].id必须与正确的课程章节对应40 套测验的编号从 0 开始计数翻译时不可错位、不可漏项结构一致顶层title、complete、error三个文案字段也要一并翻译它们会被 UI 直接展示小题数量每套测验固定 3 道小题多余或缺失都会影响答题进度逻辑见 3.3 节源码分析。3.2 在 index.js 中注册新语言仅放入 JSON 文件还不够必须把它注册进统一的导出入口 src/assets/translations/index.js。该文件按以下惯例组织import ex from ./ex.json; // if ex is localization key then enter it like so in messages to expose it const messages { ex: ex[0], }; export default messages;要点import 语句用import ex from ./ex.json引入新文件语言键localization key将文件名主体如ex作为键取值用[0]由于 JSON 最外层是数组仅含一个对象注册时必须取ex[0]而非直接ex键名需与浏览器语言匹配运行时组件通过navigator.language形如zh-CN、pt-BR与消息键做前缀匹配见 3.3因此带连字符的语言建议用引号包裹的键名仓库中[pt-BR]: ptBr[0]即为此类写法。当前仓库 index.js 已注册 en、ko、id、hi、it、ja、el、ms、es、nl、zh_cn、zh_tw、fr、ta、pt-BR 共 16 种语言新语言照此追加即可。3.3 本地化机制的原理解读前端如何知道该加载哪份翻译答案在答题组件 src/components/QuizComponent.vue 与列表组件 src/components/QuizzesComponent.vue 中复用的getFileByLocale函数function getFileByLocale(locale) { // loop keys in messages, if key is the start of locale, return that file let file { complete: Complete, error: Error, quizzes: [], title: Default Quiz, }; for (let key in messages) { if (locale.startsWith(key)) { file messages[key]; break; } } return file; }关键逻辑quiz-app/src/components/QuizComponent.vue#L66-L81默认语言取自navigator.language || navigator.userLanguage遍历messages的每个键若当前浏览器语言以该键开头startsWith则命中该语言文件并立即返回没有任何键匹配时回退到内置的默认对象标题 Default Quiz、空题库因此语言键的命名直接决定匹配行为例如zh_cn无法被zh-CN精确匹配实际部署中需结合路由?loc参数见created()中this.locale this.$route.query.loc来显式指定语言。答题流程handleAnswerClickquiz-app/src/components/QuizComponent.vue#L111-L124同样值得注意每套测验固定 3 题答对时currentQuestion 1达到 3 题则complete true并显示file.complete文案答错则error true显示file.error文案。四、本地运行 Quiz 应用4.1 前置条件一个 GitHub 账户用于从模板创建仓库本机已安装 Node.js 与 Git。4.2 安装与初始化# 1. 从本仓库模板新建你自己的仓库在 GitHub 上执行 New repository from template # 2. 克隆仓库并进入 quiz-app 目录 git clone 你的仓库地址 cd 仓库名/quiz-app # 3. 安装 npm 依赖 npm install4.3 构建与启动# 构建生产产物Vite 会输出到 dist 目录 npm run build # 启动本地开发服务器Vite dev server npm run dev # 可选代码检查ESLint自动修复 .vue/.js/.jsx/.cjs/.mjs 文件 npm run lint以上命令与 package.json 中的 scripts 一一对应dev→vite、build→vite build、preview→vite preview、lint→eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore。执行npm run build后产物输出目录为dist这也是后续 Azure 部署中output_location的取值来源。五、部署到 Azure Static Web Apps5.1 前置条件与成本一个 Azure 订阅可免费注册试用部署本 quiz-app 的成本估算为 0免费适合学习与演示场景。5.2 使用 Deploy to Azure 按钮部署README.md顶部提供了一键部署入口Deploy to Azure 按钮跳转 Azure Portal 的 Static App 创建页。登录 Azure 后依次完成Static Web App 详情输入应用名称选择托管计划Hosting planGitHub 登录将部署源设为 GitHub登录并填写Organization—— 选择你的 GitHub 组织Repository—— 选择 Web Dev for Beginners 课程仓库Branch—— 选择分支main构建预设Build PresetsAzure Static Web Apps 会通过检测算法自动识别前端框架并需填写App location应用代码路径——./quiz-appApi locationAPI 代码路径—— 留空本应用无后端 APIOutput location构建产物目录——dist部署点击Review Create再点击Create部署后点击Go to Deployment再点击View app in browser查看线上应用。5.3 自动重新部署GitHub Actions 工作流部署完成后Azure 会在你的仓库.github目录下自动生成一个 GitHub Actions 工作流文件。该文件定义了触发应用重新部署到 Azure 的事件——最典型的是对main分支的 push。典型内容如下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解读on.push.branches: [main]任何对main的提交都会触发重新构建与部署实现推送即上线on.pull_request的多种 types保证 PR 的打开、同步、重新打开与关闭都能触发相应的构建/清理Azure/static-web-apps-deployv1动作的三个核心参数与 Portal 表单完全一致app_location: quiz-app、api_location: 无 API、output_location: distazure_static_web_apps_api_token与repo_token由 Azure 自动配置到仓库 Secrets 中无需手动填写。当 GitHub Action 执行成功后刷新线上页面即可看到最新版本的应用此后每次向main推送代码站点都会自动更新。六、常见问题与注意事项isCorrect的取值形式本仓库 en.json 使用字符串true/false而答题组件用isCorrect true做宽松比较quiz-app/src/components/QuizComponent.vue#L114翻译文件务必沿用该约定语言键的前缀匹配陷阱getFileByLocale使用locale.startsWith(key)例如浏览器语言en-US会命中键en而zh-CN并不能匹配键zh_cn需要依赖路由查询参数?loc显式指定或选用与浏览器语言码一致命名的键40 套测验编号不可错位从 en.json 可确认测验 id 一直排到 39即第 40 套翻译文件必须保持同样数量与顺序否则列表页会缺失题目每套测验固定 3 小题答题进度以currentQuestion 3为完成条件翻译时不要增删小题数量构建产物目录Azure 部署的output_location必须与 Vite 默认输出dist保持一致见 vite.config.js 及npm run build。七、延伸阅读应用级说明quiz-app/README.md多语言注册入口src/assets/translations/index.js权威英文题库src/assets/translations/en.json答题组件本地化 判题逻辑src/components/QuizComponent.vue测验列表组件src/components/QuizzesComponent.vue路由定义src/router/index.js依赖与脚本package.json【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web-Dev-For-Beginners 测验应用（Quiz App）：多语言题库本地化、本地运行与 Azure Static Web Apps 部署实战指南
Web-Dev-For-Beginners 测验应用Quiz App多语言题库本地化、本地运行与 Azure Static Web Apps 部署实战指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文以 Web-Dev-For-Beginners 课程仓库中的 quiz-app 为主线系统讲解其多语言题库的 JSON 数据结构与注册流程、基于 Vue 3 Vite 的本地构建运行方式以及通过 Azure Static Web Apps 实现零成本部署的完整步骤。读完本文你将能够独立为课程新增一种语言的测验题库并完成从npm install到云端上线含 GitHub Actions 自动重新部署的全流程操作。一、Quiz 应用是什么quiz-app 是为 Web Dev for Beginners 数据科学/Web 开发课程配套的课前与课后测验系统位于仓库的 quiz-app 目录。整套课程共包含40 道测验编号从 0 开始计数即测验 id 从 1 排到 40每个测验内固定包含3 道小题用于检验学习者对每节课程知识的掌握情况。应用本身是一个标准的 Vue 3 单页应用依赖vue^3.4.29与vue-router^4.3.3详见 package.json构建工具Vite^6.4.2别名指向./src配置见 vite.config.js路由/测验列表、/quiz/:id单套测验答题页、/about按需懒加载定义见 src/router/index.js。二、多语言题库的核心翻译 JSON 文件结构quiz-app 的多语言能力完全由数据驱动。每门语言的测验内容存放在一个独立的 JSON 文件中全部位于 quiz-app/src/assets/translations 目录下其中英文版en.json是权威基准canonical其他语言如 en.json 同级的ko.json、ja.json、zh_cn.json、fr.json、pt-BR.json等 16 个语言文件均以它为模板翻译而来。一个翻译文件的顶层结构如下[ { title: A title, complete: A complete button title, error: An error message upon selecting the wrong answer, quizzes: [ { id: 1, title: Title, quiz: [ { questionText: The question asked, answerOptions: [ { answerText: Option 1 title, isCorrect: true }, { answerText: Option 2 title, isCorrect: false } ] } ] } ] } ]各字段语义如下字段类型含义titlestring应用/题库的顶层标题completestring全部答对后的完成提示文案errorstring选错答案时显示的错误提示文案quizzesarray该语言下的全部测验组40 套quizzes[].idnumber测验编号须与课程章节对齐quizzes[].titlestring测验标题如 Lesson 1 - Intro to Programming Languages: Pre-Lecture Quizquizzes[].quizarray该套测验下的小题固定 3 道quiz[].questionTextstring题干quiz[].answerOptionsarray选项列表answerOptions[].answerTextstring选项文本answerOptions[].isCorrectboolean/string是否为正确答案以真实文件 en.json 为例第一套测验id: 1的标题是Lesson 1 - Intro to Programming Languages: Pre-Lecture Quiz其中一道题A program can be created without the creator writing any code的正确答案为true而Low level languages are a popular choice for的正确答案是Hardware。注意在en.json的实际数据中isCorrect以字符串true/false存储这与上方文档示例中的布尔值写法略有差异——答题逻辑见下文源码通过字符串比较isCorrect true判断正确性因此两种写法中字符串形式才是与本仓库运行时代码严格兼容的写法新增翻译时建议沿用en.json的字符串形式。三、新增一种语言的完整步骤3.1 创建翻译 JSON 文件在 quiz-app/src/assets/translations 目录下新建一个语言 JSON 文件例如ex.json把en.json中的全部 40 套测验复制过来并逐字段翻译成目标语言。需要注意编号对齐quizzes[].id必须与正确的课程章节对应40 套测验的编号从 0 开始计数翻译时不可错位、不可漏项结构一致顶层title、complete、error三个文案字段也要一并翻译它们会被 UI 直接展示小题数量每套测验固定 3 道小题多余或缺失都会影响答题进度逻辑见 3.3 节源码分析。3.2 在 index.js 中注册新语言仅放入 JSON 文件还不够必须把它注册进统一的导出入口 src/assets/translations/index.js。该文件按以下惯例组织import ex from ./ex.json; // if ex is localization key then enter it like so in messages to expose it const messages { ex: ex[0], }; export default messages;要点import 语句用import ex from ./ex.json引入新文件语言键localization key将文件名主体如ex作为键取值用[0]由于 JSON 最外层是数组仅含一个对象注册时必须取ex[0]而非直接ex键名需与浏览器语言匹配运行时组件通过navigator.language形如zh-CN、pt-BR与消息键做前缀匹配见 3.3因此带连字符的语言建议用引号包裹的键名仓库中[pt-BR]: ptBr[0]即为此类写法。当前仓库 index.js 已注册 en、ko、id、hi、it、ja、el、ms、es、nl、zh_cn、zh_tw、fr、ta、pt-BR 共 16 种语言新语言照此追加即可。3.3 本地化机制的原理解读前端如何知道该加载哪份翻译答案在答题组件 src/components/QuizComponent.vue 与列表组件 src/components/QuizzesComponent.vue 中复用的getFileByLocale函数function getFileByLocale(locale) { // loop keys in messages, if key is the start of locale, return that file let file { complete: Complete, error: Error, quizzes: [], title: Default Quiz, }; for (let key in messages) { if (locale.startsWith(key)) { file messages[key]; break; } } return file; }关键逻辑quiz-app/src/components/QuizComponent.vue#L66-L81默认语言取自navigator.language || navigator.userLanguage遍历messages的每个键若当前浏览器语言以该键开头startsWith则命中该语言文件并立即返回没有任何键匹配时回退到内置的默认对象标题 Default Quiz、空题库因此语言键的命名直接决定匹配行为例如zh_cn无法被zh-CN精确匹配实际部署中需结合路由?loc参数见created()中this.locale this.$route.query.loc来显式指定语言。答题流程handleAnswerClickquiz-app/src/components/QuizComponent.vue#L111-L124同样值得注意每套测验固定 3 题答对时currentQuestion 1达到 3 题则complete true并显示file.complete文案答错则error true显示file.error文案。四、本地运行 Quiz 应用4.1 前置条件一个 GitHub 账户用于从模板创建仓库本机已安装 Node.js 与 Git。4.2 安装与初始化# 1. 从本仓库模板新建你自己的仓库在 GitHub 上执行 New repository from template # 2. 克隆仓库并进入 quiz-app 目录 git clone 你的仓库地址 cd 仓库名/quiz-app # 3. 安装 npm 依赖 npm install4.3 构建与启动# 构建生产产物Vite 会输出到 dist 目录 npm run build # 启动本地开发服务器Vite dev server npm run dev # 可选代码检查ESLint自动修复 .vue/.js/.jsx/.cjs/.mjs 文件 npm run lint以上命令与 package.json 中的 scripts 一一对应dev→vite、build→vite build、preview→vite preview、lint→eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore。执行npm run build后产物输出目录为dist这也是后续 Azure 部署中output_location的取值来源。五、部署到 Azure Static Web Apps5.1 前置条件与成本一个 Azure 订阅可免费注册试用部署本 quiz-app 的成本估算为 0免费适合学习与演示场景。5.2 使用 Deploy to Azure 按钮部署README.md顶部提供了一键部署入口Deploy to Azure 按钮跳转 Azure Portal 的 Static App 创建页。登录 Azure 后依次完成Static Web App 详情输入应用名称选择托管计划Hosting planGitHub 登录将部署源设为 GitHub登录并填写Organization—— 选择你的 GitHub 组织Repository—— 选择 Web Dev for Beginners 课程仓库Branch—— 选择分支main构建预设Build PresetsAzure Static Web Apps 会通过检测算法自动识别前端框架并需填写App location应用代码路径——./quiz-appApi locationAPI 代码路径—— 留空本应用无后端 APIOutput location构建产物目录——dist部署点击Review Create再点击Create部署后点击Go to Deployment再点击View app in browser查看线上应用。5.3 自动重新部署GitHub Actions 工作流部署完成后Azure 会在你的仓库.github目录下自动生成一个 GitHub Actions 工作流文件。该文件定义了触发应用重新部署到 Azure 的事件——最典型的是对main分支的 push。典型内容如下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解读on.push.branches: [main]任何对main的提交都会触发重新构建与部署实现推送即上线on.pull_request的多种 types保证 PR 的打开、同步、重新打开与关闭都能触发相应的构建/清理Azure/static-web-apps-deployv1动作的三个核心参数与 Portal 表单完全一致app_location: quiz-app、api_location: 无 API、output_location: distazure_static_web_apps_api_token与repo_token由 Azure 自动配置到仓库 Secrets 中无需手动填写。当 GitHub Action 执行成功后刷新线上页面即可看到最新版本的应用此后每次向main推送代码站点都会自动更新。六、常见问题与注意事项isCorrect的取值形式本仓库 en.json 使用字符串true/false而答题组件用isCorrect true做宽松比较quiz-app/src/components/QuizComponent.vue#L114翻译文件务必沿用该约定语言键的前缀匹配陷阱getFileByLocale使用locale.startsWith(key)例如浏览器语言en-US会命中键en而zh-CN并不能匹配键zh_cn需要依赖路由查询参数?loc显式指定或选用与浏览器语言码一致命名的键40 套测验编号不可错位从 en.json 可确认测验 id 一直排到 39即第 40 套翻译文件必须保持同样数量与顺序否则列表页会缺失题目每套测验固定 3 小题答题进度以currentQuestion 3为完成条件翻译时不要增删小题数量构建产物目录Azure 部署的output_location必须与 Vite 默认输出dist保持一致见 vite.config.js 及npm run build。七、延伸阅读应用级说明quiz-app/README.md多语言注册入口src/assets/translations/index.js权威英文题库src/assets/translations/en.json答题组件本地化 判题逻辑src/components/QuizComponent.vue测验列表组件src/components/QuizzesComponent.vue路由定义src/router/index.js依赖与脚本package.json【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考