07-案例-图书管理

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

一、案例介绍

1、需要完成的功能

2、步骤

①学习Bootstrap弹框的使用

②渲染列表（查）

③新增图书（增）

④删除图书（删）

⑤编辑图书（改）

二、Bootstrap弹框的使用

1、Bootstrap弹框的入门1：通过属性控制弹框的显示/隐藏

①引入bootstrap.css和bootstrap.js

②准备弹框标签

③通过给自定义按钮添加属性，控制弹框的显示和隐藏

效果展示：

2、Bootstrap弹框的入门2：通过JS控制弹框的显示/隐藏

①引入bootstrap.css和bootstrap.js

②准备弹框标签

③创建弹框对象

④通过弹框对象的.show()和.hide()方法，来控制弹框的显示/隐藏

举例：

三、图书管理-渲染列表

1、渲染图书列表

①通过axios直接查询图书列表

②将查询到的图书列表，渲染到页面上

接口文档

代码

2、新增图书

①解决弹框的显示/隐藏

②使用serialize插件，收集表单数据，然后提交到后端接口

③刷新图书列表

接口文档

代码

3、删除图书

4、编辑图书

结语

一、案例介绍

1、需要完成的功能

完成图书管理系统的增、删、改、查四个功能。

2、步骤

①学习Bootstrap弹框的使用

②渲染列表（查）

③新增图书（增）

④删除图书（删）

⑤编辑图书（改）

二、Bootstrap弹框的使用

1、Bootstrap弹框的入门1：通过属性控制弹框的显示/隐藏

①引入bootstrap.css和bootstrap.js

<!-- 引入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官网粘贴的：

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

③通过给自定义按钮添加属性，控制弹框的显示和隐藏

第一步：给上一步复制的弹框，添加一个class选择器

第二步：给自定义按钮添加一些属性

第三步：给上一步复制的弹框的×按钮、取消按钮，添加属性

效果展示：

2、Bootstrap弹框的入门2：通过JS控制弹框的显示/隐藏

①引入bootstrap.css和bootstrap.js

②准备弹框标签

③创建弹框对象

④通过弹框对象的.show()和.hide()方法，来控制弹框的显示/隐藏

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入bootstrap.css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <button type="button" class="myButton">
        编辑姓名
    </button>

    <div class="modal myBox" 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">
                    姓名：<input class="username">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary mySave">保存</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>
        //1、创建弹框对象
        const modalDom = document.querySelector('.myBox')
        const modal = new bootstrap.Modal(modalDom)

        //点击“编辑姓名”-》显示弹框
        document.querySelector('.myButton').addEventListener
        ('click', ()=>{
            //给姓名输入框一个默认值
            document.querySelector(".username").value = "默认姓名"
            //2、显示弹框
            modal.show()
        })

        //点击“保存”=》隐藏弹框
        document.querySelector('.mySave').addEventListener
        ('click', ()=>{
            const username = document.querySelector(".username").value
            console.log('模拟把姓名保存到服务器上', username)
            //2、隐藏弹框
            modal.hide()
        })
    </script>
</body>
</html>

三、图书管理-渲染列表

1、渲染图书列表

①通过axios直接查询图书列表

②将查询到的图书列表，渲染到页面上

接口文档

代码

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = 'casually'
// 封装-获取并渲染图书列表函数
function getBooksList() {
  // 1.1 获取数据
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      // 外号：获取对应数据
      creator
    }
  }).then(result => {
    // console.log(result)
    const bookList = result.data.data
    // console.log(bookList)
    // 1.2 渲染数据
    const htmlStr = bookList.map((item, index) => {
      return `<tr>
      <td>${index + 1}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td data-id=${item.id}>
        <span class="del">删除</span>
        <span class="edit">编辑</span>
      </td>
    </tr>`
    }).join('')
    // console.log(htmlStr)
    document.querySelector('.list').innerHTML = htmlStr
  })
}
// 网页加载运行，获取并渲染列表一次
getBooksList()

运行效果：

2、新增图书

①解决弹框的显示/隐藏

②使用serialize插件，收集表单数据，然后提交到后端接口

③刷新图书列表

接口文档

代码

/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
  // 2.2 收集表单数据，并提交到服务器保存
  const addForm = document.querySelector('.add-form')
  const bookObj = serialize(addForm, { hash: true, empty: true })
  // console.log(bookObj)
  // 提交到服务器
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      ...bookObj,//展开
      creator //这个是我们自己定义的变量，代表我们自己的绰号，只操作我们自己的图书
    }
  }).then(result => {
    // console.log(result)
    // 2.3 添加成功后，重新请求并渲染图书列表
    getBooksList()
    // 重置表单
    addForm.reset()
    // 隐藏弹框
    addModal.hide()
  })
})

运行效果：

3、删除图书

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */
// 3.1 删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {
  // 获取触发事件目标元素
  // console.log(e.target)
  // 判断点击的是删除元素
  if (e.target.classList.contains('del')) {
    // console.log('点击删除元素')
    // 获取图书id（自定义属性id）
    const theId = e.target.parentNode.dataset.id
    // console.log(theId)
    // 3.2 调用删除接口
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'DELETE'
    }).then(() => {
      // 3.3 刷新图书列表
      getBooksList()
    })
  }
})

4、编辑图书

/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
// 4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {
  // 判断点击的是否为编辑元素
  if (e.target.classList.contains('edit')) {
    // 4.2 获取当前编辑图书数据->回显到编辑表单中
    const theId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`
    }).then(result => {
      const bookObj = result.data.data
      // document.querySelector('.edit-form .bookname').value = bookObj.bookname
      // document.querySelector('.edit-form .author').value = bookObj.author
      // 数据对象“属性”和标签“类名”一致
      // 遍历数据对象，使用属性去获取对应的标签，快速赋值
      const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })
    editModal.show()
  }
})
// 修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {
  // 4.3 提交保存修改，并刷新列表
  const editForm = document.querySelector('.edit-form')
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true})
  // 保存正在编辑的图书id，隐藏起来：无需让用户修改
  // <input type="hidden" class="id" name="id" value="84783">
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'PUT',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then(() => {
    // 修改成功以后，重新获取并刷新列表
    getBooksList()

    // 隐藏弹框
    editModal.hide()
  })
})