前端框架前置学习(2) ajax 图书管理事件(增删改查)

1.1 Bootstrap弹框

内容引入:Bootstrap弹窗

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

步骤:

1.引入bootstrap.css和bootstrap.js

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>  

2.准备弹框标签,确认结构

在button按钮的data-bs-toggle中设置model属性来绑定弹窗,在data-bs0target中绑定class选择器

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

  点击显示动态弹窗

</button>

<!-- Modal -->

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

3.1 通过自定义属性,控制弹框显示和隐藏

在弹窗按钮上绑定data-bs-dismiss="modal"属性可以控制弹窗关闭和显示

3.2 通过js方法来控制弹窗显示和隐藏

创建弹窗对象

const modelDom = document.querySelector(css选择器)

const model = new bootstrap.Model(modelDom)

显示弹窗

model.show()

隐藏弹窗

model.hide()

案例:图书管理

步骤:

1.渲染列表(查)

2.新增图书(增)

3.删除图书(删)

4.编辑图书(改)

渲染数据:核心步骤

获取数据--->  渲染数据

新增数据(核心步骤)

新增图书-表单---->收集数据&提交保存----->刷新-图书列表

删除数据(核心步骤)

绑定点击事件(获取图书id)---->调用删除接口------->刷新图书列表

编辑数据(核心步骤)

编辑图书-表单------>表单(数据回显)