西安广播电视大学 2022 年（秋）直属一 分校（工作站）计算机类大数据技术（专业）专科毕业实操考核登记表分析
1. 项目背景
1.1 项目简介
1.1.1 项目目的
- 为了提高学生对 SQL 知识的掌握，本项目旨在通过实战的方式，让学生在实践中学习和运用 SQL 技能。
- 通过设计一个纯前端实现的 SQL 学习平台，使学生能够在没有后端支持的情况下，也能够进行 SQL 的学习和练习。
1.1.2 项目应用
- 项目将应用于计算机类大数据技术专业的教学，帮助学生更好地理解和掌握 SQL 知识。
- 项目也可以作为一个独立的 SQL 学习工具，供所有对 SQL 感兴趣的人使用。
1.2 项目设计理念
1.2.1 设计原则
- 采用模块化的设计，将整个项目拆分成多个独立的模块，每个模块负责一个特定的功能。
- 采用纯前端技术实现，不需要后端支持，降低项目的复杂性和开发难度。
- 采用 Vue 3 作为主框架，提供灵活和易于扩展的界面开发能力。
1.2.2 技术选型
- 主框架：Vue 3
- 组件库：ant-design-vue
- Markdown 展示组件：bytemd + github-markdown-css 主题
- 代码编辑器：monaco-editor
- SQL 执行：sql.js
- SQL 代码格式化：sql-formatter
- 全局状态管理：pinia + pinia-plugin-persistedstate
- 前端工程化：typescript + eslint + prettier
- 工具库：lodash
1.3 项目模块介绍
1.3.1 模块划分
- 项目将整个功能划分为三个主要模块：题目浏览区、SQL 编码区、题目结果区。
- 每个模块都是一个独立的 Vue 组件，实现了逻辑的隔离和组件的复用。
1.3.2 模块功能
- 题目浏览区（QuestionBoard）：展示题目 Markdown 文档。
- SQL 编码区（SqlEditor）：封装了代码编辑器、运行 / 格式化 / 重置按钮。
- 题目结果区（SqlResult）：封装了题目执行结果的展示。
1.4 项目设计难点及解决办法
1.4.1 设计难点
- 难点一：无后端数据库。
- 难点二：如何在前端实现 SQL 执行。
1.4.2 解决办法
- 对于难点一，定义了 levels 目录，统一存放关卡相关数据。将关卡分为主线关卡（教程）和自定义关卡（便于扩展），在 mainLevels.ts 和 customLevels.ts 文件中进行管理。每个关卡都是一个单独的目录，实现了关卡之间的隔离。
- 对于难点二，使用 sql.js 库，在前端执行 SQL 操作。定义了 initDB 和 runSQL 两个函数，用于初始化数据库和执行 SQL 语句。
1.5 项目签名
- 签名：李鹏飞
- 日期：2024年 5 月 20日
2. 项目实践与拓展
2.1 项目实践
2.1.1 项目实施
- 在项目实施过程中，学生需要根据项目要求，完成各个模块的开发和测试。
- 学生需要掌握 Vue 3 和 ant-design-vue 的使用，以及 monaco-editor 和 sql.js 的配置和应用。
- 学生需要对 typescript、eslint 和 prettier 有一定的了解，以便进行前端工程化的开发。
2.1.2 项目评估
- 项目评估将根据学生的开发进度、代码质量和功能实现进行。
- 项目评估将关注学生的独立工作能力和团队协作能力，以及解决实际问题的能力。
2.2 项目拓展
2.2.1 功能拓展
- 项目可以进一步拓展，增加更多的 SQL 功能，如数据导入导出、数据库连接等。
- 项目可以增加更多的题目类型，如选择题、填空题等，以丰富学生的学习体验。
2.2.2 平台拓展
- 项目可以拓展为一个在线的 SQL 学习平台，提供更多的学习资源和服务，如在线课程、论坛交流等。
- 项目可以与其他教育机构合作，将项目作为一个教学工具，为学生提供更多的学习机会。
