计蒜客软件工程实训项目——在线编程游戏

小组名：卓越创客

[TOC]

0 项目背景

本项目为提供给7-14岁青少年儿童娱乐学习使用的在线编程游戏，旨在通过游戏的方式、采用可视化的形式让青少年儿童轻松愉快地掌握顺序、分支、条件等基本的程序设计流程，启蒙青少年儿童的编程思想。

1 项目架构

工具类型	工具名称
前端核心	Vue.js
UI核心	Element
后台核心	Python3 + Django
第三方库	Google Blockly,Code Mirror
包管理工具	pip,npm
代码风格检查工具	Eslint,Pylint
文档生成工具	Doxygen

2 开发约定

1. doc目录下的文件一律为MarkDown格式文档，命名一律采用**<用途>Doc.md**的形式，命名结构为英文大驼峰格式。

3 目录结构

3.1 根目录结构

目录名	工具名称
dev	存放项目依赖的配置文件。
doc	存放在项目需要使用到的文档文件，用于构建项目的wiki。
res	资源代码，用于存放各种资源文件（图片等）。
CodeGame	项目核心代码，内部为Django项目目录结构。
UnityProject	Unity项目代码，用于实现游戏场景的渲染。

项目目录结构图：

3.2 项目目录结构

目录名	工具名称
CodeGame	项目后台整体配置文件目录。
UserManage	项目后台用户管理模块配置文件目录。
ChallengeMode	项目后台挑战模式配置文件目录。
FreeMode	项目后台自由模式配置文件目录。
frontend	项目前端代码目录。

4 部署方案

4.1 前端部署

1. 将根目录中的package.json文件放到CodeGame/frontend目录下。
2. 在CodeGame/frontend目录下使用cnpm install安装JS依赖包。额外需要安装的JS包包括：
   1. vue-router
   2. element-ui
   3. axios
3. 在CodeGame/frontend目录下添加build目录用于存放若干build配置文件。
4. 使用npm run build生成发布目录dist。
5. 使用npm run dev运行Vue服务器，进入开发者模式。

4.2 后端部署

1. 使用pip install django或conda install django安装Django。

2. 使用pip install django-cors-headers安装django-cors-headers包实现跨域访问。

3. 使用mysql -uroot -p<密码> jisuanke < jisuanke.sql运行项目sql文件创建数据库与数据库对象。

4. 在**/HFUT_Group3/CodeGame/CodeGame/settings.py**文件内修改以下内容：

   DATABASES = {
       'default': {
           'ENGINE': 'django.db.backends.mysql',
           'NAME': 'jisuanke',
           'USER': 'root',
           'PASSWORD': '<你的密码>',
           'HOST': 'localhost',
           'PORT': '3306',
       }
   }

5. 在**/HFUT_Group3/CodeGame/CodeGame/init.py**文件内添加以下内容：

   import pymysql
   pymysql.install_as_MySQLdb()

6. 使用python manage.py inspectdb > <APP名称>/models.py将数据库导入models文件。

7. 使用python manage.py runserver运行项目。

5 成果展示