AJAX——图书管理案例

1.渲染列表

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查。

// 目标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 渲染数据
        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>
              <span class="del">删除</span>
              <span class="edit">编辑</span>
            </td>
          </tr>
            `
        }).join('')
       console.log(htmlStr)
       document.querySelector('.list').innerHTML = htmlStr
    })
}
// 网页加载运行，获取并渲染列表一次
getBooksList()

2.新增图书

/**
 * 目标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.删除图书