西安广播电视大学 2022 年（秋）直属一 分校（工作站）计算机类大数据技术（专业）专科毕业实操考核登记表

1. 项目背景与目的

1.1 项目背景

1.1.1 SQL知识的重要性

• SQL（Structured Query Language，结构化查询语言）是数据库管理系统的标准语言，是数据分析师、程序员和产品经理必备的核心技能。
• 随着大数据时代的到来，数据已经成为企业竞争的核心资源，掌握SQL技能可以有效管理和分析数据，为企业决策提供数据支持。

1.1.2 学习SQL的挑战

• 虽然互联网上有大量的SQL学习资源，但质量参差不齐，缺乏系统性和实用性。
• 传统的学习方式过于理论化，难以激发学生的学习兴趣和实际操作能力。

1.2 项目目的

1.2.1 提高SQL实践能力

• 通过实战项目，让学生在实践中掌握SQL的基本语法和应用技巧，培养实际操作能力。
• 项目旨在培养学生解决实际问题的能力，提高学生的实战经验和竞争力。

1.2.2 激发学习兴趣

• 通过互动式的学习方式，激发学生对SQL学习的兴趣和热情。
• 项目设计注重趣味性和实用性，使学生在轻松愉快的氛围中学习SQL。

2. 项目设计与实现

2.1 项目设计

2.1.1 设计理念

• 项目采用纯前端实现，无需后端支持，降低技术门槛，使学生能够更加专注于SQL技能的学习。
• 项目以模块化设计，将不同的功能模块拆分为独立的组件，提高代码的可维护性和可复用性。

2.1.2 技术选型

• 主框架：Vue 3，轻量级的前端框架，易于上手和学习。
• 组件库：ant-design-vue，提供丰富的组件库，方便快速开发。
• Markdown展示组件：bytemd + github-markdown-css，支持Markdown编辑和展示，适合编写教程和文档。
• 代码编辑器：monaco-editor，功能强大的代码编辑器，支持代码高亮、智能提示等特性。
• SQL执行：sql.js，开源的SQL执行库，支持在前端执行SQL语句。
• SQL代码格式化：sql-formatter，自动格式化SQL代码，提高代码的可读性。
• 全局状态管理：pinia + pinia-plugin-persistedstate，实现全局状态管理，方便管理和共享数据。
• 前端工程化：typescript + eslint + prettier，提高代码质量和规范性。
• 工具库：lodash，提供丰富的工具函数，方便进行数据处理和操作。

2.2 模块介绍

2.2.1 题目浏览区（QuestionBoard）

• 展示题目Markdown文档，方便学生查看和学习。
• 支持Markdown格式，可以编写图文并茂的教程，提高学习效果。

2.2.2 SQL编码区（SqlEditor）

• 封装了代码编辑器、运行/格式化/重置按钮，方便学生编写和执行SQL语句。
• 支持代码高亮、智能提示等功能，提高代码编写效率。

2.2.3 题目结果区（SqlResult）

• 展示题目执行结果，方便学生查看和分析。
• 支持结果的排序、筛选等功能，方便学生进行数据分析和探索。

2.3 设计难点与解决办法

2.3.1 无后端数据库

• 没有后端数据库，如何管理关卡数据和示例数据成为一个挑战。
• 解决方案：定义levels目录，统一存放关卡相关数据，将关卡分为主线关卡和自定义关卡，实现关卡之间的隔离和数据的管理。

2.3.2 纯前端操作数据库

• 纯前端如何操作数据库和执行SQL语句成为一个技术难点。
• 解决方案：使用sql.js库，在前端执行SQL语句，实现数据库的操作和查询。

3. 项目总结与展望

3.1 项目总结

• 通过本项目的学习和实践，学生可以掌握SQL的基本语法和应用技巧，提高实战经验和竞争力。
• 项目采用模块化设计和前端实现，降低了技术门槛，使学生能够更加专注于SQL技能的学习。
• 项目注重趣味性和实用性，通过实战项目激发学生的学习兴趣和热情。

3.2 项目展望

• 未来可以进一步扩展关卡内容，增加更多实战案例和难度级别，满足不同学生的学习需求。
• 可以引入更多的前端技术，如React、Angular等，丰富项目的技术栈和实现方式。
• 可以考虑增加在线测试和排名功能，增加项目的互动性和竞争性，激发学生的学习动力。