为网站设计手机版,ui设计界面效果图,企业免费网站建设,wordpress 创建文集* BootStrap弹框
功能#xff1a;不离开当前页面#xff0c;显示单独内容#xff0c;供用户操作
步骤#xff1a;
1、引入bootstrap.css和bootstrap.js
2、准备弹框标签#xff0c;确认结构
3、通过自定义属性#xff0c;控制弹框的显示和隐藏
其中的bootstrap.css…* BootStrap弹框
功能不离开当前页面显示单独内容供用户操作
步骤
1、引入bootstrap.css和bootstrap.js
2、准备弹框标签确认结构
3、通过自定义属性控制弹框的显示和隐藏
其中的bootstrap.css链接为 link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css relstylesheet integritysha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hWALEwIH crossoriginanonymous bootstrap链接为 script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/js/bootstrap.bundle.min.js integritysha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossoriginanonymous/script 以下是模板代码 div classmodal fade idexampleModal tabindex-1 aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerh1 classmodal-title fs-5 idexampleModalLabelModal title/h1button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div
利用自定义属性控制弹框的显示和隐藏
data-bs-togglemodal
data-bs-target#exampleModal
示例的按钮
button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#exampleModalLaunch demo modal
/button
如果使用js进行控制 //创建弹框对象const modalnew bootstrap.Modal(css选择器)//显示弹框modal.show()//隐藏弹框modal.hide()
1、渲染列表
自己的图书数据给自己起个外号并告诉服务器默认会有三本书基于这三本书做数据的增删改查
其中的图书列表接口为 http://ajax-api.itheima.net/api/books 首先基本的html与css代码为以下 !-- 操作列 --div classheadh1 classtitle图书管理/h1button classadd_btn添加/button/div !-- 图书管理列表 --tabletheadtrth序号/thth书名/thth作者/thth出版社/thth操作/th/th/theadtbody!-- trth1/thth《java程序设计》/ththxxx/thth高等教育出版社/ththspan classdel删除/spanspan classedi编辑/span/th/tr --/tbody/table
以下代码为使用BooyStrap的添加图书弹窗 !-- 添加图书弹窗 --div classmodal fade idexampleModal tabindex-1 aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerh1 classmodal-title fs-5 idexampleModalLabel图书管理/h1button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodydiv书名/divinput classbookname typetext placeholder请输入书籍名称div作者/divinput classauthor typetext placeholder请输入作者名称div出版社/divinput classpublisher typetext placeholder请输入出版社名称/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/buttonbutton typebutton classbtn btn-primary确定/button/div/div/div/div
下面为添加图书的js部分 const tbodydocument.querySelector(tbody)function getBook() {axios({url:http://ajax-api.itheima.net/api/books}).then(res {console.log(res)tbody.innerHTMLres.data.data.map((item,index) trth${index1}/thth${item.bookname}/thth${item.author}/thth${item.publisher}/thth class${item.id}span classdel删除/spanspan classedi编辑/span/th/tr)})}getBook()// 添加图书操作//创建弹框对象const modalnew bootstrap.Modal(.modal)const add_btndocument.querySelector(.add_btn) const bookDecdocument.querySelectorAll(.modal-body input)//显示弹框 add_btn.addEventListener(click,() {for(let i0;ibookDec.length;i){bookDec[i].valuenull}modal.show() })// 添加图书操作document.querySelector(.btn-primary).addEventListener(click,() {axios({url:http://ajax-api.itheima.net/api/books,method:post,data:{bookname: bookDec[0].value,author:bookDec[1].value,publisher:bookDec[2].value}}).then(res {getBook()modal.hide()})})
2、删除数据
当点击删除按钮时该行的数据将会被删除并在页面中重新渲染 // 删除操作document.querySelector(tbody).addEventListener(click,e {if(e.target.classNamedel){console.log(e.target.parentNode.className);const ide.target.parentNode.classNameaxios({url:http://ajax-api.itheima.net/api/books/${id},method:delete}).then(res {getBook()})}})
3、修改数据
修改数据部分包括了数据回显以及修改数据
当点击编辑按钮时会弹出编辑图书弹框 !-- 编辑图书弹窗 --div classmodal fade modal_edi idexampleModal tabindex-1 aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerh1 classmodal-title fs-5 idexampleModalLabel图书管理/h1button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-body modal_body_edidiv书名/divinput classbookname typetext placeholder请输入书籍名称div作者/divinput classauthor typetext placeholder请输入作者名称div出版社/divinput classpublisher typetext placeholder请输入出版社名称/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/buttonbutton typebutton classbtn btn-primary edi_btn修改/button/div/div/div/div
再修改数据后点击修改按钮将进行修改 // 点击编辑获取图书信息const modal_edinew bootstrap.Modal(.modal_edi)const modal_body_edidocument.querySelectorAll(.modal_body_edi input)document.querySelector(tbody).addEventListener(click,e {if(e.target.classNameedi){modal_edi.show()console.log(e.target.parentNode.parentNode.children[0]);const ide.target.parentNode.classNameaxios({url:http://ajax-api.itheima.net/api/books/${id}}).then(res {console.log(res.data.data)modal_body_edi[0].valueres.data.data.booknamemodal_body_edi[1].valueres.data.data.authormodal_body_edi[2].valueres.data.data.publisher//点击修改按钮对图书信息进行修改document.querySelector(.edi_btn).addEventListener(click,() {axios({url:http://ajax-api.itheima.net/api/books/${id},method:put,data:{bookname:modal_body_edi[0].value,author:modal_body_edi[1].value,publisher:modal_body_edi[2].value}}).then(edi_res {getBook()})modal_edi.hide()})}).catch(err console.log(err))}})
* 图片上传
1、获取图片文件对象
2、使用FormData携带图片文件
const fdnew FormData()
fd.append(参数名,值)
3、提交表单数据到服务器使用图片url网址
