今天完成的事情:
file上传视频规定类型
file不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍。2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而已。FileAPI(文件API)的宗旨是为Web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好地对这些文件执行操作。本文将详细介绍文件File API
[注意]IE9-浏览器不支持
File API在表单中的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。在通过文件输入字段选择了一或多个文件时,files集合中将包含一组File对象,每个File对象对应着一个文件。每个File对象都有下列只读属性
name:本地文件系统中的文件名
size:文件的字节大小
type:字符串,文件的MIME类型
lastModifiedDate:字符串,文件上一次被修改的时间
通过侦听change事件并读取files集合就可以知道选择的每个文件的信息
看了一点上传视频的方式,然后江师兄说我禅道拆分没考虑到数据传输的问题, 所以我就有重新的梳理了一下:
禅道模块拆分
后台课程列表
1后台课程列表 静态页面调整布局0.3
2后台课程列表 渲染课程列表输入框数据发送请求
3后台课程列表 发布时间日历组件时间转换1
4后台课程列表 类型下拉框0.2
5后台课程列表 状态下拉框0.2
6后台课程列表 新增页面路由跳转0.1
7发请求获取课程列表数据
8后台课程列表 写上下架按钮id传值获取状态1
9后台课程列表 编辑功能页面路由跳转0.1
10后台课程列表 获取返回的页数数据显示分页按钮
11后台课程列表 点击分页首页按钮发送请求渲染第一页的列表
12后台课程列表 点相应的页数按钮渲染相应的页数列表
13后台课程列表 点保存发送请求实现编辑
14后台课程列表 编辑成功路由跳转
后台课程新增页面:
15后台课程列表 静态页面调整布局0.4
16课程新增列表 保存按钮禁点事件
17课程新增列表 标题与详情输入框0,2
18课程新增列表 推送年级和推送课程下拉框获取数据0.3
19课程新增列表 类型课程收费与课程免费单选框获取数据0.4
20课程新增列表 课程设置金额0,5
21课程新增列表 element-ui视频上传组件el-upload上传图片
22课程新增列表 课程新增列表 写readAsDataURL方法实现图片预览1
23课程新增列表 采用element-ui视频上传组件el-upload上传视频
24课程新增列表 写readAsDataURL方法实现视频预览1
25课程新增列表 点击保存发送请求路由跳转0,4
26课程新增列表 点击取消按钮跳转课程首页0.2
后台用户列表
27后台用户列表 静态页面调整布局0.4
28后台用户列表 发送请求获取角色数据
29后台用户列表 日历组件转换时间戳1
30后台用户列表 数组操作方法:filter() 过滤数组实现模糊查找1
31后台用户列表 角色下拉框数据传递0.3
32后台用户列表 点击搜索页面发送请求0.4
33后台用户列表 点击重置按钮清空数据发送请求0.2
34后台用户列表 类型下拉框数据传递0.2
35后台用户列表状态下拉框数据传递0.2
36后台用户列表 编辑发送请求路由跳转0,1
37后台用户列表 删除按钮发送请求删除用户0.2
38后台用户列表 v-for渲染模块数据
39后台用户列表 获取所有的用户模块数据
40后台用户列表 获取返回的页数数据显示分页按钮
41后台用户列表 查找element-ui中的组件并修改样式0.3
42后台用户列表 点击分页首页按钮发送请求渲染第一页的列表0.2
43后台用户列表 点相应的页数按钮渲染相应的页数列表0.2
新增用户界面
44新增用户界面 静态页面调整布局
45新增用户界面 用户名称输入框0,3
46新增用户页面,下拉框获取角色类型
47新增用户页面 密码输入框
48新增用户页面 保存发送请求更新数据与禁点事件0.3
49新增用户页面 取消按钮返回用户管理列表0,1
角色管理页面
50角色管理页面 静态页面调整布局0,4
51角色管理页面 渲染角色数据0.4
52角色管理页面 新增角色按钮路由跳转0,1
53角色管理页面 编辑按钮路由跳转0,2
54角色管理页面 删除按钮发送请求更新数据0,2
新增角色页面
55新增角色页面 静态页面调整布局0,3
56新增角色页面 角色复选框
57新增角色页面 后台管理中的子复选框
58新增角色页面 角色权限功能打包赋予1
59新增角色页面 保存发送请求跳转路由0,3
60新增角色页面 取消按钮发送请求返回页面0,1
前台登陆页面
61前台登陆页面 静态页面调整布局
62前台登陆页面 html图片功能渲染固定1
63前台登陆页面 首次进入首页判断账号是否被冻结0,3
64前台登陆页面 弹窗显示账号被冻结,三秒跳转页面
65前台登陆页面 首次弹窗年级设置0.4
66前台登陆页面 选择年级页面选中高亮0,3
67前台登陆页面 点击跳转到相应的年级页面发送请求渲染数据
前台课程首页
68前台课程首页 静态页面调整布局
69前台课程首页 选择年级按钮弹出0.3
70前台课程首页 点击确认按钮发送请求刷新页面渲染相应年级数据
71前台课程首页 模糊搜索功能弹出输入框0,4
72前台课程首页 搜索完成发送请求渲染数据 0,4
73前台课程首页 模糊搜索失败渲染的页面0.3
74前台课程首页 轮播图在mint-ui上寻找组件0.2
75前台课程首页 获取轮播图数据渲染0.4
76前台课程首页 给渲染出来的课程数据路由跳转课程详情1
77前台课程首页 查看更多发送请求跳转页面渲染数据0,2
前台课程收费课程展示
78前台课程 静态页面调整布局
79前台课程 课程点击观看发送请求1
80前台课程 课程判断状态收费
81前台课程 购买课程获取数据跳出弹窗
82前台课程 点击确定购买发送请求更新积分
83前台课程 点击弹窗叉号取消弹窗
84前台课程 课程状态判断免费0,5
85前台课程 免费课程禁点事件
86前台课程 课程判断已购课程0,3
87前台课程 收费课程点击发送请求跳出弹窗,
88前台课程 已购课程禁点事件
89前台课程 点击叉号跳转课程首页
这样看着应该差不多。
明天计划的事情:把规划好的步骤和方法写到禅道上,开始写课程列表页。
收获:
重新的拆分了一下禅道,刷新了对禅道步骤的认知,。
评论