图书管理模拟

最新推荐文章于 2024-07-18 11:48:33 发布

晓晓2022

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量528

点赞数

分类专栏：前端基础文章标签： javascript 前端 html css css3

本文链接：https://blog.csdn.net/qq_45911604/article/details/123640145

版权

前端基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

图书管理模拟

效果展示：
在这里插入图片描述

技术栈

html+css+bootstrap+ajax

代码实现

<!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>
    <link rel="stylesheet" href="000/bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="000/bootstrap/bootstrap-3.4.1-dist/js/jquery-1.10.2.min.js"></script>
    <script src="000/bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px;
        }
    </style>
</head>

<body>
    <!-- 面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">图书管理模拟</h3>
        </div>
        <div class="panel-body form-inline">
            <!-- 书籍添加框 -->
            <div class="input-group">
                <div class="input-group-addon">书籍</div>
                <input type="text" class="form-control" id="booknameipt">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="authoript">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="publisheript">
            </div>

            <button type="button" class="btn btn-primary" id="btnbox">添加书籍</button>

        </div>
        <!-- 书籍表单 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>书籍</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="conbox">
            </tbody>
        </table>
    </div>

    <script>
        $(function (params) {
            //数据展示
            function getbooklist() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    var arr = [];
                    $.each(res.data, function (i, item) {
                        //数组的追加函数arr.push()
                        arr.push("<tr><td>" + item.id + "</td><td>" + item.bookname + "</td><td>" +
                            item.author + "</td><td>" + item.publisher
                            + "</td><td><a class='del' data-id='" + item.id + "' href='javascript:;'>删除</a></td></tr>");
                    });
                    //将arr展示到ui界面
                    $("#conbox").empty().append(arr.join(''));//将数组按照要求拼成字符串
                });
            }
            //函数调用
            getbooklist();

            //删除操作的实现
            // 注意因为a标签是动态添加上去的,所以不能直接获取进行操作
            //可以通过事件委托,来实现对元素的控制

            $("#conbox").on('click', '.del', function () {
                //this就是a标签
                var id = $(this).attr('data-id');//attr('自定义属性名')
                $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
                    if (res.status != 200) {
                        return alert('删除失败');
                    }
                    getbooklist();
                })
            });
            //书籍添加
            $("#btnbox").on('click',function (params) {
                var bookname = $("#booknameipt").val().trim();
                var author = $("#authoript").val().trim();
                var publisher = $("#publisheript").val().trim();
                //数据判空
                if(bookname.length<=0||author.length<=0||publisher.length<=0)
                {
                    return alert('请正确输入数据');
                }
                //将拿到数据进行渲染
                $.post('http://www.liulongbin.top:3006/api/addbook',{
                    bookname:bookname,
                    author:author,
                    publisher:publisher
                },function (res) {
                    if(res.status != 201)
                    {
                        return alert('数据添加失败');
                    }
                    getbooklist();
                    //将表单清空
                    $("#booknameipt").val('');
                    $("#authoript").val('');
                    $("#publisheript").val('');//注意再val()用法
                });
            });

        });
    </script>
</body>

</html>

注意bootstrap使用
jquery文件要放在最前面。

注意事项

1，注意字符串的拼接(变量怎么样实现拼接)
在这里插入图片描述单引号和双引号使用，注意不要混淆。

2，关于怎么样将一堆数据加到一个标签里面？

var arr = [];
$.each(res.data, function (i, item) {
//数组的追加函数arr.push()
arr.push("<tr><td>" + item.id + "</td><td>" + item.bookname + "</td><td>" +
item.author + "</td><td>" + item.publisher
 + "</td><td><a class='del' data-id='" + item.id + "' href='javascript:;'>删除</a></td></tr>");
});
//将arr展示到ui界
$("#conbox").empty().append(arr.join(''));//将数组按照要求拼成字符串

首先创建一个数组arr，再将构建好的字符串结构添加到指定位置。

$("").append(需要添加的东西):结构添加；
.empty():置空；
.join(按照这个里面的东西将一个数组转化为一个字符串)；

3，关于怎么样删除一行操作实现。
没法对每一个需要删除的东西，可以给它们添加一个属性，然后再根据这个索引来删除。
在这里插入图片描述
4，关于输入框的盘判空处理

输入框再拿数据前都要进行数据判空处理；
具体步骤：

                var bookname = $("#booknameipt").val().trim();
                var author = $("#authoript").val().trim();
                var publisher = $("#publisheript").val().trim();
                //数据判空
                if(bookname.length<=0||author.length<=0||publisher.length<=0)
                {
                    return alert('请正确输入数据');
                }

注意val()函数:

$("").val('') 等价于 dom.value == '';
trim():可以去除一个字符串前后的空字符。

晓晓2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图书管理模拟

图书管理模拟效果展示：技术栈html+css+bootstrap+ajax代码实现<!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-
复制链接

扫一扫