From c0e405da529fa479f00daae1c5659e4fef1f7cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E5=AE=8F=E8=BE=BE?=
<12071445+ma-hongda@user.noreply.gitee.com>
Date: Mon, 11 Dec 2023 23:58:19 +0000
Subject: [PATCH 1/3] 1209
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 马宏达 <12071445+ma-hongda@user.noreply.gitee.com>
---
1208.md | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 142 insertions(+)
create mode 100644 1208.md
diff --git a/1208.md b/1208.md
new file mode 100644
index 0000000..af0c7c1
--- /dev/null
+++ b/1208.md
@@ -0,0 +1,142 @@
+### 作业
+
+```js
+/**
+ * 目标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
--
Gitee
From 4a3d035e27419eec18d118543a99d9b87b2b5737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E5=AE=8F=E8=BE=BE?=
<12071445+ma-hongda@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 03:43:15 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=201208?=
=?UTF-8?q?.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
1208.md | 142 --------------------------------------------------------
1 file changed, 142 deletions(-)
delete mode 100644 1208.md
diff --git a/1208.md b/1208.md
deleted file mode 100644
index af0c7c1..0000000
--- a/1208.md
+++ /dev/null
@@ -1,142 +0,0 @@
-### 作业
-
-```js
-/**
- * 目标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
--
Gitee
From 65b99e279582726a05ad58123f69ec31d16608bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E5=AE=8F=E8=BE=BE?=
<12071445+ma-hongda@user.noreply.gitee.com>
Date: Wed, 13 Dec 2023 04:02:00 +0000
Subject: [PATCH 3/3] =?UTF-8?q?1212=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 马宏达 <12071445+ma-hongda@user.noreply.gitee.com>
---
.../1212.md" | 37 +++++++++++++++++++
1 file changed, 37 insertions(+)
create mode 100644 "48 \351\251\254\345\256\217\350\276\276/1212.md"
diff --git "a/48 \351\251\254\345\256\217\350\276\276/1212.md" "b/48 \351\251\254\345\256\217\350\276\276/1212.md"
new file mode 100644
index 0000000..ba8d443
--- /dev/null
+++ "b/48 \351\251\254\345\256\217\350\276\276/1212.md"
@@ -0,0 +1,37 @@
+# 笔记
+
+1 创建一个异步对象 2 设置请求方式和请求地址 3 发送请求 4 监听状态变化 5 处理返回的结果
+
+# 作业
+
+```js
+
+// 1. 定义myAxios函数，接收配置对象，返回Promise对象
+function myAxios(config) {
+ return new Promise((resolve, reject) => {
+ // 2. 发起XHR请求，默认请求方法为GET
+ const xhr = new XMLHttpRequest()
+ xhr.open(config.method || 'GET', config.url)
+ xhr.addEventListener('loadend', () => {
+ // 3. 调用成功/失败的处理程序
+ if (xhr.status >= 200 && xhr.status < 300) {
+ resolve(JSON.parse(xhr.response))
+ } else {
+ reject(new Error(xhr.response))
+ }
+ })
+ xhr.send()
+ })
+}
+
+// 4. 使用myAxios函数，获取省份列表展示
+myAxios({
+ url: 'http://hmajax.itheima.net/api/province'
+}).then(result => {
+ console.log(result)
+ document.querySelector('.my-p').innerHTML = result.list.join('
')
+}).catch(error => {
+ console.log(error)
+ document.querySelector('.my-p').innerHTML = error.message
+})
+```
--
Gitee