AJAX 英雄管理案例

KleinBlue
817 阅读2分钟

1、启动后台服务器

image.png image.png

2、添加axios全局配置

axios.defaults.baseURL = 'http://127.0.0.1:3001'

3、引入资源文件

<!-- 引入jq文件 -->
<script src="./libs/jquery/jquery.min.js"></script>
<!-- bootstrap资源文件，它要基于jquery -->
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入axios文件 -->
<script src="./libs/axios.js"></script>
<!-- 引入全局配置文件 -->
<script src="./utils/reques.js"></script>
<!-- 引入js文件 -->
<script src="./js/index.js"></script>

4、获取元素

// 获取表格元素，用于实现事件委托
let tbody = document.querySelector('#tbody')

// 获取搜索按钮，用于实现数据查询
let btn_search = document.querySelector('#btn_search')

// 获取查询英雄信息表单，用于得到用户输入的value值进行查询
let hname = document.querySelector('#hname')

// 获取添加英雄按钮，用于添加英雄数据
let openDialog = document.querySelector('.openDialog')

// 获取新增英雄的name表单，用于添加英雄的名称
let heroname = document.querySelector('#heroname')

// 获取新增英雄的gender表单，用于添加英雄的性别
let herogender = document.querySelector('#gender')

// 获取新增英雄的模态框确定按钮
let btnAdd = document.querySelector('.btnAdd')

// 获取上传头像按钮
let myModalLabel = document.querySelector('#myModalLabel')

// 获取上传文件的模态框确定按钮
let btnHeroEdit = document.querySelector('.btnHeroEdit')

// 获取文件选择表单，用于将图片提交到后台
let heroImg = document.querySelector('#heroImg')

5、数据动态渲染

    1. 想要实现数据动态渲染，前提是先静态再动态
    1. 想得到数据，需要发起AJAX请求
    • 因为做了全局配置所以url地址只需要写'/getHeroList'
    • method不写默认发起的是gei请求
    1. 对数据进行遍历拼接，生成结构
    1. 封装成一个函数，便于调用进行使用
// 1.数据渲染
function init(heroName) {
    axios({
        url: '/getHeroList',
        params: {
            heroName
        }
    }).then(res => {
        let htmlStr = ''
        res.data.data.forEach((value, index) => {
            htmlStr += `<tr>
                        <td>${index + 1}</td>
                        <td>${value.name}</td>
                        <td>${value.gender}</td>
                        <td>
                        <img src="${value.img}" alt="" />
                        </td>
                        <td>
                        <button type="button" data-id="${value.id}" class="btn btn-info upload">
                            上传头像
                        </button>
                        <button type="button" class="btn btn-warning btndel" data-id="${value.id}">
                            删除
                        </button>
                        </td>
                    </tr>`
        });
        tbody.innerHTML = htmlStr
    })
}
init()

6、数据搜索（查询）

    1. 查询，搜索和分支本质上都是查询 ，意味着共享同一个方法
    1. 获取元素，绑定事件，在事件处理函数中获取用户输入的内容，实现搜索
    1. 关键代码：
    • 获取用户输入内容
    • 改造init方法，添加一个参数，参数就是搜索关键字（改造init方法的具体代码看数据动态渲染）
    • 在axios请求的配置选项中添加params选项，用于参数的设置
    1. 看它是否有参数，没有参数就查询所有值，如果有参数就根据参数进行查询
// 2.搜索
btn_search.addEventListener('click', function() {
  let key = hname.value
  init(key)
})

7、添加英雄数据

    1. 点击添加弹出新增模态框，弹框有两种方法：
    • 属性方式
    • js方式： $('#myModel').modal('show') （这种方法更多使用）
    1. 点击确定按钮提交数据同时重新渲染页面
    1. 获取英雄姓名、性别的表单value值，以及默认图片
    1. 发起AJAX请求
    • 请求方式、请求url地址需查看api文档，根据api文档需求进行书写
    • data参数格式只能以key=value进行书写
    • 请求成功之后给出提示，让模态框隐藏，重新渲染数据，同时让之前输入框的内容清空
// 3.新增 英雄数据
// 3.1 弹出新增模态框
openDialog.addEventListener('click', function() {
  $('#addHeroModal').modal('show')
})
// 3.2 实现新增功能
btnAdd.addEventListener('click', function() {
  let name = heroname.value
  let gender = herogender.value
  let img = './images/default.jpg'
  axios({
    method: 'post',
    url: '/addHero',
    // 参数格式只能写key=value
    data: { name, gender, img }
  }).then(res => {
    console.log(res)
    if (res.data.code == 200) {
      alert(res.data.msg)
      $('#addHeroModal').modal('hide')
      init()
      heroname.value = ''
      herogender.value = '男'
    }
  })
})

8、删除英雄数据

    1. 添加事件委托
    • 要给静态的父容器添加
    1. 判断是否点击了删除按钮，如果点击了删除就会触发后面的代码
    1. 发起AJAX请求
    • 使用自定义属性存储英雄id，删除需要获取英雄id做为条件进行删除
    • 删除成功之后给出提示，数据重新渲染
// 4.删除英雄数据
tbody.addEventListener('click', function(e) {
  // 判断是否单击了删除按钮
  if (e.target.classList.contains('btndel')) {
    if (confirm('你真的需要删除吗？')) {
      axios({
        url: '/delHeroById',
        params: { id: e.target.dataset.id }
      }).then(res => {
        alert('ok了')
        init()
      })
    }
  }
})

9、编辑用户头像

    1. 弹出文件上传模态框
    • 使用委托方法绑定事件
    • 弹出上传文件的模态框
    • 为每个上传头像按钮添加一个自定义id属性，因为编辑的原理是通过id进行编辑
    1. 实现文件上传
    • 获取文件对象
    • 通过formdata收集文件数据
      • new FormData()
      • formdata.append(键，文件对象)
    1. 发起AJAX请求
    • formdata可以直接做为参数传递给data进行使用
    1. 实现用户头像的编辑
    • 当文件上传成功之后，还需要更新用户的头像信息
    • 接口要求以key=value的形式传递数据id
    • 更新头像还需要传递头像路径，这个路径就是来自于文件上传成功之后的返回数据
    • 成功以后给用户提示，然后让模态框隐藏，数据重新渲染
// 5.文件上传
let editId
// 5.1 弹出模态框
tbody.addEventListener('click', function(e) {
  if (e.target.classList.contains('btnUpload')) {
    $('#uploadImgModal').modal('show')
    editId = e.target.dataset.id
  }
})
// 5.2 实现文件上传的功能
btnHeroEdit.addEventListener('click', function() {
  // 获取文件对象
  let myfile = heroImg.files[0]
  // 创建formdata对象
  let formdata = new FormData()
  // 将文件对象追加到formdata中
  formdata.append('file_data', myfile)
  // 发起ajax请求实现文件上传
  axios({
    method: 'post',
    url: '/uploadFile',
    data: formdata
  }).then(res => {
    console.log(res)
    if (res.data.code == 200) {
      alert(res.data.msg)
      // 再发起ajax请求实现用户头像的更新
      axios({
        method: 'post',
        url: '/updateHero',
        data: `id=${editId}&img=${res.data.src}`
      }).then(result => {
        console.log(result)
        alert(result.data.msg)
        $('#uploadImgModal').modal('hide')
        init()
      })
    }
  })
})
avatar
文章
阅读
粉丝