今天完成的事情：

方案设计：

一、基本工具

1.开发工具

1.1编译器：vscode

1.2版本管理工具：svn

1.3 css预处理器：sass

1.4原型查看：Axure / 浏览器插件

1.5切图工具：photoshop

2.整体架构

2.1前台：vant-ui

2.2后台：element-ui

2.3 js框架： vue + vue-cli3

3.插件

3.1路由：vue-route

3.2请求：axios

3.3富文本：vue-quill-editor

3.4轮播：swiper

3.5滑动：better-scroll

模块：

消息列表

1、点击按钮执行操作，跳转，删除，上架。按钮弹窗效果，确认及取消对应效果

2、“已推送”状态消息，不能再次推送，“立即推送”按钮隐藏；“未推送”状态消息

可以立即推送

3、列表排序按推送时间倒序排序

4、推送时间展示实际推送消息时间

技术方案：

在钩子函数created上axios发起请求，根据返回对象，利用v-for展示第一页数据，利用new date() 转换时间戳。分页用element-Pagination编写，然后根据点击的按钮，及每页展示条数发起对应请求。

点击删除，立即推送，用element-Dialog组件写弹窗及点击取消确认后的对应操作

点击新增，查看，用路由router进行页面的跳转。

利用element-input写输入框，element-Select编写下菜单，element-DatePicker写日期。重置清空内容，重新发起请求行。搜索则根据对应内容发起请求。

新增消息

1、表单输入长度限制

2、推送方式：点击定时推送展示时间选择器

3、点击按钮执行操作，跳转。弹窗，确认按钮后跳转

技术方案：

  输入框同上element-ui，并加入属性maxlength限制长度。利用element-radio编写单选框，利用v-show点击定时推送后展示日期，时间选择器( element-TimePicker)。

  点击发送执行axios发送请求，Dialog弹窗，确认router跳转。

点击取消直接router跳转

用户列表

1、搜索筛选，重置清空。按时间降序显示。

2、鼠标放到查看或者冻结上改变颜色，点击查看，跳转“用户详情”页面

3、点击冻结提示弹窗“冻结后将无法登录，是否冻结该用户？”，点击确定冻结该用户全

部权限，用户状态变更为“冻结”，点击取消弹窗消失；

4、解冻操作相同

用户详情

1、点击确定返回用户列表页

技术方案：

用户列表基本同上的技术方案，用户详情利用router跳转

课程列表

1、搜索筛选，重置清空

2、点击编辑，删除，下载执行对应操作，弹出提示框

3、上架状态不可编辑，删除(提示框先下架)

技术方案：

  同用户列表，功能基本相同

新增课程，编辑课程：

1、课程封面只显示一张图片，点击上传照片，显示上传中，上传成功显示图片，上传新图片替代旧图片。大小在5M以内，格式限制为jpg、png

技术方案：

输入框，选择框，按钮点击实现与之前相同，图片利用input标签type= ‘file’属性上传，用accept属性限制上传格式，用change事件查看返回的FileList对象判断大小，超过这提示并把文件清空(设置input的值为’’空值)

视频预览利用video标签设置src地址，或者iframe标签

富文本利用插件vue-quill-editor实现

登录页

需求描述

进入页面需要登录，登录完成后才能进入后台页面，在地址栏输入模块跳转回首页

验收标准

         1用户名限制为字母和数字，限制字符为30字符，如用户名填写错误，出现提示语，用户不存在，密码填写错误提示语密码错误，全部正确，登录成功

实现思路

         1：通过axios将两个文本框的内容传输给后台获得相应数据，错误数据展示，正确数据跳转页面到后台。

欢迎页

需求描述

         全局管理后台的模块的列表，让使用者可以快速的找到相应要操作的模块，有显示用户和退出的功能

验收标准

         左侧是一个手风琴页面，鼠标滑过侧边栏模块，显示深色矩形框表示可点击，点击以及导航栏，向下展开二级菜单，点击二级菜单，跳转至对应页面，顶部右侧用户信息、注销按钮

实现思路

         左边侧边栏使用elementUI tree树形控件实现，制作相应的路由路劲，头部信息从后台获取，显示，注销向后台发送请求并跳转。

明天计划的事情：

完成方案设计

遇到的问题：

无

收获