# cocy_yupi_sql

**Repository Path**: tanchuanghao_admin/cocy_yupi_sql

## Basic Information

- **Project Name**: cocy_yupi_sql
- **Description**: 致敬鱼皮!!!
- 主框架：Vue 3
- 组件库：ant-design-vue
- Markdown 展示组件：bytemd + github-markdown-css 主题
- 代码编辑器：monaco-editor
- SQL 执行：sql.js
- SQL 代码格式化：sql-formatter
- 全局状态管理：pinia + pinia-plugin-persistedstate
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-09
- **Last Updated**: 2023-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SQL 之母 - 闯关式 SQL 自学网

> 纯前端实现的闯关式 SQL 自学网
>
> 致敬鱼皮!!!!!!!!!!!!!!!!!!!!!!!

## 项目介绍

一个完全免费的闯关式 SQL 自学教程网站，结合鱼皮自己的 SQL 学习实践经验，编写了 30 多个关卡，用户可以在线提交 SQL 代码做题闯关，目标是从 0 到 1 地带大家掌握常用的 SQL 语法。

此外，网站支持自由选择关卡、自定义关卡、SQL 在线练习广场等功能。
## 1 分钟本地启动

由于项目采用纯前端实现，本地启动项目非常简单！

> 在线访问人数较多，可能会卡顿，所以更推荐大家自己在本地使用~

1）下载本项目代码

2）进入项目根目录，执行 `npm install` 安装项目依赖

3）执行 `npm run dev` 本地启动即可
## 技术选型

本项目采用纯前端实现，不需要任何后端的前置知识~

> Q：为什么采用纯前端实现？
>
> A：减少攻击风险 + 省钱 + 新的学习尝试



- 主框架：Vue 3
- 组件库：ant-design-vue
- Markdown 展示组件：bytemd + github-markdown-css 主题
- 代码编辑器：monaco-editor
- SQL 执行：sql.js
- SQL 代码格式化：sql-formatter
- 全局状态管理：pinia 
- 前端工程化：javascript + eslint + prettier
## 核心设计

### 1、界面模块化

采用模块化的开发思想，把做题页面（主页）拆分为题目浏览区、SQL 编码区、题目结果区，每个区都是一个独立的 Vue 组件文件，实现了逻辑的隔离和组件的复用（比如 SQL 编码区同样可以复用到 SQL 练习广场页面）。

- 题目浏览区（QuestionBoard）：展示题目 Markdown 文档
- SQL 编码区（SqlEditor）：封装了代码编辑器、运行 / 格式化 / 重置按钮
- 题目结果区（SqlResult）：封装了题目执行结果的展示
---------------------------------------------------------20230812