master

分支 (2)

管理

管理

master

yu

library-management
/
修改.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 lib 目录下的 bootstrap 样式表 -->
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>

    <!-- 栅格系统 -->
    <div class="container-fluid">
        <!-- 栅格系统中的一行 -->
        <div class="row">
            <!-- 左侧的表格，占了 8 列 -->
            <div class="col-sm-8">
                <table class="table table-bordered table-striped table-dark table-hover text-center">
                    <colgroup>
                        <col width="10%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col />
                    </colgroup>
                    <thead>
                        <!-- 表头行 -->
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">书名</th>
                            <th scope="col">作者</th>
                            <th scope="col">出版社</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 表格中的每一行 -->
                        <!-- <tr>
                            <th scope="row">xxx</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>
                                <button type="button" class="btn btn-link btn-sm">删除</button>
                            </td>
                        </tr> -->
                    </tbody>
                </table>
            </div>

            <!-- 右侧的添加区域，占了 4 列 -->
            <div class="col-sm-4">
                <!-- 添加图书的卡片 -->
                <div class="card text-white bg-secondary sticky-top">
                    <div class="card-header">添加新图书</div>
                    <form class="card-body bg-light" id="addForm">
                        <!-- 书名 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">书名</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入图书名称" name="bookname">
                        </div>
                        <!-- 作者 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">作者</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入作者名字" name="author">
                        </div>
                        <!-- 出版社 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">出版社</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher">
                        </div>
                        <!-- 添加按钮 -->
                        <input type="hidden" name="appkey" value="dapeng">
                        <button class="btn btn-dark" type="submit">添加</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none;" class="ddv">页面加载中.........</div>
    <!-- 引入 lib 目录下的 jQuery 和 axios -->
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        $(function () {

            axios.defaults.baseURL = 'http://www.itcbc.com:3006'
            // 获取服务器书籍 并渲染到桌面
            function books() {
                axios.get('/api/getbooks', { params: { appkey: 'dapeng' } }).then(({ data }) => {
                    let arr = []
                    data.data.forEach(item => {

                        arr.push(`
                        <tr>
                            <th scope="row">${item.id}</th>
                            <td>${item.bookname}</td>
                            <td>${item.author}</td>
                            <td>${item.publisher}</td>
                            <td>
                                <button data-id=${item.id} type="button" class="btn btn-link btn-sm">删除</button>
                                <button data-id=${item.id} type="button" class=" btn-link btnsm">修改</button>
                            </td>
                        </tr>
                        <tr style="display: none;" >
                            <th scope="row">${item.id}</th>
                            <td><input type="text"name="bookname"value="${item.bookname}"></td>
                            <td> <input type="text"name="author"value="${item.author}"></td>
                            <td><input type="text"name="publisher"value="${item.publisher}"></td>
                            <td>
                                <button data-id=${item.id} type="button" class="link">确认</button>
                                <button data-id=${item.id} type="button" class="sm">取消</button>
                            </td>
                        </tr>
                        `)
                    });
                    $('tbody').html(arr.join(''))
                })
            }
            books()
            // 添加图书
            $('form').submit(function (e) {
                e.preventDefault()
                let data = $(this).serialize()
                axios.post('/api/addbook', data).then(({ data }) => {
                    if (data.status === 0) {
                        books()
                        $('form')[0].reset()
                    }
                })
            })
            // 点击删除
            $('tbody').on('click', '.btn', function () {
                let con = confirm('确定删除吗')
                if (!con) return;
                axios.delete('/api/delbook', { params: { id: $(this).data('id'), appkey: 'dapeng' } }).then(({ data }) => {
                    if (data.status === 0) {
                        books()
                    }
                })
            })
            // 点击修改
            $('tbody').on('click', '.btnsm', function () {
                $(this).parents('tr').next().show()
            })
            // 点击确认按钮
            $('tbody').on('click', '.link', function () {
                let data = {
                    id: $(this).data('id'),
                    bookname: $(this).parents('tr').find('input').eq(0).val(),
                    author: $(this).parents('tr').find('input').eq(1).val(),
                    publisher: $(this).parents('tr').find('input').eq(2).val(),
                    appkey: 'dapeng'
                }
                axios.put('/api/updatebook', data).then(({ data }) => {
                    if (data.status === 0) {
                        books()
                    }
                })
            })
            // 点击取消
            $('tbody').on('click', '.sm', function () {
                $(this).parents('tr').hide()
            })
        })

    </script>
</body>

</html>