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

1.1 Bootstrap弹框

内容引入:Bootstrap弹窗

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

步骤:

1.引入bootstrap.css和bootstrap.js

 

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

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

  点击显示动态弹窗

 

   

     

       

弹窗标题

       

     

     

        弹窗内容

     

     

        关闭

        保存

     

   

 

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)---->调用删除接口------->刷新图书列表

编辑数据(核心步骤)

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