[JS]Bootstrap图书管理

王震是也

已于 2024-07-14 13:31:08 修改

阅读量338

点赞数 4

分类专栏： JavaScript 文章标签： bootstrap 前端 html

于 2024-05-27 13:38:38 首次发布

本文链接：https://blog.csdn.net/CSDN20221005/article/details/139235916

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本节目标

完成图书管理案例

form-serialize
Bootstrap
图书管理

form-serialize

form-serialize插件，帮助我们快速收集表单元素值

<body>
  <script src="./lib/form-serialize.js"></script>

  <form action="javascript:;" class="example-form">
    <input type="text" name="uname">
    <br>
    <input type="text" name="pwd">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
  -->
  <script>
    // 
    // 使用步骤
    // 1引入JS
    // 2使用serialize()函数
    //  > 参数1: 表单对象
    //  > 表单的name属性作为对象的属性名
    //  > 建议把name属性与接口文档参数名保持一致
    // 
    //  > 参数2: 配置对象
    //  > hash: 设置获取到的数据格式 (true->JS对象格式, false->查询字符串格式)
    //  > empty: 设置是否过滤空值 (true->获取空值, false->不获取空值)
    //           建议获取空值,这样数据结构与标签结构保持一致

    document.querySelector('.btn').addEventListener('click', () => {
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data);1
    })
  </script>
</body>

Bootstrap

Bootstrap是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

官网: Modal · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

弹框组件

使用步骤

引入bootstrap.css 和 bootstrap.js
准备弹框标签，确认结构
通过自定义属性，控制弹框的显示和隐藏(很方便)
通过JS，控制弹框的显示和隐藏(更灵活)

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

<body>
  <!-- 
    使用说明:
    data-bs-toggle="modal"   => 通过官方的自定义属性,实现切换
    data-bs-target="#exampleModal" =>  传入css选择器, 指定切换的弹窗元素
   -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".modal">
    显示弹框
  </button>


  <!-- 
    弹窗标签
    通过modal类名控制弹框的显示和隐藏
   -->
  <div class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 标题 -->
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 内容 -->
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </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>

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

<body>
  <!-- 
     使用说明:
    1. 先创建弹框对象
    2. 在调用弹框对象内置方法
      .show() 显示
      .hide() 隐藏
   -->
  <button type="button" class="btn btn-primary edit-btn">
    编辑姓名
  </button>

  <div class="modal name-box" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">请输入姓名</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="">
            <span>姓名：</span>
            <input type="text" class="username">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>

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

  <script>
    // 创建弹框对象
    const modalDom = document.querySelector('.name-box')
    const modal = new bootstrap.Modal(modalDom)
    const input = document.querySelector('.username')

    document.querySelector('.edit-btn').addEventListener('click', function () {
      input.value = '回显的数据'
      // 显示弹框
      modal.show()
    })

    document.querySelector('.save-btn').addEventListener('click', function () {
      console.log('拿到数据', input.value);
      // 隐藏弹框
      modal.hide()
    })
  </script>
</body>

轻提示组件

<body>
  <!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-delay="1500">
    <div class="toast-body">
      <div class="alert alert-success info-box">
        操作成功
      </div>
    </div>
  </div>

<secript>
    const totalEml = document.querySelector('.my-toast')
    const total = new bootstrap.Toast(totalEml)
    // 显示提示框
    total.show()
</secript>
</body>

图书管理

本课程的接口文档欢迎使用 - B站-AJAX和黑马头条-数据管理平台

1渲染列表

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */

const creator = 'wangzhen'
// 渲染函数
const render = () => {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator,
    }
  }).then(({ data }) => {
    const res = data.data
    const htmlStr = res.map((item, index) => {
      return `<tr>
                 <td>${index + 1}</td>
                 <td>${item.bookname}</td>
                 <td>${item.author}</td>
                 <td>${item.publisher}</td>
                 <td>
                   <span class="del">删除</span>
                   <span class="edit">编辑</span>
                 </td>
              </tr>`
    }).join('')
    // 渲染内容
    document.querySelector('.list').innerHTML = htmlStr
  })

}
render()

2新增图书

/**
 * 目标2：新增图书
 *  2.1 新增弹框 ->显示隐藏->自定义属性控制
 *  2.2 收集表单数据
 *  2.3 刷新列表, 清空输入框
 */

const addModalDom = document.querySelector('.add-modal')
const modal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener('click', function () {
  // 获取表单数据
  const addForm = document.querySelector('.add-form')
  const formData = serialize(addForm, { hash: true, empty: true })
  console.log(formData);
  // 发请求
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'post',
    data: {
      ...formData,
      creator
    }
  }).then(() => {
    // 清空数据
    addForm.reset()
    // 刷新列表
    render()
    // 关闭弹框
    modal.hide()
  })
})

3删除图书

/**
 * 目标3: 删除图书
 *  3.1 删除按钮绑定事件
 *  3.2 调用接口删除
 *  3.3 刷新图书列表
 * 
 * 知识点:
 *  -> 事件委托注册事件
 *  -> 自定义属性拿到删除项id
 */
// 动态列表, 使用事件委托的形式注册事件
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('del')) {
    // id在父节点身上
    const id = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`,
      method: 'delete',
    }).then(() => {
      render()
    })
  }
})

4编辑图书

/**
 * 目标4: 编辑图书
 * 4.1 编辑弹窗的显示和隐藏
 * 4.2 获取详情数据回显
 * 4.3 发请求保存修改, 刷新列表
 */
const editModalDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDom)
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('edit')) {
    editModal.show()
    const id = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${id}`
    }).then(({ data }) => {
      const res = data.data
      // 数据对象"属性"和标签"类名"一致
      // 遍历数据对象, 使用属性名作为类名,获取标签, 快速赋值
      const keys = Object.keys(res)
      keys.forEach((k) => {
        document.querySelector(`.edit-form .${k}`).value = res[k]
      })

    })
  }
})

document.querySelector('.edit-btn').addEventListener('click', function () {
  // 保存修改
  const editForm = document.querySelector('.edit-form')
  const { id, author, bookname, publisher } = serialize(editForm, { hash: true, empty: true })
  // 报错正在编辑的图书id, 隐藏起来的, 无需用户感知, 
  // 回显的时候自动创建出来的, 因为keys数组中有id属性
  // <input type="hidden" class="id" name="id" value="402042">
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'put',
    data: {
      author,
      bookname,
      publisher,
      creator
    }
  }).then(() => {
    render()
    editModal.hide()
  })

})