Ajax——基于bootstrap的图书管理案例

1.渲染页面UI结构

导入bootstrap.css  +    jquery.js

插件：bootstrap 3 snippets

1.1添加图书的Panel面板 

.bs3-panel-primary: Panel主面板

.bs3-input-group:addon:text:带有名字的输入框

.bs3-button-primary:添加按钮

 <!-- 添加图书的Panel面板 -->


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <!-- form-inline横向排列 -->
        <div class="panel-body form-inline">

            <!-- 修改名字 id 和提示字 -->
            <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>

1.2添加图书的表格：

.bs3-table:bordered:添加带有边框的表格

<!-- 图书的表格 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

---

2.渲染图书列表

2.1获取图书列表的数据

 //获取图书列表的数据
            function getbookList() {
                // 1. 发起 ajax 请求获取图书列表数据
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    // 2. 获取列表数据是否成功
                    if (res.status !== 200) return alert('获取图书列表失败！')
                        // 3. 渲染页面结构
                    var rows = []
                    $.each(res.data, function(index, item) {
                            // 4. 循环拼接字符串
                            //一共5个<td></td>
                            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>')
                        })
                        // 5. 渲染表格结构
                        //清空再追加
                    $('#tb').empty().append(rows.join(''))

                })
            }
            getbookList()
            })

2.2删除图书

因为删除按钮一开始不在,是获取数据时候渲染出来的,所以需要通过代理方式为动态添加的元素绑定点击事件！！

//通过代理方式为动态添加的元素绑定点击事件！！
            //因为删除按钮一开始不在 是获取数据时候渲染出来的

            // 1. 为按钮绑定点击事件处理函数
            $('tbody').on('click', '.del', function() {
                // 2. 获取要删除的图书的 Id
                var id = $(this).attr('data-id')
                $.ajax({ // 3. 发起 ajax 请求，根据 id 删除对应的图书
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/delbook',
                    data: {
                        id: id
                    },
                    success: function(res) {
                        if (res.status !== 200) return alert('删除图书失败！')
                            // 4. 删除成功后，重新加载图书列表
                        getBookList()
                    }
                })
            })

 2.3添加图书

$('#btnAdd').on('click', function() {
                // 1. 检测内容是否为空
                var bookname = $('#bookname').val()
                var author = $('#author').val()
                var publisher = $('#publisher').val()
                if (bookname === '' || author === '' || publisher === '') {
                    return alert('请完整填写图书信息！')
                }
                // 2. 发起 ajax 请求，添加图书信息
                $.post(
                    'http://www.liulongbin.top:3006/api/addbook', {
                        bookname: bookname,
                        author: author,
                        publisher: publisher
                    },
                    function(res) {
                        // 3. 判断是否添加成功
                        if (res.status !== 201) return alert('添加图书失败！')
                        getBookList() // 4. 添加成功后，刷新图书列表
                        $('input:text').val('') // 5. 清空文本框内容
                    }
                )
            })

---

3.页面展示