From f4259530ee4b2557b08abf676968f30ec6fa7ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=8E=E5=87=BD?= <3084917167@qq.com>
Date: Thu, 14 Dec 2023 05:03:17 +0000
Subject: [PATCH] =?UTF-8?q?02=20=E9=99=88=E6=98=8E=E5=87=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 陈明函 <3084917167@qq.com>
---
.../1213\347\254\224\350\256\260.md" | 166 ++++++++++++++++++
1 file changed, 166 insertions(+)
create mode 100644 "02 \351\231\210\346\230\216\345\207\275/1213\347\254\224\350\256\260.md"
diff --git "a/02 \351\231\210\346\230\216\345\207\275/1213\347\254\224\350\256\260.md" "b/02 \351\231\210\346\230\216\345\207\275/1213\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..3e962f9
--- /dev/null
+++ "b/02 \351\231\210\346\230\216\345\207\275/1213\347\254\224\350\256\260.md"
@@ -0,0 +1,166 @@
+````javascript
+* ```js
+ /**
+
+ * 目标1：渲染图书列表
+ * 1.1 获取数据
+ * 1.2 渲染数据
+ */
+ const creator = '阿念ee'
+ // 封装 获取并渲染图书列表函数
+ function booksList() {
+ // 获取数据
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ params: {
+ // 获取外号的对应数据
+ creator
+ }
+ }).then(result => {
+ // console.log(result)
+ const bookList = result.data.data
+ // console.log(bookList);
+ // 渲染数据
+ $('.list').html($.map(list, (ele, i) => {
+ const { author, bookname, id, publisher } = ele
+ return `
+ | ${i + 1} |
+ ${bookname} |
+ ${author} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+
`
+ }).join('')
+ )
+ })
+ }
+ // 渲染列表，加载网页数据
+ booksList()
+
+ /**
+
+ * 目标2：新增图书
+
+ * 2.1 新增弹框->显示和隐藏
+
+ * 2.2 收集表单数据，并提交到服务器保存
+
+ * 2.3 刷新图书列表
+ */
+ // 2.1 创建弹框对象
+ const addModalDom = document.querySelector('.add-modal')
+ const addModal = new bootstrap.Modal(addModalDom)
+ // 保存按钮->点击->隐藏弹窗
+ $('.add-btn').click(() => {
+ // 2.2 收集表单数据，并提交到服务器保存
+ const addForm = $('.add_form')
+ const bookObj = serialize(addForm, { hash: true, empty: true })
+ // console.log(bookObj);
+ // 提交到服务器
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ method: 'POST',
+ data: {
+ ...bookObj,
+ creator
+ }
+ }).then(result => {
+ // console.log(result);
+ addForm.reset()
+ addModal.hide()
+ booksList()
+ })
+ })
+ /**
+
+ * 目标3：删除图书
+
+ * 3.1 删除元素绑定点击事件->获取图书id
+
+ * 3.2 调用删除接口
+
+ * 3.3 刷新图书列表
+ */
+ // 3.1 删除元素->点击（事件委托）
+ $('.list').click(e => {
+ // 获取触发事件目标元素
+ // 判断点击的是删除元素
+ if(e.target.classList.contains('del')){
+ const theId = e.target.parentNode.dataset.id
+ // 3.2 调用删除接口
+ axios({
+ url: `http://hmajax.itheima.net/api/books/${theId}`,
+ method: 'DELETE'
+ }).then(() => {
+ booksList()
+ })
+ }
+ })
+ /**
+
+ * 目标4：编辑图书
+
+ * 4.1 编辑弹框->显示和隐藏
+
+ * 4.2 获取当前编辑图书数据->回显到编辑表单中
+
+ * 4.3 提交保存修改，并刷新列表
+ */
+ // 4.1 编辑弹框->显示和隐藏
+ const editDom = document.querySelector('.edit-modal')
+ const editModal = new bootstrap.Modal(editDom)
+ // 编辑元素->点击->弹框显示
+ $('.list').click(e => {
+ // 判断点击的是否为编辑元素
+ if (e.target.classList.contains('edit')) {
+ // 4.2 获取当前编辑图书数据->回显到编辑表单中
+ const theId = e.target.parentNode.dataset.id
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${theId}`
+ }).then(result => {
+ const bookObj = result.data.data
+ // 数据对象“属性”和标签“类名”一致
+ // 遍历数据对象，使用属性去获取对应的标签，快速赋值
+ const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
+ keys.forEach(key => {
+ document.querySelector(`.edit-form .${key}`).value = bookObj[key]
+ })
+ })
+ editModal.show()
+ }
+ })
+ // 修改按钮->点击->隐藏弹框
+ document.querySelector('.edit-btn').addEventListener('click', () => {
+ // 4.3 提交保存修改，并刷新列表
+ const editForm = document.querySelector('.edit-form')
+ $('.edit-form [name="id"]')[0].value = id
+ $('.edit-form [name="bookname"]')[0].value = bookname
+ $('.edit-form [name="author"]')[0].value = author
+ $('.edit-form [name="publisher"]')[0].value = publisher
+ // 保存正在编辑的图书id，隐藏起来：无需让用户修改
+ //
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${id}`,
+ method: 'PUT',
+ data: {
+ bookname,
+ author,
+ publisher,
+ creator
+ }
+ }).then(() => {
+ // 修改成功以后，重新获取并刷新列表
+ getBooksList()
+
+ // 隐藏弹框
+ editModal.hide()
+ })
+ })
+ ```
+
+
+````
+
--
Gitee