diff --git "a/58\351\231\210\350\203\234\346\235\260/2023-12-12.md" "b/58\351\231\210\350\203\234\346\235\260/2023-12-12.md" new file mode 100644 index 0000000000000000000000000000000000000000..828302e07ebadd79b7ada8ba0639cfe8237d50d2 --- /dev/null +++ "b/58\351\231\210\350\203\234\346\235\260/2023-12-12.md" @@ -0,0 +1,160 @@ +1.axios + +```js +axios({ + url: 'https://hmajax.itheima.net/api/city', + params: { + pname: '福建省' + } +}).then(result => { + console.log(result) +}).catch(error => { + console.log(error) +}) + +function axios(config) { + return new Promise((ok, error) => { + const xhr = new XMLHttpRequest(); + + let params = config.params ? new URLSearchParams(config.params).toString() : ''; + const method = config.method || 'get'; + const url = config.url +=`?${params}`; + xhr.open(method, url); + + if (config.data) { + xhr.setRequestHeader('Content-Type', 'application/json'); + const data = JSON.stringify(config.data); + xhr.send(data); + } else { + xhr.send(); + } + + xhr.addEventListener('loadend', function () { + if (xhr.status >= 200 && xhr.status < 300) { + ok(JSON.parse(xhr.response)) + } else { + error(new Error(xhr.response)) + } + }) + }) +} +``` + +2.图书管理系统 + +```js +const creator = 'cheng'; +const tbody = $('tbody')[0]; + +function render() { + axios({ + url: 'https://hmajax.itheima.net/api/books', + params: { + creator, + } + }).then(result => { + const data = result.data.data; + tbody.innerHTML = + data.map((item, index) => { + const {id, bookname, author, publisher} = item; + return ` + ${index + 1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + ` + }).join('') + + }).catch(error => { + console.log(error) + }) +} + +render(); +const addModal = $('.add-modal')[0]; +const newAddModal = new bootstrap.Modal(addModal) +//添加里的保存单机事件 +$('.add-btn').click(() => { + + const form = $('.add-form')[0]; + const book = serialize(form, {hash: true, empty: true}); + + axios({ + url: 'https://hmajax.itheima.net/api/books', + method: 'post', + data: { + creator, + ...book + } + }).then(() => { + form.reset(); + newAddModal.hide(); + render(); + }).catch(error => { + console.log(error) + }) +}) +//删除单机事件 + +tbody.addEventListener('click', e => { + const {className} = e.target; + const del = className === 'del'; + const edit = className === 'edit' + if (del || edit) { + const id = e.target.parentNode.dataset.id; + + if (del) { + if (!confirm('是否要删除')) { + return; + } + axios({ + url: 'https://hmajax.itheima.net/api/books/' + id, + method: 'delete', + }).then(() => { + render(); + }).catch(error => { + console.log(error) + }) + } + //编辑事件 + if (edit) { + const editModal = $('.edit-modal')[0]; + const newModal = new bootstrap.Modal(editModal); + newModal.show(); + const form = $('.edit-form')[0]; + axios({ + url: 'https://hmajax.itheima.net/api/books/' + id, + }).then(result => { + const {bookname,author,publisher}=result.data.data + $('.bookname')[1].value=bookname; + $('.author')[1].value=author; + $('.publisher')[1].value=publisher; + }).catch(error=>{ + console.log(error) + }) + $('.edit-btn')[0].addEventListener('click',()=>{ + + const book=serialize(form,{hash: true,empty: true}); + axios({ + url:"https://hmajax.itheima.net/api/books/"+id, + method:'put', + data: { + creator, + ...book, + } + }).then(()=>{ + newModal.hide(); + render(); + }).catch(error=>{ + console.log(error); + }) + + }) + } + } +}) +``` \ No newline at end of file