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

* BootStrap弹框

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

步骤：

1、引入bootstrap.css和bootstrap.js

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

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

其中的bootstrap.css链接为：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

bootstrap链接为：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

以下是模板代码：

javascript 复制代码

      <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"

示例的按钮：

javascript 复制代码

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

如果使用js进行控制：

javascript 复制代码

        //创建弹框对象
        const modal=new bootstrap.Modal('css选择器')

        //显示弹框
        modal.show()

        //隐藏弹框
        modal.hide()

1、渲染列表

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

其中的图书列表接口为：

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

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

html 复制代码

    <!-- 操作列 -->
    <div class="head">
        <h1 class="title">图书管理</h1>
        <button class="add_btn">添加</button>
    </div>

html 复制代码

    <!-- 图书管理列表 -->
     <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的添加图书弹窗

html 复制代码

    <!-- 添加图书弹窗 -->
    <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部分：

javascript 复制代码

        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、删除数据

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

javascript 复制代码

        // 删除操作
        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、修改数据

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

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

html 复制代码

      <!-- 编辑图书弹窗 -->
      <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>

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

javascript 复制代码

       // 点击编辑，获取图书信息
        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携带图片文件

javascript 复制代码

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

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