发表于: 2020-01-11 22:30:30
0 1442
二、后台
后台-登录
需求描述
作为一个后台管理员我想要一个登录以便于区别每个人的权限和是否有资格登录
验收标准
1.用户名不做限制
2.密码不做限制
3.必填项不填写,登录按钮置灰
4.输入的用户名,错误,或者密码错误提示,请输入正确的用户名及密码的弹窗提示点击确认弹窗消失
实现方案:
1、两个输入框用element ui的input组件,设置prefix-icon属性给输入框前插入图标。
2、密码框添加一个 show-password属性即可得到一个可切换显示隐藏的密码框。
3、 输入框使用v-model双向绑定数据,进行一个简单的表单验证。
4、验证成功后点击登录post请求发送数据给后端,返回成功则跳转到后台首页。
后台-登录
需求描述
作为一个后台管理员我想要一个登录以便于区别每个人的权限和是否有资格登录
验收标准
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.登录成功后跳转页面显示欢迎页,
2.右上角显示用户名
3.点击左侧导航栏的欢迎页可以跳转回来
实现方案:
1、登陆后从服务器返回用户权限数据,把用户有权限的模块渲染在左侧导航栏和头部用户名信息。?
2、退出按钮设一个点击事件,点击发送退出请求。
3、导航栏使用element-ui导航栏组件制作,路由路径根据后端传来的权限使用过滤器写入路由路径。?
4、点击相应导航栏按钮把子路由页面渲染在右侧
5. 在导航栏里设置一个欢迎页
后台-用户管理-用户列表
需求描述:
作为一个平台运营者我需要一个用户管理以便于我更好的管理用户信息
验收标准:
1.用户名,不做限制,用户id是根据用户第一次在多少排名时登录的
2.状态分为,默认全部,还要已冻结和未冻结两种显示
3.用户列表显示用户名和用户头像,
4.当处于未冻结状态时,点击立即冻结弹窗提示是否冻结此用户点击确认用户不能登录,状态变为已冻结,点击取消弹窗消失
当处于已冻结状态时点击立即解冻提示是否解冻此用户点击确认此用户解冻可以登录
状态变为未冻结点击取消弹窗消失
已冻结前台首页展示已冻结
实现方案:
1、 账号管理页面要进行一个数据的获取,可以使用axios发起get 请求获取到数据渲染到页面。
2、 获取第一页数据,控制每页显示的个数,点击页数跳转到相应的页面,跳转到相应的页数。
3、可以通过用户名、用户ID、和状态筛选数据,实现搜索功能。
4,冻结用户,向后台传递id,改变他的状态。
5,解冻用户,向后台传递id,改变他的状态。
需求描述:
作为一个平台运营者我需要一个用户管理以便于我更好的管理用户信息
验收标准:
1.用户名,不做限制,用户id是根据用户第一次在多少排名时登录的
2.状态分为,默认全部,还要已冻结和未冻结两种显示
3.用户列表显示用户名和用户头像,
4.当处于未冻结状态时,点击立即冻结弹窗提示是否冻结此用户点击确认用户不能登录,状态变为已冻结,点击取消弹窗消失
当处于已冻结状态时点击立即解冻提示是否解冻此用户点击确认此用户解冻可以登录
状态变为未冻结点击取消弹窗消失
已冻结前台首页展示已冻结
实现方案:
1、 账号管理页面要进行一个数据的获取,可以使用axios发起get 请求获取到数据渲染到页面。
2、 获取第一页数据,控制每页显示的个数,点击页数跳转到相应的页面,跳转到相应的页数。
3、可以通过用户名、用户ID、和状态筛选数据,实现搜索功能。
4,冻结用户,向后台传递id,改变他的状态。
5,解冻用户,向后台传递id,改变他的状态。
后台-课程管理-视频列表
需求描述:
作为一个平台运营者我需要一个课程列表,以便于添加更多课程
验收标准:
处于下架状态的课程有编辑和删除功能,,点击上架提示,是否上架此课程,点击编辑进入课程编辑,点击删除提示是否删除该课程
上架状态只有下架课程,点击下架提示是否下架此课程
课程列表展示列表数据,筛选数据展示数据列表,重置返回默认的数据列表,增删改查正常使用,新增课程正常填写数据,
必填项不填写,保存按钮置灰不可点击,
视频上传后展示封面,上传成功后再次点击视频模块,变为重新上传
视频上传后展示封面
logo上传好展示封面
标题限制,10位数
详情限制200字必填项
推送年级必填项,选择年级之后,下边推送课程变成相对应年级的科目
实现方案:
1、 进入管理页面获取数据,使用get 请求获取到数据渲染到页面。
2、可以通过年级,课程名称,类型,创建时间,状态筛选数据,实现搜索功能,使用element uI 框架实现下拉菜单跟日期组件,然后用v-model渲染后台数据。
3,上下架用switch语句控制,用axios发put请求更新数据。
4,进入编辑页面,通过id获取相应的信息,然后更改完成之后,点击保存,发送put请求,更改数据
5,点击新增,进入新增页面,填写相应信息,用event.target获取图片,使用Vue+Element UI中的el-upload组件实现视频上传
,保存这条数据并且返回之前页面
后台-后台管理-后台账号管理
需求描述:
作为一个后台高级管理员,我需要一个后台账户管理以便于管理后台账户
验收标准:
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、验证成功点击保存按钮发送请求,上传数据到服务器。
3、验证成功点击保存按钮发送请求,上传数据到服务器。
角色管理
需求描述
作为后台管理员,我想要一个角色管理的功能,以便于对角色进行增删改查权限的操作
作为后台管理员,我想要一个角色管理的功能,以便于对角色进行增删改查权限的操作
验收标准
1.ID自动生成,,ID自增长
2.名称里面显示该角色的登录名称
3.更新时间,最新改动这个角色的账号的名称
4.根据最新编辑过的时间显示
5.点击删除按钮,如果该条角色有绑定的额用户,跳出弹窗提示:请先解绑与角色绑定的用户,前几确认弹窗消失如果没有绑定用户的角色点击删除跳出弹窗提示:是否删除该角色
6.点击新增角色按钮进入新增页面
实现方案
1,刚开始名称和角色权限用逻辑与来实现禁点,当标题和角色权限都选中,保存按钮禁点事件取消可以保存新增角色。:
2.名称里面显示该角色的登录名称
3.更新时间,最新改动这个角色的账号的名称
4.根据最新编辑过的时间显示
5.点击删除按钮,如果该条角色有绑定的额用户,跳出弹窗提示:请先解绑与角色绑定的用户,前几确认弹窗消失如果没有绑定用户的角色点击删除跳出弹窗提示:是否删除该角色
6.点击新增角色按钮进入新增页面
实现方案
1,刚开始名称和角色权限用逻辑与来实现禁点,当标题和角色权限都选中,保存按钮禁点事件取消可以保存新增角色。:
2,新增角色,点击对号赋予角色权限,这个模块的权限由后端返回一个数字给我,然后我用这个数字的集合来代表这个模块的权限,可以赋予这个角色相应的权限, 可以用element中
的Checkbox 多选框来实现多选,不选的话就保存按钮就会显示灰色,设置禁点事件。点击选中模块禁点事件取消,保存用post请求添加角色。
新增角色:
1.角色名限制8位字,
2.必填项必须填写,否则按钮置灰不可点击
3.选择子模块,父模块亮起,但不会选择全部的子模块,只有你选择的那个才会显示已选择,再次点击就可以取消选择,选择父模块的话子模块全部选择,也可以取消不需要的,
4.点击取消,退出角色新增功能跳转到角色管理页
5.必填项选择完之后,按钮亮起可以点击
5、4修改密码
需求描述:
作为一个后台用户,我想要通过后台对密码进行修改,以便于保障账号的安全
验收标准:
旧密码必须是原密码,如果输入错误提示:请输入正确的原密码
新密码输入框输入6~16位的密码,禁止输入符号和汉字如果输入不合理提示,请输入合理的新密码
两次密码必须输入一致,不一致提示:两次密码必须输入一致
上面的不输入完,按钮置灰,输入完按钮可以点击,提示语从上到下提示
实现方案:
1、点击侧边后台管理下的修改密码按钮,路由到修改密码页面
2、输入框用element-ui组件实现,v-model双向绑定数据
3、输入框设置表单验证v-if判断输入框数据、数据比对
4、比对不成功v-if控制修改按钮为灰不能点击,比对成功点击按钮发送修改密码请求
1.角色名限制8位字,
2.必填项必须填写,否则按钮置灰不可点击
3.选择子模块,父模块亮起,但不会选择全部的子模块,只有你选择的那个才会显示已选择,再次点击就可以取消选择,选择父模块的话子模块全部选择,也可以取消不需要的,
4.点击取消,退出角色新增功能跳转到角色管理页
5.必填项选择完之后,按钮亮起可以点击
5、4修改密码
需求描述:
作为一个后台用户,我想要通过后台对密码进行修改,以便于保障账号的安全
验收标准:
旧密码必须是原密码,如果输入错误提示:请输入正确的原密码
新密码输入框输入6~16位的密码,禁止输入符号和汉字如果输入不合理提示,请输入合理的新密码
两次密码必须输入一致,不一致提示:两次密码必须输入一致
上面的不输入完,按钮置灰,输入完按钮可以点击,提示语从上到下提示
实现方案:
1、点击侧边后台管理下的修改密码按钮,路由到修改密码页面
2、输入框用element-ui组件实现,v-model双向绑定数据
3、输入框设置表单验证v-if判断输入框数据、数据比对
4、比对不成功v-if控制修改按钮为灰不能点击,比对成功点击按钮发送修改密码请求
评论