Ajax图书管理系统-完整代码与细节部分详细讲解

巧克力小猫猿

已于 2022-07-25 15:56:59 修改

阅读量433

点赞数 2

分类专栏：前端三剑客文章标签： ajax javascript 前端

于 2022-07-24 17:04:37 首次发布

本文链接：https://blog.csdn.net/zxdznyy/article/details/125960447

版权

前端三剑客专栏收录该内容

20 篇文章 3 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

在写这篇博客前看了很多相关博客，觉得不够全面，所以打算写一个细致版本的图书管理系统博客。希望对大家有帮助！

一、知识储备

相信很多朋友都是从哔站视频过来的。有卡在bookstrap的，也有卡在bug处停下来的。
但是我们在学写这个系统时候其实并不需要学习bookstrap。重要的是jquery语法的了解储备以及ajax的jq封装写法储备。

二、样式代码

如果你并不能利用bookstrap写出代码，可以复制粘贴这个：你将获得一个比较标准的前端样式：

<!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>
    <script src="./jquery.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
</head>

<body style="padding: 15px">
    <!-- 添加图书panel面板 -->

    <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="iptBookname" placeholder="请输入书名">
            </div>

            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>

            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div>

            <button id="btnAdd" class="btn btn-primary">添加</button>

        </div>
    </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="tb">

        </tbody>
    </table>

三，·此案例需要了解的东西

这部分大家可以浅过一遍，权当复习。全是本次demo跟ajax没有太大关系的细节部分，也就是咱的js基础部分！

3.1 简单接口文档的读法

a.url完整路径：请求根路径url地址 + 具体api
b.调用方式：post&&get
c.数据实例
d.status，如果你的操作成功，会有一个status的固定值，固定值可以在接口文档中看到。所以我们在验证操作是否成功时可以利用status，示例代码：

if (res.status != 200) {
	return alert('获取数据失败');
}

e.属性名称也需从接口文档中获取

3.2 jq中的事件委托

3.2.1 事件冒泡

<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('click', function() {
            alert('我是father');
        })
        son.addEventListener('click', function(e) {
            alert('我是son');
            // e.stopPropagation();
        })
    </script>

大家看以上代码，当我们点击父亲元素：
在这里插入图片描述

当我们点击子元素：
先出现：
在这里插入图片描述
再出现：

这就叫做事件冒泡：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。
解决事件冒泡只需要一条代码：

e.stopPropagation();

或者我们可以把事件绑定在父元素身上也可以避免事件冒泡。

3.2.2 事件捕获

当我们理解事件冒泡，事件委托就能够简单理解了。
跟冒泡刚好相反，事件冒泡是子->父，而事件捕获是父->子，可结合此图理解：
在这里插入图片描述
右边是刚刚讲的事件冒泡，而左边则是所谓的事件捕获。
而我们本次项目代码书写则需要利用事件流的处理机制——事件委托。

3.2.3 事件委托

大家来看如下代码


    <ul>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
        <li>知否知否应是绿肥红瘦</li>
    </ul>

    <script>
        //给父节点添加监听器
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('弹出');
            e.target.style.backgroundColor = 'pink';
        })
    </script>

我们绑定了父元素，但是点击小li也可以弹出相关信息。这就是利用了事件委托。==在做项目时，我们虽然不能绑定动态生成的元素，但是我们可以绑定它的父亲元素。利用这一原理，它的子元素也可以“被绑定”。这就叫做事件委托。==在后面的项目代码阐述中将结合此原理进行讲解。

3.3 join()的五种用法

概括性作用：将array数组中每个元素都转化为字符串，用自定义的连接符进行分割

3.1 将数组中每一个元素转化为字符串–join.()

        var array = ['hello','world'];
        console.log(array.join());

最后得到的结果
在这里插入图片描述

3.2 将字符组成单词，意为无缝链接–join.(‘’)

        var array1 = ['h','e','l','l','o'];
        console.log(array1.join(''));

在这里插入图片描述

3.3 分割功能，将单词组成句子-join(’ ')，引号中有空格

        var array2 = ['i','like','you'];
        console.log(array2.join(' '));

在这里插入图片描述
利用的是分割功能，如果是别的符号也可以起到分割作用

        var array2 = ['i','like','you'];
        console.log(array2.join('-'));

在这里插入图片描述

3.4 判断返回是否为空

join(‘’)返回空可以有效判断数组是不是一个空字符数组

3.5 绑定事件，渲染界面

这是最重要最强大的功能。在后面的代码中我们可以深刻体现

四，整体代码及讲解

4.1 获取数据代码

            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    if (res.status != 200) {
                        return alert('获取数据失败');
                    }
                    console.log(res);
                    var rows = [];
                    $.each(res.data, function (i, item) {
                        rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>');
                    })
                    $('#tb').empty().append(rows.join(''));
                })
            }
            getBookList();

讲解：利用get获取信息。status是判断是否执行成功的标准。如果是固定数，在这里是200（看接口内的规定），则执行成功，否则失败。
这里先定义一个空数组。将数据拼接好后放入数组中。
然后再渲染界面前清空页面，最后渲染。

细节：
a.放入数组中语句的规范性
b.渲染前清空
c.最后需要调用

4.2 删除图书

            $('tbody').on('click', '.del', function () {
                var id = $(this).attr('data-id');
                $.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res) {
                    if(res.status !=  200) {
                        return alert('删除图书失败');
                    }
                    getBookList();
                })
            })

先绑定事件。这里绑定的是tbody。因为a是动态生成的，无法直接绑定。利用的原理如第三大块。
接着是调用get接口。没有单独的删除接口，根据接口文档调用get。一切需要查看接口文档为主。然后再执行删除。
再调用文档时候要注意id，id是我们自定义的属性。选择相应的id删除（id作为携带数据）

细节：
a.a的事件委托
b.自定义id的写法

4.3 添加图书

            $('#btnAdd').on('click', function() {
                var bookname = $('#iptBookname').val().trim();
                var author = $('#iptAuthor').val().trim();
                var publisher = $('#iptPublisher').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();
                $('#iptBookname').val('');
                $('#iptAuthor').val('');
                $('#iptPublisher').val('');
            })
            })

这一部分先获取了图书的属性，val是获取输入框的内容，trim用于去掉字符串中的空格。做完这些后判断数据，如若满足条件则调用post接口添加数据。再添加完后需要清空输入框中的内容。

细节：
a.图书属性的获取，val()，trim() 的利用
b.再提交完后要清空输入框便于下一次使用

五，代码整合

可以拿去直接调试哦！

<!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>
    <script src="./jquery.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
</head>

<body style="padding: 15px">
    <!-- 添加图书panel面板 -->

    <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="iptBookname" placeholder="请输入书名">
            </div>

            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>

            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div>

            <button id="btnAdd" class="btn btn-primary">添加</button>

        </div>
    </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="tb">

        </tbody>
    </table>

    <script>
        $(function () {
            //获取图书列表数据
            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    if (res.status != 200) {
                        return alert('获取数据失败');
                    }
                    console.log(res);
                    var rows = [];
                    $.each(res.data, function (i, item) {
                        rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>');
                    })
                    $('#tb').empty().append(rows.join(''));
                })
            }
            getBookList();
            $('tbody').on('click', '.del', function () {
                var id = $(this).attr('data-id');
                $.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res) {
                    if(res.status !=  200) {
                        return alert('删除图书失败');
                    }
                    getBookList();
                })
            })

            $('#btnAdd').on('click', function() {
                var bookname = $('#iptBookname').val().trim();
                var author = $('#iptAuthor').val().trim();
                var publisher = $('#iptPublisher').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();
                $('#iptBookname').val('');
                $('#iptAuthor').val('');
                $('#iptPublisher').val('');
            })
            })


        })

    </script>


</body>

</html>

六，总结

这个demo让我们复习了js的事件流，以及数组的一些常用方法。巩固了jq封装的ajax用法。也让我们体会到实践的重要性。

最后，谢谢大家支持，有问题有疑惑评论区见，我将尽力解答。

码字不易，如若欣赏，请点个小心心叭~

巧克力小猫猿

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
7
评论
Ajax图书管理系统-完整代码与细节部分详细讲解

在写这篇博客前看了很多相关博客，觉得不够全面，所以打算写一个细致版本的图书管理系统博客。希望对大家有帮助！这个demo让我们复习了js的事件流，以及数组的一些常用方法。巩固了jq封装的ajax用法。也让我们体会到实践的重要性。码字不易，如若欣赏，请点个小心心叭~httpshttpshttpshttpshttpshttpshttpshttps。......
复制链接

扫一扫