本文档提供了“Web 开发入门”课程中测验应用程序架构的技术概述。该测验应用程序是一个基于 Vue.js 的系统，可在整个课程中向学习者提供评估测验，并支持多种语言。本文档侧重于测验应用程序的技术实现细节、组件结构和数据流。有关测验内容和翻译过程的信息，请参阅测验内容和翻译。
测验应用程序是一个使用 Vue.js 3 构建的单页应用程序，它提供交互式测验来评估学习者对 Web 开发概念的理解。该应用程序通过全面的翻译系统支持多种语言。
来源
测验应用程序使用以下关键技术
| 组件 | 技术 | 版本 | 目的 |
|---|---|---|---|
| 前端框架 | Vue.js | ^3.4.29 | 响应式 UI 组件 |
| 路由 | Vue Router | ^4.3.3 | 页面间导航 |
| 构建工具 | Vite | ^5.3.1 | 开发和生产构建 |
| 模块打包器 | ESBuild（通过 Vite） | - | 打包和优化 |
| 代码质量 | ESLint | ^8.57.0 | 代码 linting 和标准 |
来源
测验应用程序遵循标准的 Vue.js 应用程序结构，包含以下关键组件
来源
该应用程序使用分层组件结构来组织和重用
来源
该应用程序使用 Vue Router 在不同视图之间进行导航。路由器在 main.js 文件中实例化，并附加到 Vue 应用程序实例。
在 App.vue 文件中，我们可以看到带有导航链接和路由器视图的路由器实现
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
来源
测验应用程序的核心功能之一是其全面的国际化 (i18n) 支持。该应用程序通过翻译系统提供多种语言的测验。
翻译系统由多个 JSON 文件组成，每个文件包含特定语言的测验内容。这些文件在 index.js 文件中导入和合并。
来源
每个翻译文件都遵循一致的 JSON 结构
[
{
"title": "Quiz title",
"complete": "Completion message",
"error": "Error message",
"quizzes": [
{
"id": 1,
"title": "Quiz section title",
"quiz": [
{
"questionText": "Question text",
"answerOptions": [
{
"answerText": "Option text",
"isCorrect": true/false
}
// Additional options...
]
}
// Additional questions...
]
}
// Additional quiz sections...
]
}
]
来源
测验应用程序遵循单向数据流模式，数据从翻译文件流经应用程序组件，最终呈现给用户。
来源
测验数据遵循分层结构，允许按类别和主题组织测验
每个测验包含
来源
测验应用程序使用 Vite 进行开发和构建生产资源。该应用程序可以部署到各种托管平台，包括 Azure Static Web Apps。
可以使用 GitHub Actions 通过 CI/CD 流水线将项目部署到 Azure Static Web Apps
来源
测验应用程序易于扩展，可添加新的语言翻译。该过程包括
来源
测验应用程序是一个现代的、基于组件的单页应用程序，使用 Vue.js 3 和 Vue Router 构建。它提供了一个灵活且可扩展的平台，可在“Web 开发入门”课程中以多种语言提供交互式测验。该应用程序的架构强调模块化、可重用性和易于扩展性，特别是通过其全面的翻译系统轻松添加新语言。