图书管理增删改查

/**

 * 实现功能：

 *    渲染图书列表

 *    新增图书

 *    删除图书

 *    编辑图书

 * 目标1：渲染图书列表

 *  1.1 获取数据

 *  1.2 渲染数据

 *  由于渲染功能在之后功能的使用频率很高，因此对其进行封装

 */

const creator = '老黄'

// 封装-获取并渲染图书列表函数

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渲染数据 map(当前元素的值,当前元素的索引)

        const htmlStr = bookList.map((item,index) => {

            //依次返回数组,注意在删除编辑处加了id，因为以后功能设置需要用到id

            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将数组中的所有元素连接成一个字符串

        }).join('')

        // 将渲染好的数组打印在控制台测试

        console.log(htmlStr);

        // 获取list表单元素，其中内容用innerHTML进行渲染

        document.querySelector('.list').innerHTML = htmlStr

    })

}

// 网页加载运行，获取并渲染列表一次

getBooksList()



/**

 * 目标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')

    // 将表单中添加的数据放到引入的插件serialize中

    const bookObj = serialize(addForm, { hash : true,empty : true})

    // 将从表单中获取的数据打印在控制台上确认是否正确

    // console.log(bookObj);

    // 提交到服务器

    axios({

        url:'http://hmajax.itheima.net/api/books',

        method:'POST',

        data:{

            // 展开语法，展开语法用于将一个对象的属性复制到另一个对象中。

            // 通过展开语法，你将bookObj中的所有属性复制到一个新的对象中，

            // 并添加了一个名为creator的属性，其值为creator变量的值。

            ...bookObj,

            creator

        }

    }).then(result => {

        console.log(result);

        // 2.3 添加成功后，重新请求并渲染图书列表

        getBooksList()

        // 重置表单

        addForm.reset()

        // 隐藏弹框

        addModal.hide()

    })

})



/**

 * 目标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）

        // e.target.parentNode.dataset.id找到点击的元素的父元素的设置的数据中的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.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

            // 数据对象“属性”和标签“类名”一致

            // 遍历数据对象，使用属性去获取对应的标签，快速赋值

            // 使用Object.keys()方法获取了bookObj对象的所有键，

            // 并将其赋值给keys变量。

            // 然后，使用forEach()方法遍历keys数组

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

    })

})