bootstrap弹框
不离开当前页面，显示单独内容，让用户操作
功能：不离开当前页面，显示单独内容，供用户操作步骤：
1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构
3.通过自定义属性，控制弹框的显示和隐藏
<body>
<button type="button" class ="btn btn-primary"
data-bs-toggle="model" data-bs-target=".my-box">
显示弹框
</button>
<div class="modal my-box" 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">.
</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>可能会出现一些问题，可能因为你用的版本4的，里面没用bs-，把属性data-dismiss改为data-bs-dismiss就行了
和JS的适配
- 通过属性控制，弹框显示或隐藏
- 通过JS控制，弹框显示或隐藏
有这样一串代码
//创建弹框对象
const modalDom = document.queryselector('css选择器')
const modal = new bootstrap.Modal(modelDom)
//显示弹框
modal.show()
//雌就弹框
modal.hide()<div class="modal name-box" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">请输入姓名</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="">
<span>姓名：</span>
<input type="text" class="username">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary
save-btn">保存</button>
</div>
</div>
</div>
</div>
<!--导入bootstrap.js -->
<script>
//1.创建弹框对象
const modalDom = document.querySelector('.name-box')
const modal = new bootstrap.Modal(modalDom)
//编辑姓名->点击->赋予默认姓名->弹框显示
document.querySelector('.edit-btn').addEventListener
('click', () => {
document.querySelector('.username').value = '默认姓名'
//2.显示弹框
modal.show()
})
//保存->点击->->获取姓名打印->弹框隐藏
document.querySelector('. save-btn').addEventlistener
('click', () => {
const username = document.querySelector('.username').value
console.log('模拟把姓名保存到服务器上'，username)
//2.隐藏弹框
modal.hide()
})
</script>
图书管理渲染列表
/**
目标1：渲染图书列表
* 1.1获取数据
*
1.2渲染数据
**/
const creator = '老张'
// 封装 - 获取并渲染图书列表函数
function getBooksList() {
//1.1获取数据
axios({
url: 'http: //hmajax.itheima.net/api/books',
params: {
// 外号：获取对应数据
creator
}
}).then(result => {
console.log(result)
const bookList = result.data.data
console.log(bookList)
//1.2渲染数据
const htmlStr = bookList.map((item, index) => {
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('')
console.log(htmlStr)
document. querySelector('.list'). innerHTML = htmlStr
})
// 网页加载运行，获取并渲染列表一次
getBooksList()CUDA常见的
添加数据
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮 -> 点击 -> 隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
//2.2收集表单数据，并提交到服务器保存
const addForm = document.querySelector('.add-form')
const bookObj = serialize(addForm, { hash: true, empty: true })
console.log(bookObj)
//提交到服务器
axios({
url: 'http: //hmajax.itheima.net/api/books',
method: 'POST',
data: {
...book0bj,
creator
}
}).then(result => {
console.log(result)
//2.3添加成功后，重新请求并渲染图书列表
getBooksList()
//重置表单
addForm.reset()
//隐藏弹框
addModal.hide()
})删除数据
/* 目标3：删除图书
* 3.1删除元素绑定点击事件 -> 获取图书id
*
3.2调用删除接口
* 3.3刷新图书列表
*/
//3.1删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {
//获取触发事件目标元素
// console.log(e.target)
//判断点击的是删除元素
if (e.target.classList.contains('del')) {
//console.log('点击删除元素')
// 获取图书id(自定义属性id)
const theId = e.target.parentNode.dataset.id
console.log(theId)
//3.2调用删除接口
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: 'DELETE'
}).then()=> {
//3.3刷新图书列表
getBooksList()
})
}
})编辑图书
/**
* 目标4：编辑图书
* 4.1编辑弹框 -> 显示和隐藏
* 4.2获取当前编辑图书数据 -> 回显到编辑表单中
* 4.3提交保存修改，并刷新列表
*/
//4.1编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
//编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {
//判断点击的是否为编辑元素
if (e.target.classlist.contains('edit')) {
const theId=e.target.parentNode.dataset.id
axios({
url:`http://hmajax.itheima.net/api/books/${theId}`
}).then(result=>{
const bookObj=result.data.data
document.querySelector('.edit-form.bookname').value=
bookObj.bookname
document.querySelector('.edit-form.author').value=
author
//因为默认的是GET方式，所以现在这个可以不写method
//遍历数据对象，使用属性获取对应的标签，快速赋值
const keys =Object.keys(bookObj)//['id','bookname','author','publisher']
keys.foreach(key=>{
document.querySelector(`.edit-form.${key}`.value=
bookObj[key]
// 为什么不能点key因为获取过来的是字符串
})
})
editModal.show()
}
})
//修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', ()
=> {
//4.3提交保存修改，并刷新列表
const editForm = document.querySelector('.edit-form')
const bookObj = serialize(editForm,{hash:true,empty:true})
editModal.hide()
})happycat
