diff --git "a/26\351\231\210\344\275\263\347\202\234/day1209\344\275\234\344\270\232\347\254\224\350\256\260.md" "b/26\351\231\210\344\275\263\347\202\234/day1209\344\275\234\344\270\232\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..6c8914218af3968ccbfe8f50b2b41c70557996d4 --- /dev/null +++ "b/26\351\231\210\344\275\263\347\202\234/day1209\344\275\234\344\270\232\347\254\224\350\256\260.md" @@ -0,0 +1,143 @@ +作业 + +``` +/** + * 目标1:渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ +const tbody = document.querySelector('.list'); +// 通用的外号 +const creator = '大帅哥'; +// 封装一个先获取数据,再渲染数据的函数 +function render() { + axios({ + url: 'https://hmajax.itheima.net/api/books', + params: { + creator: creator + } + }).then(result => { + // console.log(result); + const bookList = result.data.data; + const trHtml = bookList.map((item, i) => { + const { id, author, bookname, publisher } = item + return ` + + ${i + 1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + + ` + }).join('') + // console.log(trHtml); + tbody.innerHTML = trHtml; + }) +} +// 打开网页就得先调用一次函数 +render(); +// 实现添加事件 +const form = document.querySelector('.add-form'); +// 为了控制添加的弹窗,先获取 +const addModalBox = document.querySelector('.add-modal'); +const addModal = new bootstrap.Modal(addModalBox); +// 给保存添加点击事件 +const add = document.querySelector('.add-btn') +add.addEventListener('click', () => { + // 采集数据 + const book = serialize(form, { hash: true, empty: true }) + console.log(book); + // 将数据用axios调用接口,提交给服务器 + axios({ + url: 'https://hmajax.itheima.net/api/books', + method: 'post', + data: { + creator, + ...book + } + }).then(result => { + // console.log(result); + // 清空表单 + form.reset(); + // 关闭弹窗 + addModal.hide(); + // 重新获取列表并渲染 + render(); + }) + +}) + +// 删除事件 +tbody.addEventListener('click', (e) => { + // console.log(e.target); + if (e.target.classList.contains('del')) { + console.log('删除'); + // 获取删除id + // console.log(e.target.parentNode.dataset.id); + const id = e.target.parentNode.dataset.id + axios({ + url: `https://hmajax.itheima.net/api/books/${id}`, + method: 'delete', + + }).then(result => { + console.log(result) + // 重新渲染 + render() + }) + } +}) + +// 编辑图书功能 +tbody.addEventListener('click', (e) => { + if (e.target.className === 'edit') { + // console.log('修改'); + // 创建一个弹窗的对象 + const form = document.querySelector('.edit-form') + // 获取弹窗 + const edit = document.querySelector('.edit-modal') + const editModal = new bootstrap.Modal(edit) + editModal.show() + // 获取id + const id = e.target.parentNode.dataset.id; + // 通过id调用接口 查询对应的图书数据 + axios({ + url: 'https://hmajax.itheima.net/api/books/' + id + }).then(result => { + // console.log(result.data.data); + const book = result.data.data; + const { id, author, bookname, publisher } = book; + // 将图书馆数据显示到表单 + form.querySelector('.id').value = id; + form.querySelector('.bookname').value = bookname; + form.querySelector('.author').value = author; + form.querySelector('.publisher').value = publisher; + }) + + // 修改按钮 + const editbtn = document.querySelector('.edit-btn'); + editbtn.addEventListener('click', () => { + // 采集数据 + const book = serialize(form, { hash: true, empty: true }) + console.log(book); + // 提交接口 + axios({ + url: 'https://hmajax.itheima.net/api/books/' + id, + method: 'put', + data:{ + creator, + ...book + } + }).then(result => { + editModal.hide() + render() + // console.log(result); + }) + }) + } +}) +``` +\ No newline at end of file \ No newline at end of file