前端简单的图书增，删改，查（html+css+javascript+jquery+axios）自学前端有不足的地方希望大家指导，全部源代码已上传

表单html代码

<!-- 表单html代码 -->
<form action="" class="bigBox">
    <div class="nav">
        <h2>图书管理</h2>
        <button type="button" class="btn btn-primary add" data-bs-toggle="modal" data-bs-target=".myBox">+添加</button>
    </div>
    <table>
        <thead>
            <tr class="th-color">
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</form>

修改的html代码

<!-- 弹窗html代码（结构直接从给出的模板样式上面cv） -->
<!-- 修改的html代码 -->
<div class="modal myBox" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 头部 -->
            <div class="modal-header">
                <h5 class="modal-title title">添加图书</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
                <form action="" class="collect">
                    <div class="item">书名 <input class="form-control bookname form-bookname" type="text"
                            placeholder="请输入书籍名称" name="bookname" autocomplete="off">
                    </div>
                    <div class="item">作者 <input class="form-control author form-bookname" type="text"
                            placeholder="请输入作者名称" name="author" autocomplete="off">
                    </div>
                    <div class="item">出版社 <input class="form-control publisher form-bookname" type="text"
                            placeholder="请输入出版社名称" name="publisher" autocomplete="off">
                    </div>
                </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">保存</button>
            </div>
        </div>
    </div>
</div>

编辑图书弹窗

<!-- 编辑图书弹窗 -->
<div class="modal  editTable" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 头部 -->
            <div class="modal-header">
                <h5 class="modal-title title">编辑图书</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
                <form action="" class="collect editCollect">
                    <input type="hidden" class="id" name="id" value="">
                    <div class="item ">
                        书名 <input class="form-control bookname form-bookname" type="text" placeholder="请输入书籍名称"
                            name="bookname" autocomplete="off" class="bookname">
                    </div>
                    <div class="item ">
                        作者 <input class="form-control author form-bookname" type="text" placeholder="请输入作者名称"
                            name="author" autocomplete="off" class="author">
                    </div>
                    <div class="item ">
                        出版社 <input class="form-control publisher form-bookname" type="text" placeholder="请输入出版社名称"
                            name="publisher" autocomplete="off" class="publisher">
                    </div>
                </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 newSave">修改</button>
            </div>
        </div>
    </div>
</div>

css样式代码

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .bigBox {
            width: 800px;
            margin: 100px auto;
        }

        .nav {
            width: 100%;
            height: 60px;
            position: relative;
        }

        h2 {
            position: absolute;
            top: 10px;
            left: 0;
        }

        .add {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 80px;
            height: 35px;
            outline: none;
            border: 1px solid grey;
            border-radius: 5px;
            cursor: pointer;
            line-height: 15px;
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
            width: 200px;
            height: 40px;
        }

        .th-color th {
            width: 200px;
            height: 40px;
            color: white;
            background-color: grey;
            text-align: center;
            line-height: 40px;
        }
    </style>

js代码

<script>
    // 封装函数：
    const creator = '张三'
    // 获取输入款元素
    // const tbody = document.querySelectorAll('tbody tr')
    function getBooksList() {
        axios({
            url: 'http://hmajax.itheima.net/api/books',
            params: {
                creator
            }
        }).then(result => {
            const booksList = result.data.data
            const htmlStr = booksList.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('')
            document.querySelector('tbody').innerHTML = htmlStr
        })
    }
    getBooksList()
    // 创建弹窗对象
    const addModalDom = document.querySelector('.modal')
    const addModal = new bootstrap.Modal(addModalDom)
    // 绑定保存按钮点击事件
    document.querySelector('.save').addEventListener('click', () => {
        // 收集表单数据
        const addForm = document.querySelector('.collect')
        const bookObj = serialize(addForm, { hash: true, empty: true })
        axios({
            url: 'http://hmajax.itheima.net/api/books',
            method: 'post',
            data: {
                ...bookObj,
                creator
            }
        }).then(result => {
            getBooksList()
            // 提交以后重置表单
            addForm.reset()
            // 隐藏
            addModal.hide()
        })
    })
    // 删除模块
    document.querySelector('tbody').addEventListener('click', e => {
        if (e.target.classList.contains('del')) {
            const theId = e.target.parentNode.dataset.id
            axios({
                url: `http://hmajax.itheima.net/api/books/${theId}`,
                method: 'delete'
            }).then(() => {
                getBooksList()
            })
        }
    })
    // 编辑模块
    const editDom = document.querySelector('.editTable')
    const editModal = new bootstrap.Modal(editDom)
    // 编辑点击事件 给父元素绑定
    document.querySelector('tbody').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 => {
                // console.log(result);
                const bookObj = result.data.data
                const keys = Object.keys(bookObj)
                keys.forEach(key => {
                    document.querySelector(`.editTable .${key}`).value = bookObj[key]
                })
            })
            editModal.show()
        }
    })
    // 给修改按钮绑定事件
    document.querySelector('.newSave').addEventListener('click', () => {
        const editForm = document.querySelector('.editCollect')
        // 解构
        const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'put',
            data: {
                bookname,
                author,
                publisher,
                creator
            }
        }).then(() => {
            getBooksList()
        })
        editModal.hide()
    })
</script>