发表于: 2020-08-10 19:39:15
1 2046
今天完成的事情:
方案设计:
消息列表
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树形控件实现,制作相应的路由路劲,头部信息从后台获取,显示,注销向后台发送请求并跳转。
公告管理
需求描述
实现公告的上架、下架和新增功能,获取整个列表,控制每页显示的个数,点击页数跳转到相应的页面,跳转到相应的页数,可以通过标题,发布时间和状态筛选数据。
验收标准
默认只能上架一条公告,下架公告后,后面公告自动上架,根据创建时间前后排序。新增编辑公告默认为下架状态。新增界面中,公告内容需要引入富文本。
实现思路
初始进入页面向后台请求参数,获得参数后循环列表显示在页面中。使用datapick组件来实现日期的选择,使用pagination分页分解数据。。
Banner管理
需求描述
实现banner的上架、下架和新增的功能。获取第一页数据,控制每页显示的个数,点击页数跳转到相应的页面,跳转到相应的页数,可以通过标题,发布时间和状态筛选数据,使用elementUI组件实现日期点击下拉。点击相应的操作按钮会弹出提示窗口。
验收标准
点击新增,可增加新的banner,新增banner为下架状态,更新时间默认为创建时间,列表排序以更新时间降序排列。上架作品固定前3位,全部4位位前台侠士的banner,前台最多展示3个banner。上架中的不得删除。点击删除提示:请先下架,banner状态为下架时,才可进行删除,点击后弹出确认选择弹窗,文本内容为:是否确认删除。
实现思路
向后台接口传输数据实现banner的上架和下架,获取第一页数据,控制每页显示的个数,点击页数跳转到相应的页面,跳转到相应的页数,可以通过标题,发布时间和状态筛选数据,使用elementUI datepicker组件实现日期点击下拉。点击相应的操作按钮会弹出提示窗口。
后台管理:
需求描述
1.作为一名后台管理者,我希望可以对文章进行新增、编辑、上下架、搜索的操作,列表对序号、标题、作者昵称、发布时间、封面、摘要、收藏点赞数进行相应的展示。这样便于大致了解文章的主题。
2.作为一名后台管理者,我希望可以对文章的标题、作者、内容做出编辑或新增的动作。对文章内容进行保存、取消、和返回的操作。
3.作为用户,可以对当前登陆的账号进行更改密码。
方案
1、 账号管理页面要进行一个数据的获取,可以使用axios发起get 请求获取到数据渲染到页面。
2、 新增账号输入相应的数据发送请求、编辑使用的put请求从客户端向服务器传送的数据取代文档中的内容。删除和查询同样通过请求服务器指定后进行操作
3、角色管理同账户管理
修改密码
方案:
输入旧密码,当旧密码和指定的数据相同时,得到验证。重新输入密码设定两input达成一致时发送请求
明天计划的事情:
登录页面
遇到的问题:
无
收获
评论