物流企业网站模板免费下载,网站建设的可研设计报告,上海网站建设专业公司哪家好,黄埔做网站的公黑马程序员视频地址#xff1a;
AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程#xff0c;包含学前端框架必会的#xff08;ajaxnode.jswebpackgit#xff09;#xff0c;一套全覆盖的第25集视频#xff0c…黑马程序员视频地址
AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程包含学前端框架必会的ajaxnode.jswebpackgit一套全覆盖的第25集视频该合集共计140集视频收藏或关注UP主及时了解更多相关视频内容。https://www.bilibili.com/video/BV1MN411y7pw?vd_source0a2d366696f87e241adc64419bf12cabspm_id_from333.788.player.switchp25https://www.bilibili.com/video/BV1MN411y7pw?vd_source0a2d366696f87e241adc64419bf12cabspm_id_from333.788.player.switchp25
步骤一Bootstrap弹框
1. 引入bootstrap.css 和 bootstrap.js !-- 引入bootstrap.css -- link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/css/bootstrap.min.css relstylesheet!-- 引入bootstrap.js --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/js/bootstrap.min.js/script 2. 准备弹框标签确认结构 div classmodal tabindex-1div classmodal-dialogdiv classmodal-contentdiv classmodal-headerh5 classmodal-titleModal title/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodypModal body text goes here./p/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div
/div 3. 通过自定义属性控制弹框的显示和隐藏
1弹框显示
!--第一步触发弹框按钮绑定自定义属性data-bs-togglemodal和data-bs-targetCSS选择器--
button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target.myalert显示弹框/button!-- 第二步给弹框加上myalert类以便区分同一页面不同弹窗 --div classmodal myalert tabindex-1!--省略代码好几行--/div
2弹框隐藏
!--给需要有隐藏效果的按钮加上自定义属性data-bs-dismissmodal--
button typebutton classbtn btn-secondary data-bs-dismissmodalClose/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 classdel删除/span span classedit编辑/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(提交失败)})})
