AJAX综合案例——图书管理

黑马程序员视频地址：

AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖的第25集视频，该合集共计140集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25

步骤一：Bootstrap弹框

1. 引入bootstrap.css 和 bootstrap.js

html 复制代码

 <!-- 引入bootstrap.css --> 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">


<!-- 引入bootstrap.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

2. 准备弹框标签，确认结构

html 复制代码

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3. 通过自定义属性，控制弹框的显示和隐藏

1）弹框显示

html 复制代码

<!--第一步：触发弹框，按钮绑定自定义属性：data-bs-toggle="modal"和data-bs-target="CSS选择器"-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myalert">
    显示弹框
  </button>


 <!-- 第二步：给弹框加上myalert类，以便区分同一页面不同弹窗 -->
  <div class="modal myalert" tabindex="-1">
      <!--省略代码好几行-->
  </div>

2）弹框隐藏

html 复制代码

<!--给需要有隐藏效果的按钮加上自定义属性data-bs-dismiss="modal"-->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

4.通过JS控制，控制弹框显示或隐藏

1）弹窗显示

javascript 复制代码

//第一步：给弹窗模块实例化，从而获取show方法与hide方法
const modalDom = document.querySelector(".name-box")
const modal = new bootstrap.Modal(modalDom)
//编辑按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {
  //第二步：调用显示弹窗函数
  modal.show()
})

实例化（new）的作用：继承bootstraop.Modal原型对象里的方法，见下图观察bootstrap对象

javascript 复制代码

console.dir(bootstrap)

2）弹窗隐藏

javascript 复制代码

//保存按钮绑定事件
    document.querySelector(".save-btn").addEventListener("click", () => {
      //隐藏弹框
      modal.hide()
    })

步骤二：渲染列表（查）

javascript 复制代码

const creator = "USER_A001" //给服务器一个标识，用来获取某个用户的专属数据 
function getData()
{
  axios({
    url: "https://hmajax.itheima.net/api/books",
    params: {
      creator
    }
  }).then(result => {
    const bookList = result.data.data    //将服务器返回的数据用一个数组来接收
    const htmlStr = bookList.map((item, index) => {  //map数组映射
      return `
      <tr>          
      <td>${index + 1}</td>          
      <td>${item.bookname}</td>          
      <td>${item.author}</td>          
      <td>${item.publisher}</td>          
      <td>            
      <span class="del">删除</span>            
      <span class="edit">编辑</span>          
      </td>        
      </tr>
      `
    }).join("")  //join将数组用双引号内的东西拼接成字符串
    document.querySelector(".list").innerHTML = htmlStr   //将内容渲染到页面上
    

  }).catch(error => {
    console.log(error)
  })
}

getData()    //调用函数

步骤三：新增图书（增）

javascript 复制代码

//创建弹窗对象
const addModalDom = document.querySelector(".add-modal")
const addModal = new bootstrap.Modal(addModalDom)
//保存按钮绑定事件
document.querySelector(".add-btn").addEventListener("click", () => {
  //获取表单数据
  const addDataDom = document.querySelector(".add-form") 
  const addData = serialize(addDataDom, {hash: true, empty: true})
  //向服务器提交数据
  axios({
    url: "https://hmajax.itheima.net/api/books",
    method: "POST",
    data: {
      ...addData,
      creator
    }
  }).then(result => {
    alert("数据提交成功")
    //清除表单数据
    addDataDom.reset()
    //渲染数据
    getData()
    //隐藏弹窗
    addModal.hide()
  }).catch(error => {
    alert("数据提交失败，请重试")
  })
  
})

步骤四：删除图书（删）

javascript 复制代码

document.querySelector(".list").addEventListener("click", e => { //事件委托
  if(e.target.classList.contains("del"))  //判断触发源
  {
    const theId = e.target.parentNode.dataset.id
    axios({
      url: `https://hmajax.itheima.net/api/books/${theId}`,  //以路径方式提交数据
      method: "DELETE"   //告诉服务器此次事件的方法
    }).then(result => {
      alert("成功删除！")
      getData()    //刷新数据
    }).catch(error => {
      alert("删除失败！")
    })
  }
})

步骤五：编辑图书（改）

javascript 复制代码

//创建编辑弹窗实例对象
const editModalDom = document.querySelector(".edit-modal")
const editModal = new bootstrap.Modal(editModalDom)
//编辑按钮绑定事件 事件委托
document.querySelector(".list").addEventListener("click", e => {
  if(e.target.classList.contains("edit"))
  {
    //获取数据
    const theId = e.target.parentNode.dataset.id
    axios({
      url: `https://hmajax.itheima.net/api/books/${theId}`
    }).then(result => {
      //显示数据
      const editData = result.data.data
      const key = Object.keys(editData)    //获取对象的所有属性名
      
      key.forEach(item => {    //遍历数组，每遍历一次，将获取的数据赋值给拥有对应属性名的元素值
        document.querySelector(`.edit-modal .${item}`).value = editData[item]
        
      })
    }).catch(error => {
      alert("获取数据失败！")
    })
    //显示弹框
    editModal.show()
  }
})

//修改按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {
  //获取数据
  const editDataDom = document.querySelector(".edit-form")
  const {id, bookname, author, publisher} = serialize(editDataDom, {hash: true, empty: true})    //解构
  //提交数据
  axios({
    url: `https://hmajax.itheima.net/api/books/${id}`,
    method: "PUT",    //看接口文档要求提交的方式，跟接口文档保持一致
    data: {    //为什么用data而不用params？接口文档要求的！
      bookname,
      author,
      publisher,
      creator
    }
  }).then(result => {
    alert("修改成功！")
    //关闭弹窗
    editModal.hide()
    //刷新数据
    getData()
  }).catch(error => {
    alert("提交失败！")
  })
  
})