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