Ajax图书管理业务

图书管理业务

Ajax图书管理业务

需求: 对服务器的图书数据进行 增、删、改、查。功能的实现，同时实时动态的渲染刷新页面内容

根据功能模块分为四个业务模块，下面有各个业务的实现步骤

01_ 渲染图书列表业务

* 目标1：渲染图书列表

* 1.1 获取数据

* 1.2 渲染数据

业务1代码

// 固定的携带参数别名
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 `
            ${index + 1}
            ${item.bookname}
            ${item.author}
            ${item.publisher}
            
              删除
              编辑
            
          `
        }).join('')
        console.log(htmlStr)
        document.querySelector('.list').innerHTML = htmlStr
    })
}
// 网页加载运行，获取并渲染列表一次
getBooksList()

02_新增图书业务

目标2：新增图书

​ * 2.1 新增弹框 -> 显示和隐藏

​ * 2.2 收集表单数据，并提交给服务器

​ * 2.3 刷新图书列表、同时重置表单

业务2代码

// 2.1 创建一个弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 给保存按钮添加点击事件
document.querySelector('.add-btn').addEventListener('click', () => {
    // 2.2 收集表单数据，并提交给服务器
    const form = document.querySelector('.add-form')
    // 使用serialize插件的函数获取拥有anme属性的表单值
    const data = serialize(form, { hash: true, empty: true })
    // 使用对象解构对获取的值进行处理,用于提交数据
    const { bookname, author, publisher } = data
    console.log(data)
    // 2.2.1 向服务器发送提交请求（提交到服务器）
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
            ...data,
            creator
        }
    }).then(result => {
        console.log(result)
        // 2.3 服务器响应后我们需要重新渲染图书数据列表
        getBooksList()
        // 重置表单
        form.reset()
        // 隐藏弹框
        addModal.hide()
    })
})

这里的显示，我们使用bootstrap属性控制就可以了，但是隐藏我们需要提交数据，所以我们使用js来控制。

03_删除图书业务

* 目标3： 删除图书

* 3.1 删除元素绑定点击事件 -> 获取图书id

* 3.2 调用删除接口

* 3.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(result => {
            // 3.3 刷新图书列表
            getBooksList()
            console.log(result)
        }).catch(error => {
            console.log(error)
            console.log(error.response.data.message)
        })
    }
})

04_编辑图书业务

* 目标4 ：编辑图书

* 4.1 编辑弹框 -> 显示和隐藏

* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中

* 4.3 提交保存修改 ，并刷新列表

业务4代码

// 4.1 编辑弹框 -> 显示和隐藏 （使用js方式控制）
const editDom = document.querySelector('.edit-modal')
// 通过bootstrap.Modal构造函数创建一个实例对象
const editModal = new bootstrap.Modal(editDom)
// 给编辑元素 -> 绑定 ->委托事件
document.querySelector('.list').addEventListener('click', e => {
    // 判断点击的是否为 edit 这个类 的标签
    if (e.target.classList.contains('edit')) {
        // console.log('编辑')

        // 4.2 获取当前编辑图书数据 -> 回显到编辑表单中
        const theId = e.target.parentNode.dataset.id
        // console.log(theId)
        axios({
            // 路径传参  嵌入进去
            url: `http://hmajax.itheima.net/api/books/${theId}`,
            method: 'GET',
        }).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]
            })
        })

        // 给弹框对象添加show方法，让编辑框显示出来
        editModal.show()
    }
})

//  修改按钮 -> 点击 -> 隐藏按钮
document.querySelector('.edit-btn').addEventListener('click', () => {
    // 4.3 提交保存修改 ，并刷新列表
    const editForm = document.querySelector('.edit-form')
    const bookObj = serialize(editForm ,{ hash: true ,empty: true })
    // 下面是保存正在编辑的图书id ，隐藏起来：无需让用户修改
    // 
    axios({
        url: `http://hmajax.itheima.net/api/books/${bookObj.id}`,
        method: 'PUT',
        data: {
            ...bookObj,
            creator
        }
    }).then(() => {
        // 修改成功以后，重新获取并刷新列表
        getBooksList()
        // 隐藏弹框
        editModal.hide()
    })

})

业务总结

• 核心的步骤

* 业务1：渲染图书列表

* 1.1 获取数据

* 1.2 渲染数据

业务2：新增图书

​ * 2.1 新增弹框 -> 显示和隐藏

​ * 2.2 收集表单数据，并提交给服务器

​ * 2.3 刷新图书列表、同时重置表单

* 业务3： 删除图书

* 3.1 删除元素绑定点击事件 -> 获取图书id

* 3.2 调用删除接口

* 3.3 刷新图书列表

* 业务4 ：编辑图书

• 显示和隐藏

* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中

* 4.3 提交保存修改 ，并刷新列表

在所有的查询和请求中,只要服务器的数据发生变化,同时也需要渲染刷新页面的内容.