ajax图书管理项目

bootstrap弹框

不离开当前页面，显示单独内容，让用户操作

功能：不离开当前页面，显示单独内容，供用户操作步骤：

1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构

3.通过自定义属性，控制弹框的显示和隐藏

html 复制代码

<body> 
<button type="button" class ="btn btn-primary"
data-bs-toggle="model" data-bs-target=".my-box">
 显示弹框
</button>
<div class="modal my-box" 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">.
            </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>

可能会出现一些问题，可能因为你用的版本4的，里面没用bs-，把属性data-dismiss改为data-bs-dismiss就行了

和JS的适配

通过属性控制，弹框显示或隐藏
通过JS控制，弹框显示或隐藏

有这样一串代码

javascript 复制代码

//创建弹框对象
const modalDom = document.queryselector('css选择器')
const modal = new bootstrap.Modal(modelDom)
//显示弹框
modal.show()
//雌就弹框
modal.hide()

html 复制代码

<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>
//1.创建弹框对象
const modalDom = document.querySelector('.name-box')
const modal = new bootstrap.Modal(modalDom)
//编辑姓名->点击->赋予默认姓名->弹框显示
document.querySelector('.edit-btn').addEventListener
    ('click', () => {
        document.querySelector('.username').value = '默认姓名'
        //2.显示弹框
        modal.show()
    })
//保存->点击->->获取姓名打印->弹框隐藏
document.querySelector('. save-btn').addEventlistener
    ('click', () => {
        const username = document.querySelector('.username').value
        console.log('模拟把姓名保存到服务器上'，username)
        //2.隐藏弹框
        modal.hide()
    })
</script>

图书管理渲染列表

javascript 复制代码

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

CUDA常见的

添加数据

javascript 复制代码

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: {
            ...book0bj,
            creator
        }
    }).then(result => {
        console.log(result)
        //2.3添加成功后，重新请求并渲染图书列表
        getBooksList()
        //重置表单
        addForm.reset()
        //隐藏弹框
        addModal.hide()
    })

删除数据

javascript 复制代码

/* 目标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()
        })
    }
})

编辑图书

javascript 复制代码

/**
* 目标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')) {
        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=
            author
        //因为默认的是GET方式，所以现在这个可以不写method
        //遍历数据对象，使用属性获取对应的标签，快速赋值
            const keys =Object.keys(bookObj)//['id','bookname','author','publisher']
            keys.foreach(key=>{
                document.querySelector(`.edit-form.${key}`.value=
                bookObj[key]
         // 为什么不能点key因为获取过来的是字符串
            })
        })
        editModal.show()
    }
})
//修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', ()
=> {
    //4.3提交保存修改，并刷新列表
    const editForm = document.querySelector('.edit-form')
    const bookObj = serialize(editForm,{hash:true,empty:true})



    editModal.hide()
})

happycat