From ef8ca0c642cabc3506a486b2c050577a1a8ad217 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E4=BA=9A=E8=BE=89?= <3192667214@qq.com>
Date: Wed, 13 Dec 2023 04:52:28 +0000
Subject: [PATCH] =?UTF-8?q?41=20=E5=91=A8=E4=BA=9A=E8=BE=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 周亚辉 <3192667214@qq.com>
---
...46\351\246\206\347\263\273\347\273\237.md" | 160 ++++++++++++++++++
1 file changed, 160 insertions(+)
create mode 100644 "41 \345\221\250\344\272\232\350\276\211/20231212 js \346\226\260\345\233\276\344\271\246\351\246\206\347\263\273\347\273\237.md"
diff --git "a/41 \345\221\250\344\272\232\350\276\211/20231212 js \346\226\260\345\233\276\344\271\246\351\246\206\347\263\273\347\273\237.md" "b/41 \345\221\250\344\272\232\350\276\211/20231212 js \346\226\260\345\233\276\344\271\246\351\246\206\347\263\273\347\273\237.md"
new file mode 100644
index 0000000..398efdf
--- /dev/null
+++ "b/41 \345\221\250\344\272\232\350\276\211/20231212 js \346\226\260\345\233\276\344\271\246\351\246\206\347\263\273\347\273\237.md"
@@ -0,0 +1,160 @@
+# 笔记
+
+```
+jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
+
+- 美元符号定义 jQuery
+- 选择符（selector）"查询"和"查找" HTML 元素
+- jQuery 的 action() 执行对元素的操作
+```
+
+# 作业
+
+```
+/**
+ * 目标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()
+ })
+})
+```
\ No newline at end of file
--
Gitee