验证码登录
步骤:
- 在utils/request.js配置axios请求基地址
- 收集手机号和验证码登录数据
- 基于axios调用验证码登录接口
- 使用Bootstrap的Alert警告框反馈结果给用户
个人信息设置和axios请求拦截器
发布文章-富文本编辑器
- 引入CSS样式
- 定义HTML结构
- 引入JS创建编辑器
- 监听内容改变,保存在隐藏文本域(便于后期收集)
发布文章-频道列表
发布文章-封面设置
- 准备标签结构和样式
- 选择文件并保存在FormData
- 单独上传图片并得到图片URL地址
- 回显并切换img标签展示(隐藏+号上传标签)
发布文章-收集并保存
- 基于form-serialize插件收集表单数据对象
- 基于axios提交到服务器保存
- 调用Alert警告框反馈结果给用户
- 重置表单并跳转到列表页
内容管理-文章列表展示
-
准备查询参数对象
-
获取文章列表数据
-
展示到指定的标签结构中
内容管理-筛选文章列表功能
-
设置频道列表数据
-
监听筛选条件改变,保存查询信息到查询参数对象
-
点击筛选时,传递查询参数对象到服务器
-
获取匹配数据,覆盖到页面展示
内容管理-分页功能
- 保存并设置文章总条数
- 点击下一页,做临界值判断,并切换页码参数请求最新数据
- 点击上一页,做临界值判断,并切换页码参数请求最新数据
内容管理-删除功能
- 关联文章id到删除图标
- 点击删除时,获取文章id
- 调用删除接口,传递文章id到服务器
- 重新获取文章列表,并覆盖展示
-
删除最后一页的最后一条,需要自动向前翻页
内容管理-编辑文章-回显
- 页面跳转传参(URL查询参数方式)
- 发布文章页面接收参数判断(共用同一套表单)
- 修改标题和按钮文字
- 获取文章详情数据并回显表单
内容管理-编辑文章-保存
- 判断按钮文字,区分业务(因为共用一套资源)
- 调用编辑文章接口,保存信息到服务器
- 基于Alert反馈结果消息给用户
退出登录
-
绑定点击事件
-
清空本地缓存,跳转到登录页面