发表于： 2019-12-09 22:49:06
1 1145
今天完成的事：
写方案
前台、个人中心
需求描述
作为一个本产品用户我需要一个个人中心以便于查看个人信息
验收标准
个人中心展示，用户头像和用户名，都是不可编辑，
点击已购课程进入已购课程页，
已购课程，显示已购课程展示logo展示已购字样，拉到底部展示到底了字样，点击课程跳转到课程详情
实现方案：
个人中心：
1、页面布局用flex
2、把登陆时获取到用户名称和头像渲染在头部。
3、两个模块已购课程和收藏，点击相应功能模块、路由跳转到相应页面
收藏：
1、跳转到收藏页面后、 axios请求到收藏的课程数据，for循环把所有课程数据循环渲染展示出来。
2、点击课程路由跳转到详情页并把课程唯一id，传给课程详情页面
3、通过touchstart（手指按下）获取用户第一次点击的y轴坐标点并记录，通过touchmove （手指移动）判断向上滑动还是向下
4、判断列表的滚动条是否在最底部 、当列表滚动条在最底部时并且touchend（手指离开）启动reload()方法刷新。
已购：
1、跳转到已购页面后、 axios请求到已购的课程数据，for循环把所有课程数据循环渲染展示出来。
2、点击课程路由跳转到详情页并把课程唯一id，传给课程详情页面
3、通过touchstart（手指按下）获取用户第一次点击的y轴坐标点并记录，通过touchmove （手指移动）判断向上滑动还是向下
4、判断列表的滚动条是否在最底部 、当列表滚动条在最底部时并且touchend（手指离开）启动reload()方法刷新。
后台-登录
需求描述
作为一个后台管理员我想要一个登录以便于，登录管理平台
验收标准
1.用户名不做限制
2.密码不做限制
3.必填项不填写，登录按钮置灰
4.输入的用户名，错误，或者密码错误提示，请输入正确的用户名及密码的弹窗提示点击确认弹窗消失
实现方案：
1、两个输入框用element ui的input组件，设置prefix-icon属性给输入框前插入图标。
2、密码框添加一个 show-password属性即可得到一个可切换显示隐藏的密码框。
3、 输入框使用v-model双向绑定数据，进行一个简单的表单验证。
4、验证成功后点击登录post请求发送数据给后端，返回成功则跳转到后台首页。
后台-欢迎页
需求描述
作为一个后台管理员，我想要一个欢迎页，以便于欢迎新开通的管理员
验收标准
1.进入页面显示欢迎页，
2.右上角显示用户名
3.点击关闭提示确认退出求学大作战后台管理系统点击取消弹窗消失，点击确认，退出到登录页
实现方案：
1、登陆后从服务器返回用户权限数据，把用户有权限的模块渲染在左侧导航栏和头部用户名信息。
2、退出按钮设一个点击事件，点击发送退出请求。
3、导航栏使用element-ui导航栏组件制作，路由路径根据后端传来的权限使用过滤器写入路由路径。
4、点击相应导航栏按钮把子路由页面渲染在右侧
后台、轮播列表
需求描述
作为一个平台运营者我需要一个轮播图，以便于最新的一些活动做成轮播图来推送
验收标准
正常显示数据，新增跳转到新增页，上下架，编辑，删除正常使用，出现各种情况下的提示
上架状态不能删除编辑，只能下架
新增轮播正常输入数据，上传图片保存之后展示数据
限制5张处于上架状态
实现方案：
1、侧边导航栏点击轮播管理，路由跳转到轮播管理页，发送ajax请求，返回数据v-for渲染列表到页面
2、 上下架按钮点击、发送ajax上下架请求改变状态
3、删除按钮点击、发送ajax删除请求、删除。
3、新增按钮点击，跳转到轮播图新增页面
4、编辑按钮点击，携带id跳转到编辑页面
编辑、新增：
1、路由跳转到当前页面、判断是否携带id数据，改变头部编辑新增标题、渲染数据到输入框
2、给输入框设置表单验证，输入框无值头部显示小红点，v-if控制保存按钮为灰不可点击
3、图片片利用input标签type= ‘file’属性上传，用accept属性限制上传格式，用change事件查看返回的FileList对象判断大小，超过这提示并把文件清空(设置input的值为’’空值)，用fileReader.readAsDataURL(file)方法 获取file对象、再 将file对象转base64放到img标签的src属性实现本地预览
4、表单判断成功点击保存按钮，发送上传请求、上传数据、路由跳转回轮播管理页面。
后台、后台账号管理
需求描述
作为一个后台高级管理员，我需要一个后台账户管理以便于管理后台账户
验收标准
1.用户ID限制只能输入数字
2.两边选择时间前边的时间必须早于后边的时间
3.搜索按照顺序筛选，如果任意选项没有这个歌选择的话，下边用户列表空白显示，没有该条数据
4.点击重置按钮，清除所有筛选
5.ID自动生成，iD自增长
6.名称显示该条用户的账号名
7.角色用户在创建此用户时选择的角色权限
8.显示创建该用户的创建人的账号名称
9.显示最新改动此用户的账号名称，以及刚刚创建的新用户那这里显示创建人的账号名称
10.这里显示过该条数据最新保存更改的时间
11.点击新增用户，进入新增用户页面
12.点击删除按钮，弹窗提示：确认删除此用户
13.点击编辑按钮进入该条用户编辑信息页面
实现方案：
列表页
1、点击侧边后台管理下的后台账号管理按钮，路由到后台账号管理页面、发送ajax请求，返回数据v-for渲染列表到页面
2、头部用element-ui组件实现5个搜索条件输入框和下拉菜单、日期组件
3、点击搜索按钮、发送搜索框相应字段请求数据渲染到列表
4、点击重置按钮、清空输入框搜索条件刷新页面
5、点击新增路由到新增、编辑页面
6、点击编辑携带id路由到新增、编辑页面
7、点击删除，发送删除请求
8、底部根据请求返回的数据显示相应分页按钮、v-if判断超出5个按钮隐藏、点击相应页数按钮发送请求获取返回数据渲染到列
新增、编辑:
1、路由跳转到当前页面、判断是否携带id数据，改变头部编辑新增标题、渲染数据到输入框
2、输入框用element-ui实现，v-model双向绑定数据、v-if设置表单验证
3、验证成功点击保存按钮发送请求，上传数据到服务器。
后台、修改密码
需求描述
作为一个后台用户，我想要通过后台对密码进行修改，以便于保障账号的安全
验收标准
旧密码必须是原密码，如果输入错误提示：请输入正确的原密码
新密码输入框输入6~16位的密码，禁止输入符号和汉字如果输入不合理提示，请输入合理的新密码
两次密码必须输入一致，不一致提示：两次密码必须输入一致
上面的不输入完，按钮置灰，输入完按钮可以点击，提示语从上到下提示
实现方案：
1、点击侧边后台管理下的修改密码按钮，路由到修改密码页面
2、输入框用element-ui组件实现，v-model双向绑定数据
3、输入框设置表单验证v-if判断输入框数据、数据比对
4、比对不成功v-if控制修改按钮为灰不能点击，比对成功点击按钮发送修改密码请求
明天计划的事：
过方案评审，写代码
遇到的问题：
暂无
收获：
暂无
返回列表
评论