当前位置：首页 > news >正文

AJAX综合案例——图书管理

news 文章来源：https://blog.csdn.net/qq_58870434/article/details/145399601 2025/4/21 21:16:18

黑马程序员视频地址：

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

 <!-- 引入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. 准备弹框标签，确认结构

<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）弹框显示

<!--第一步：触发弹框，按钮绑定自定义属性：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）弹框隐藏

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

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

1）弹窗显示

//第一步：给弹窗模块实例化，从而获取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对象

console.dir(bootstrap)

2）弹窗隐藏

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

步骤二：渲染列表（查）

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()    //调用函数

步骤三：新增图书（增）

//创建弹窗对象
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("数据提交失败，请重试")})})

步骤四：删除图书（删）

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

步骤五：编辑图书（改）

//创建编辑弹窗实例对象
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.idaxios({url: `https://hmajax.itheima.net/api/books/${theId}`}).then(result => {//显示数据const editData = result.data.dataconst 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("提交失败！")})})