前端（AJAX）学习笔记（CLASS2）：图书管理案例以及图片上传

* BootStrap弹框

功能：不离开当前页面，显示单独内容，供用户操作

步骤：

1、引入bootstrap.css和bootstrap.js

2、准备弹框标签，确认结构

3、通过自定义属性，控制弹框的显示和隐藏

其中的bootstrap.css链接为：

<link href=" cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

bootstrap链接为：

<script src=" cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

以下是模板代码：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

利用自定义属性控制弹框的显示和隐藏

data-bs-toggle="modal"

data-bs-target="#exampleModal"

示例的按钮：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button>

如果使用js进行控制：

//创建弹框对象 const modal=new bootstrap.Modal('css选择器') //显示弹框 modal.show() //隐藏弹框 modal.hide() 1、渲染列表

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查

其中的图书列表接口为：

http://ajax-api.itheima.net/api/books

首先基本的html与css代码为以下：

<!-- 操作列 --> <div class="head"> <h1 class="title">图书管理</h1> <button class="add_btn">添加</button> </div> <!-- 图书管理列表 --> <table> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>出版社</th> <th>操作</th> </th> </thead> <tbody> <!-- <tr> <th>1</th> <th>《java程序设计》</th> <th>xxx</th> <th>高等教育出版社</th> <th> <span class="del">删除</span> <span class="edi">编辑</span> </th> </tr> --> </tbody> </table>

以下代码为使用BooyStrap的添加图书弹窗

<!-- 添加图书弹窗 --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div>书名</div> <input class="bookname" type="text" placeholder="请输入书籍名称"> <div>作者</div> <input class="author" type="text" placeholder="请输入作者名称"> <div>出版社</div> <input class="publisher" type="text" placeholder="请输入出版社名称"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div>

下面为添加图书的js部分：

const tbody=document.querySelector('tbody') function getBook() { axios({ url:'http://ajax-api.itheima.net/api/books' }).then(res => { console.log(res) tbody.innerHTML=res.data.data.map((item,index) =>` <tr> <th>${index+1}</th> <th>${item.bookname}</th> <th>${item.author}</th> <th>${item.publisher}</th> <th class='${item.id}'> <span class="del">删除</span> <span class="edi">编辑</span> </th> </tr>`) }) } getBook() // 添加图书操作 //创建弹框对象 const modal=new bootstrap.Modal('.modal') const add_btn=document.querySelector('.add_btn') const bookDec=document.querySelectorAll('.modal-body input') //显示弹框 add_btn.addEventListener('click',() => { for(let i=0;i<bookDec.length;i++){ bookDec[i].value=null } modal.show() }) // 添加图书操作 document.querySelector('.btn-primary').addEventListener('click',() =>{ axios({ url:'http://ajax-api.itheima.net/api/books', method:'post', data:{ bookname: bookDec[0].value, author:bookDec[1].value, publisher:bookDec[2].value } }).then(res => { getBook() modal.hide() }) }) 2、删除数据

当点击删除按钮时，该行的数据将会被删除，并在页面中重新渲染

// 删除操作 document.querySelector('tbody').addEventListener('click',e => { if(e.target.className==='del'){ console.log(e.target.parentNode.className); const id=e.target.parentNode.className axios({ url:`http://ajax-api.itheima.net/api/books/${id}`, method:'delete' }).then(res => { getBook() }) } }) 3、修改数据

修改数据部分包括了数据回显以及修改数据

当点击编辑按钮时，会弹出编辑图书弹框

<!-- 编辑图书弹窗 --> <div class="modal fade modal_edi" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body modal_body_edi"> <div>书名</div> <input class="bookname" type="text" placeholder="请输入书籍名称"> <div>作者</div> <input class="author" type="text" placeholder="请输入作者名称"> <div>出版社</div> <input class="publisher" type="text" placeholder="请输入出版社名称"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary edi_btn">修改</button> </div> </div> </div> </div>

再修改数据后，点击修改按钮，将进行修改

// 点击编辑，获取图书信息 const modal_edi=new bootstrap.Modal('.modal_edi') const modal_body_edi=document.querySelectorAll('.modal_body_edi input') document.querySelector('tbody').addEventListener('click',e => { if(e.target.className==='edi'){ modal_edi.show() console.log(e.target.parentNode.parentNode.children[0]); const id=e.target.parentNode.className axios({ url:`http://ajax-api.itheima.net/api/books/${id}` }).then(res => { console.log(res.data.data) modal_body_edi[0].value=res.data.data.bookname modal_body_edi[1].value=res.data.data.author modal_body_edi[2].value=res.data.data.publisher //点击修改按钮，对图书信息进行修改 document.querySelector('.edi_btn').addEventListener('click',() => { axios({ url:`http://ajax-api.itheima.net/api/books/${id}`, method:'put', data:{ bookname:modal_body_edi[0].value, author:modal_body_edi[1].value, publisher:modal_body_edi[2].value } }).then(edi_res =>{ getBook() }) modal_edi.hide() }) }).catch(err => console.log(err)) } }) * 图片上传

1、获取图片文件对象

2、使用FormData携带图片文件

const fd=new FormData() fd.append(参数名,值)

3、提交表单数据到服务器，使用图片url网址