目录

Bootstrap之Modal：

显示和隐藏方法

通过自定义属性：

使用JS来控制弹框：

Bootstrap之Toast：

接口文档一些用法：

删除图书：

图片上传：

图片上传步骤：

修改头像：

---

Bootstrap之Modal：

Modal 模态 (弹框)

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

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

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

显示和隐藏方法

通过自定义属性：

查询Bootstrap官网可知，通过给按钮添加自定义属性即可实现弹框的显示和隐藏；

但是这种显示和隐藏就是单纯的点击就显示或者隐藏，不能有其他功能。要实现点击按钮执行了某些功能再显示或隐藏，需要用到JS来控制显示隐藏。

使用JS来控制弹框：

显示myModal.show()

隐藏myModal.hide()

Bootstrap之Toast：

显示与modal提示框一样，可以通过属性或者JS的方式来显示。

接口文档一些用法：

删除图书：

请求参数来路径上，路径上的是图书的id.

图片上传：

请求参数是form-data，需要借助JS内置构造函数FormData()

图片上传步骤：

1. 准备文件类型的input标签用来上传

2. 给文件绑定改变事件，即一旦有图片上传则会引起改变

在此点击事件中，找到图片专属的file对象这个在服务器中需要使用 ←  e.target.files[0] 

3. 创建图片专属的form-data

const fd = new FormData()
fd.append('img',e.target.files[0])

4. 上传至服务器，获取图片专属url：

axios({
url:'http://hmajax.itheima.net/api/uploadimg',
method:'POST',
data:fd
}).then((result)=>{
//图片的url
result.data.data.url
})

修改头像：

步骤：类似图片上传

文件选择元素 -> change事件 -> 获取头像file -> 创建头像fd(这里与图片不同 见下) ->拿到头像url->返回给头像标签