ToB企服应用市场:ToB评测及商务社交产业平台

标题: 图书管理增删查改案例学习总结附代码与讲解（Axios） [打印本页]

---

作者: 忿忿的泥巴坨    时间: 2024-9-10 04:25
标题: 图书管理增删查改案例学习总结附代码与讲解（Axios）

• 渲染列表（查）
  
• 新增图书（增）
  
• 删除图书（删）
  
• 编辑图书（改）
  

目标1：渲染图书列表

  1.1 获取数据

  1.2 渲染数据

1. //获取数据
2. const creator = "老张"
3. function getData() {
5.     axios({
6.         url: "http://hmajax.itheima.net/api/books",
7.         params: {
8.             creator //属性与变量同名省略
9.         }
10.     }).then(result => {
11. //渲染数据
12.         const booklist = result.data.data
13.         const htmlStr = booklist.map((item, index) => {
14.             return ` < tr >
15.       <td>${index + 1}</td>
16.       <td>${item.bookname}</td>
17.       <td>${item.author}</td>
18.       <td>${item.publisher}</td>
19.       <td data-id=${item.id}>
20.         <span class="del">删除</span>
21.         <span class="edit">编辑</span>
22.       </td>
23.     </tr >`
24.         }).join('')
25.         document.querySelector('.list').innerHTML = htmlStr
26.     })
27.    
28. }
29. getData()

复制代码

 

目标2：新增图书列表

   1.1 点击弹框，出现新增（用js控制弹框）。

• 先把要控制的弹框获取过来
  
• 创建新弹框对象
  
• const addModalDom = document.querySelector('.add-modal')；const addModal = new bootstrap.Modal(addModalDom)
  
  
  /*创建弹框对象（这段代码选择具有 "add-modal "类的 DOM 元素，并利用该 DOM 元素创建一个新的 Bootstrap 模态实例。如许，您就可以通过`addModal` 变量来控制模态，例如表现、隐藏或利用 Bootstrap 模态方法和属性来操作模态。）*/
  
  1.2 网络表单数据（利用插件serialize）
         1.2.1必要在index里引入<script src="./lib/form-serialize.js"></script>插件
  1.3向服务器提交数据
  1.4 重新获取，渲染数据
  
• 1. 创建被控制弹框对象
  2. const addModalDom = document.querySelector('.add-modal')
  3. const addModal = new bootstrap.Modal(addModalDom)
  5. //获取保存按钮->点击->隐藏弹框
  6. document.querySelector('.add-btn').addEventListener('click', () => {
  7.    
  8.     //收集数据（需要在index里引入<script src="./lib/form-serialize.js"></script>插件
  9.     const addForm = document.querySelector('.add-form')
  10.     //定义接受图书数据的变量
  11.     const bookObj = serialize(addForm, { hash: true, empty: true })
  12.    // console.log(bookObj)
  13.        //提交到服务器
  14.     axios({
  15.         url: 'http://hmajax.itheima.net/api/books',
  16.         method: 'post',
  17.         data: {
  18.             ...bookObj,
  19.             creator
  20.         }
  21.     }).then(result => {
  22.        //提交处理后的结果（添加数据）
  23.         getData()
  24.        // 重置表单
  25.         addForm.reset()
  26.         addModal.hide()
  27.     })
  28. })

  复制代码
  目标3：删除选定图书
  
  
  3.1获取选定图书的删除按钮（给动态生成的标签绑定点击事件，可以委托给父级）
  
  
  3.2通过ID获取当前列
  
  
  3.3利用数据传参的方式提交删除的数据
  
  
  3.4重新传参
  
  
  1. //先获取父级元素tbody，再获取里面的
  2. document.querySelector('.list').addEventListener('click', e => {
  3.     //如果点的是“删除”
  4.     if (e.target.classList.contains('del')) {
  5.         //  console.log(e.target)
  6.         //获取图书id(自定义属性id)
  7.         const theId = e.target.parentNode.dataset.id
  9.         axios({
  10.             url: `http://hmajax.itheima.net/api/books/${theId}`,
  11.             //路径传参
  12.             method: 'DELETE'
  13.         }).then(()=> {
  14.             getData()
  15.         }
  16.        )
  17.     }
  18. })

  复制代码
  目标4：编辑选定图书（弹框表现隐藏——数据表现——生存修改&刷新列表）
  
  
  4.1创建编辑弹框
  
  
  3.1.1通过JS控制表现隐藏
  
  
  4.2编辑数据
  
  
  4.2.1（根据Id利用axios）获取当前编辑图书数据，（遍历属性，）返回到表单中
  
  
  4.3利用数据传参的方式提交编辑的数据
  
  
  4.4重新传参
  
  
  1. //先创建模态框
  2. const editDom = document.querySelector('.edit-modal')
  3. const editModal = new bootstrap.Modal(editDom)
  5. //获取对应元素
  6. document.querySelector('.list').addEventListener('click', e => {
  7.     if (e.target.classList.contains('edit')) {
  8.       
  9.         const theId = e.target.parentNode.dataset.id
  10.         //console.log(theId)
  11.         //调用删除接口
  12.         axios({
  13.             url: `http://hmajax.itheima.net/api/books/${theId}`,
  14.            
  15.         }).then(result => {
  16.            //从result中取出图书对象
  17.             const bookObj = result.data.data
  18.             //document.querySelector('.edit-form .bookname').value =
  19.             //    bookObj.bookname
  20.             //document.querySelector('.edit0form .author').value =
  21.             //    bookObj.author
  23.             /*这段代码片段是使用JavaScript来遍历一个对象（bookObj）的键值对，并将每个键对应的值填充到页面上指定类名的元素中。具体的步骤如下：
  25.             1. 使用`Object.keys()`方法获取对象bookObj的所有键，将它们存储在一个数组keys中。
  26.             2. 使用`forEach()`方法遍历keys数组中的每个键。
  27.             3. 对于每个键，使用`document.querySelector()`方法找到页面上具有特定类名的元素（例如`.edit-form .${key}`），并将该元素的值设置为bookObj中对应键的值。
  29.             这段代码的作用是将bookObj对象中的数据填充到页面上指定的表单元素中，以便用户可以编辑这些数据。*/
  31.              //遍历数据对象，使用属性去获取对应的标签，快速赋值
  32.             const keys = Object.keys(bookObj)  //['id','bookname']
  33.               //遍历数组里的每一个属性，找到对应表单元素，快速赋值
  34.             keys.forEach(key => {
  35.                 document.querySelector(`.edit-form .${key}`).value =
  36.                     bookObj[key]
  37.             })
  38.         })
  39.         editModal.show()
  40.     }
  41. })
  42. //修改按钮->点击->隐藏事件
  43. document.querySelector('.edit-btn').addEventListener('click', () => {
  44.      //4.3提交保存修改
  45.     //先获取编辑表单
  46.     const editForm = document.querySelector('.edit-form')
  47.     const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
  49.     axios({
  50.         url: `http://hmajax.itheima.net/api/books/${id}`,
  51.         method: 'put',
  52.         data: {
  53.             bookname,
  54.             author,
  55.             publisher,
  56.             creator
  57.         }
  58.     }).then(() => {
  59.         getData()
  60.         editModal.hide()
  61.     })
  62. }
  63.    )

  复制代码
  ps：
  在 JavaScript 中，对象的属性可以通过点表示法或者中括号表示法来访问。利用点表示法，可以直接通过对象的属性名来访问属性的值，例如 `bookObj.title`。而利用中括号表示法，可以通过变量或者表达式来动态地访问对象的属性，例如 `bookObj['title']` 或者 `bookObj[key]`。
  
  在这段代码中，`bookObj[key]` 利用了中括号表示法，此中 `key` 是一个变量，代表对象 `bookObj` 中的属性名。通过利用中括号表示法，可以动态地访问对象中的属性，这对于必要根据变量来确定属性名的环境非常有效，比如在循环中访问对象的属性。
  
  
  1. .then(() => {
  3.         getData()
  5.         editModal.hide()
  7.     })

  复制代码
  .then()是Promise对象的方法，用于处理异步操作乐成的环境。当axios请求乐成返回数据时，.then()方法会执行此中的回调函数。在这里，.then()中的箭头函数会调用getData()函数来刷新数据，并调用editModal.hide()来隐藏编辑模态框。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4