英雄管理案例

数据 动态渲染

页面一打开就需要渲染数据

查阅接口文档

• 02-英雄信息管理 - 1获取所有英雄-Ajax课程

发起ajax请求，获取数据

遍历返回的数组，拼接生成动态结构

填充到指定位置

数据的搜索

搜索的本质就是查询

• 如果没有传递参数就是查询所有数据
• 如果有参数，就是搜索

将之前的数据的渲染操作封装为一个函数，搜索关键字做为函数的参数

数据的添加

模态框

• 模态框的添加

  • 做为Body的直接子元素

• 模态框的弹出

  • 为控制按钮添加属性

    • data-toggle='modal'
    • data-target='模态框的id'

  • 为模态框设置id

• 模态框制作

实现数据的添加

• 查阅接口文档

• 发起ajax请求

• 添加成功之后进行页面列表数据的刷新

  • 再次调用数据的渲染方法

• 说明：现在还没有处理用户头像

数据的删除

查阅接口文档

事件的绑定

• 动态生成的元素的 事件 绑定需要使用事件委托

数据的删除

• 渲染结构的时候将用户id存储到当前删除按钮中
• id的获取
• 发起ajax请求
• 页面列表数据的刷新

数据的编辑

文件上传

• 查阅接口文件，传递的文件数据是二进制数据

• 使用formdata收集用户头像数据

  • 获取文件数据： dom.files[0]
  • 创建FormData对象
  • 使用append方法将文件数据对象追加到formdata中
  • ajax的参数支持直接传递formdata

用户头像编辑

• 文件上传成功之后，我们还需要再次发起ajax实现用户数据的编辑更新

• 查阅接口文档，需要传入：id ,img

  • 后台编辑操作需要根据id进行，以便找到唯一的数据进行编辑
  • 如果不传入条件，则会编辑所有数据

• img

  • 来自于文件上传成功之后的后台返回数据：res.src

• id

  • 生成动态结构的时候将id存储到“上传头像”按钮中

  • 单击“上传头像”按钮弹出模态框的时候，将id转存到全局变量中

  • 在文件上传成功之后，发起更新用户信息的ajax请求，在请求中使用全局的id做为参数传递

    • data: { id: heroId, img: res.src }