目录
1 系统概要说明 5
2 小程序设计 5
2.1 通用样式模块 5
2.2 通用方法模块 5
2.2.1 用户登录校验拦截器方法 5
2.2.2 登录方法 6
2.2.3 注册方法 7
2.2.4 登出方法 7
2.2.5 自动登录功能 8
2.3 像素画画板模块 8
2.3.1 画板坐标系 8
2.3.2 画板的生成 9
2.3.3 颜色的选择 9
2.3.4 画板的绘制 10
2.3.5 绘图撤销功能 12
2.3.6 全部清除功能 12
2.3.7 像素画预览功能 12
2.4 像素画上传模块 13
2.4.1 上传页面跳转的检测 14
2.4.2 表单校验 14
2.4.3 表单清除按钮 17
2.4.4 上传功能 17
2.5 像素画分享圈模块 18
2.5.1 分页查询 19
2.5.2 下拉刷新 21
2.5.3 上拉加载 21
2.5.4 点击绘制预览 21
2.5.5 接力创作 22
2.6 个人信息模块 22
2.6.1 登录或注册 22
2.6.2 退出登录 23
2.6.3 查看我的创作 23
2.7 像素画管理模块 23
2.7.1 查询 23
2.7.2 查看 24
2.7.3 删除 25
3 数据库设计 26
3.1 数据库可视化图 27
3.2 建表语句MySQL版 27
3.3 建表语句H2版 28
4 接口设计 29
4.1 登录接口 29
4.1.1 接口地址 29
4.1.2 请求方式 30
4.1.3 请求体参数 30
4.1.4 响应数据 30
4.2 注册接口 30
4.2.1 接口地址 30
4.2.2 请求方式 31
4.2.3 URL参数 31
4.2.4 请求体参数 31
4.2.5 响应数据 31
4.3 退出登录接口 31
4.3.1 接口地址 31
4.3.2 请求方式 31
4.3.3 请求头参数 31
4.3.4 响应数据 31
4.4 插入一条像素画接口 32
4.4.1 接口地址 32
4.4.2 请求方式 32
4.4.3 请求头参数 32
4.4.4 请求体参数 32
4.4.5 响应数据 32
4.5 根据像素画id查询某个像素画的详细信息接口 32
4.5.1 接口地址 33
4.5.2 请求方式 33
4.5.3 Restful风格参数 33
4.5.4 响应数据 33
4.6 分页查询像素画列表接口 33
4.6.1 接口地址 33
4.6.2 请求方式 33
4.6.3 请求体参数 33
4.6.4 响应数据 34
4.7 根据用户id查询这个用户发布的所有像素画 34
4.7.1 接口地址 34
4.7.2 请求头参数 35
4.7.3 响应数据 35
4.8 根据像素画id删除一条像素画 36
4.8.1 接口地址 36
4.8.2 请求方式 36
4.8.3 请求头参数 36
4.8.4 Restful风格参数 36
4.8.5 响应数据 36
5 后端设计 36
5.1 mapper持久层 37
5.2 service服务层 37
5.3 controller控制层 37
6 系统测试 37
6.1 测试环境 37
6.2 功能测试 37
6.2.1 绘图功能 37
6.2.2 上传功能 38
6.2.3 分享圈功能 38
6.2.4 个人信息测试 38
6.2.5 像素画管理测试 39
6.3 界面测试 39
6.3.1 画板界面 39
6.3.2 上传界面 40
6.3.3 分享圈界面 40
6.3.4 我的信息界面 41
6.3.5 像素画管理界面 41
7 服务器的安装与部署 42
7.1 MySQL版服务器的配置 42
7.2 H2完全脱机版服务器的配置 43
1系统概要说明
系统分为五个模块：
1.像素画画板模块：绘制像素画，预览像素画的绘制过程，修改像素画
2.像素画上传模块：校验像素画的内容，上传像素画到服务器
3.像素画分享模块：查看其他用户上传的像素画，编辑其他用户上传的像素画，查看其他用户绘制像素画的过程（播放像素画）
4.像素画管理模块：查看自己的所有像素画，删除自己的某个像素画
5.个人信息模块：登录注册和退出登录
2小程序设计
通用样式模块
通用样式包括通用按钮样式，通用横向布局通用样式，纵向布局通用样式。
通用按钮样式共有8中样式，分别是红紫绿橙大按钮和红紫绿橙小按钮。横向与纵向的通用布局采用的是flex方式。
通用方法模块
用户登录校验拦截器方法
按钮的拦截器，检测用户是否登录或注册，如果没有，则弹窗让用户登录。
在用户登录后，用户的sessionid会被存入app.js全局文件的全局数据中，通过判断全局globalData中是否用用户的信息来判断用户是否登录，如果用户没有登录，则直接调用登录方法进行登录，如果用户已经登录，则什么也不做
注意这个方法必须在登录方法成功后在调用，并且必须要用户点击后才能调用，否则无法触发弹窗，因为小程序的设定。
