附录1.图书管理案例

Suyuoa

于 2022-10-27 15:39:23 发布

阅读量684

点赞数

分类专栏： Ajax笔记文章标签： html javascript 前端

本文链接：https://blog.csdn.net/potato123232/article/details/127548151

版权

Ajax笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1 静态页面

2 后端

3 JS部分

点击添加可以添加新的图书

数据存放在数据库中，刷新页面后，数据不变

点击删除后可以删除指定的图书

1 静态页面

在视频中用到了Bootstrap提供的样式，我就不多引用Bootstrap了，简单的样式我们自己来搞就行

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>
    <link rel="stylesheet" href="initialization.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section class="container">
        <section class="add_new_book">
            <div class="header">添加新图书</div>
                <form action="#" class="content">
                    <div>
                        <span class="title">书名</span>
                        <input type="text" placeholder="请输入书名">
                    </div>
                    <div>
                        <span class="title">作者</span>
                        <input type="text" placeholder="请输入作者">
                    </div>
                    <div>
                        <span class="title">出版社</span>
                        <input type="text" placeholder="请输入出版社">
                    </div>
                    <input type="submit" value="添加">
            </div>
        </section>
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>id</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>出版社</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>上海图书出版社</td>
                    <td><a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>上海图书出版社</td>
                    <td><a href="#">删除</a></td>
                </tr>
            </tbody>
        </table>
</section>
    
</body>
<script src="../jquery-3.6.1.min.js"></script>
</html>

css

.container {
    width:90%;
    min-width: 750px;
    margin:0 auto;
    .add_new_book {
        height:100px;
        border:2px solid rgb(51,121,183);
        border-radius: 5px;
        margin-top:30px;
        .header {
            width:calc(100% + 2px);
            height:40px;
            margin:-1px;
            line-height: 40px;
            background-color: rgb(51,121,183);
            color:white;
            text-indent: 3vw;
            font-size:18px;
        }
        .content {
            width: 100%;
            margin:0 auto;
            padding:10px;
            display: flex;
            justify-content: space-between;
            div {
                height:28px;
                display: inline-block;
                border:3px solid rgb(237,238,236);
                border-radius: 5px;
                span {
                    display: inline-block;
                    padding:5px 10px;
                    margin: -1px;
                    text-align: center;
                    background-color: rgb(237,238,236);
                }
                input {
                    border-color: transparent;
                    outline:none;
                    text-indent: 0.5vw;
                    &::placeholder {
                        color:rgb(209,214,220);
                    }
                }
            }
            input[type="submit"] {
                width:50px;
                height:28px;
                line-height: 28px;
                text-align: center;
                color:white;
                border:1px solid rgb(50,121,183);
                border-radius: 5px;
                background-color: rgb(50,121,183);
            }
        }
    }
    table {
        width:100%;
        margin-top:20px;
        text-indent: 1.5vw;
        td {
            border:1px solid gray;
            
        }
        thead {
            height:35px;
            font-weight: bold;
        }
        tbody {
            tr {
                height:30px;
                line-height:30px;
                a {
                    color:blue;
                }
            }
        }
        
    }
}

需要注意的地方

使用了margin负值的方式使border的缝隙消失
为防止flex布局变形给了一个最低的宽度
使用伪类::placeholder可以单独给input的提示信息样式

2 后端

使用django来处理后端，我们看一下接口文档

3 JS部分

如果上面的POST请求的接口不进行重定向，那么你不应该使用form的跳转功能，可以加入iframe让form表单提交后不跳转

但是使用form是无法很好的处理三个input的内容，所以我们不使用form做post请求，而是使用ajax进行post请求，form表单改成这样

可以直接不使用form，但是为了不改动css，我依然沿用之前的结构

在tbody中的两行我们注释掉，最终的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>
    <link rel="stylesheet" href="initialization.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <section class="container">
        <section class="add_new_book">
            <div class="header">添加新图书</div>
            <!-- <form action="index.html" class="content" method="post" target="stop"> -->
            <form action="index.html" class="content" method="post">
                <div>
                    <span class="title">书名</span>
                    <input type="text" placeholder="请输入书名" name="book_name">
                </div>
                <div>
                    <span class="title">作者</span>
                    <input type="text" placeholder="请输入作者" name="author">
                </div>
                <div>
                    <span class="title">出版社</span>
                    <input type="text" placeholder="请输入出版社" name="publisher">
                </div>
                <input type="submit" value="添加">
                <!-- <iframe  name="stop" style="display:none;"></iframe>  -->
            </form>
        </section>
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>id</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>出版社</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>上海图书出版社</td>
                    <td><a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>上海图书出版社</td>
                    <td><a href="#">删除</a></td>
                </tr> -->
            </tbody>
        </table>
</section>
    
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script src="index.js"></script>
</html>

css我们没有进行改动，下面是JS

load()
function load() {
    $.ajax({
        type:'GET',
        url:'http://127.0.0.1:8000/book_information/get_all_book',
        success:function(result) {
            $('tbody').empty()
            result = JSON.parse(result)
            content = eval(result['content'])
            for (i in content) {
                id = content[i].id
                book_name = content[i].name
                author = content[i].author
                publisher = content[i].publisher
                $('tbody').append('<tr><td class="book_id">'+ id +'</td><td>'+ book_name +'</td><td>'+ author +'</td><td>'+ publisher +'</td><td><a href="javascript:;">删除</a></td></tr>')
            }
        }
    })
}

$('tbody').on('click','a',function() {
    $.ajax({
        type:'GET',
        url:'http://127.0.0.1:8000/book_information/delete_book',
        data:{id:parseInt($(this).parent().siblings('.book_id').text())},
        success:function() {load()}
    })
})

$('.add_new_book form input[type="submit"]').on('click',function() {
    book_name = $('.add_new_book form input[name="book_name"]').val().trim()
    author = $('.add_new_book form input[name="author"]').val().trim()
    publisher = $('.add_new_book form input[name="publisher"]').val().trim()

    if (book_name && author && publisher) {
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8000/book_information/add_book',
            data:{
                book_name:book_name,
                author:author,
                publisher:publisher,
            },
            success:function() {load()}
        })
        $('.add_new_book form input[type="text"]').val('')
    }
    else {
        alert('请填写全')
    }
})

像这种增删改查的东西我们优先完成读取这个功能，因为所有的功能完成后都要读取一遍

使用 trim()可以搞掉字符串两端的空格，具体使用方式可以看一下这个 4.字符串型 string_Suyuoa的博客-CSDN博客