• 附录1.图书管理案例

    目录

    1  静态页面

    2  后端

    3  JS部分

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

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

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

    1  静态页面

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

    html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="initialization.css">
    9.     <link rel="stylesheet" href="index.css">
    10. head>
    11. <body>
    12.     <section class="container">
    13.         <section class="add_new_book">
    14.             <div class="header">添加新图书div>
    15.                 <form action="#" class="content">
    16.                     <div>
    17.                         <span class="title">书名span>
    18.                         <input type="text" placeholder="请输入书名">
    19.                     div>
    20.                     <div>
    21.                         <span class="title">作者span>
    22.                         <input type="text" placeholder="请输入作者">
    23.                     div>
    24.                     <div>
    25.                         <span class="title">出版社span>
    26.                         <input type="text" placeholder="请输入出版社">
    27.                     div>
    28.                     <input type="submit" value="添加">
    29.             div>
    30.         section>
    31.         <table cellspacing="0">
    32.             <thead>
    33.                 <tr>
    34.                     <td>idtd>
    35.                     <td>书名td>
    36.                     <td>作者td>
    37.                     <td>出版社td>
    38.                     <td>操作td>
    39.                 tr>
    40.             thead>
    41.             <tbody>
    42.                 <tr>
    43.                     <td>1td>
    44.                     <td>西游记td>
    45.                     <td>吴承恩td>
    46.                     <td>上海图书出版社td>
    47.                     <td><a href="#">删除a>td>
    48.                 tr>
    49.                 <tr>
    50.                     <td>1td>
    51.                     <td>西游记td>
    52.                     <td>吴承恩td>
    53.                     <td>上海图书出版社td>
    54.                     <td><a href="#">删除a>td>
    55.                 tr>
    56.             tbody>
    57.         table>
    58. section>
    59.     
    60. body>
    61. <script src="../jquery-3.6.1.min.js">script>
    62. html>

    css

    1. .container {
    2.     width:90%;
    3.     min-width: 750px;
    4.     margin:0 auto;
    5.     .add_new_book {
    6.         height:100px;
    7.         border:2px solid rgb(51,121,183);
    8.         border-radius: 5px;
    9.         margin-top:30px;
    10.         .header {
    11.             width:calc(100% + 2px);
    12.             height:40px;
    13.             margin:-1px;
    14.             line-height: 40px;
    15.             background-color: rgb(51,121,183);
    16.             color:white;
    17.             text-indent: 3vw;
    18.             font-size:18px;
    19.         }
    20.         .content {
    21.             width: 100%;
    22.             margin:0 auto;
    23.             padding:10px;
    24.             display: flex;
    25.             justify-content: space-between;
    26.             div {
    27.                 height:28px;
    28.                 display: inline-block;
    29.                 border:3px solid rgb(237,238,236);
    30.                 border-radius: 5px;
    31.                 span {
    32.                     display: inline-block;
    33.                     padding:5px 10px;
    34.                     margin: -1px;
    35.                     text-align: center;
    36.                     background-color: rgb(237,238,236);
    37.                 }
    38.                 input {
    39.                     border-color: transparent;
    40.                     outline:none;
    41.                     text-indent: 0.5vw;
    42.                     &::placeholder {
    43.                         color:rgb(209,214,220);
    44.                     }
    45.                 }
    46.             }
    47.             input[type="submit"] {
    48.                 width:50px;
    49.                 height:28px;
    50.                 line-height: 28px;
    51.                 text-align: center;
    52.                 color:white;
    53.                 border:1px solid rgb(50,121,183);
    54.                 border-radius: 5px;
    55.                 background-color: rgb(50,121,183);
    56.             }
    57.         }
    58.     }
    59.     table {
    60.         width:100%;
    61.         margin-top:20px;
    62.         text-indent: 1.5vw;
    63.         td {
    64.             border:1px solid gray;
    65.             
    66.         }
    67.         thead {
    68.             height:35px;
    69.             font-weight: bold;
    70.         }
    71.         tbody {
    72.             tr {
    73.                 height:30px;
    74.                 line-height:30px;
    75.                 a {
    76.                     color:blue;
    77.                 }
    78.             }
    79.         }
    80.         
    81.     }
    82. }

    需要注意的地方

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

    2  后端

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

    3  JS部分

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

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

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

    在tbody中的两行我们注释掉，最终的html是这样的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="initialization.css">
    9.     <link rel="stylesheet" href="index.css">
    10. head>
    11. <body>
    12.     <section class="container">
    13.         <section class="add_new_book">
    14.             <div class="header">添加新图书div>
    15.             
    16.             <form action="index.html" class="content" method="post">
    17.                 <div>
    18.                     <span class="title">书名span>
    19.                     <input type="text" placeholder="请输入书名" name="book_name">
    20.                 div>
    21.                 <div>
    22.                     <span class="title">作者span>
    23.                     <input type="text" placeholder="请输入作者" name="author">
    24.                 div>
    25.                 <div>
    26.                     <span class="title">出版社span>
    27.                     <input type="text" placeholder="请输入出版社" name="publisher">
    28.                 div>
    29.                 <input type="submit" value="添加">
    30.                 
    31.             form>
    32.         section>
    33.         <table cellspacing="0">
    34.             <thead>
    35.                 <tr>
    36.                     <td>idtd>
    37.                     <td>书名td>
    38.                     <td>作者td>
    39.                     <td>出版社td>
    40.                     <td>操作td>
    41.                 tr>
    42.             thead>
    43.             <tbody>
    44.                 
    45.             tbody>
    46.         table>
    47. section>
    48.     
    49. body>
    50. <script src="../jquery-3.6.1.min.js">script>
    51. <script src="index.js">script>
    52. html>

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

    1. load()
    2. function load() {
    3.     $.ajax({
    4.         type:'GET',
    5.         url:'http://127.0.0.1:8000/book_information/get_all_book',
    6.         success:function(result) {
    7.             $('tbody').empty()
    8.             result = JSON.parse(result)
    9.             content = eval(result['content'])
    10.             for (i in content) {
    11.                 id = content[i].id
    12.                 book_name = content[i].name
    13.                 author = content[i].author
    14.                 publisher = content[i].publisher
    15.                 $('tbody').append(''+ id +''+ book_name +''+ author +''+ publisher +'删除')
    16.             }
    17.         }
    18.     })
    19. }
    20.  
    21. $('tbody').on('click','a',function() {
    22.     $.ajax({
    23.         type:'GET',
    24.         url:'http://127.0.0.1:8000/book_information/delete_book',
    25.         data:{id:parseInt($(this).parent().siblings('.book_id').text())},
    26.         success:function() {load()}
    27.     })
    28. })
    29.  
    30. $('.add_new_book form input[type="submit"]').on('click',function() {
    31.     book_name = $('.add_new_book form input[name="book_name"]').val().trim()
    32.     author = $('.add_new_book form input[name="author"]').val().trim()
    33.     publisher = $('.add_new_book form input[name="publisher"]').val().trim()
    34.  
    35.     if (book_name && author && publisher) {
    36.         $.ajax({
    37.             type:'POST',
    38.             url:'http://127.0.0.1:8000/book_information/add_book',
    39.             data:{
    40.                 book_name:book_name,
    41.                 author:author,
    42.                 publisher:publisher,
    43.             },
    44.             success:function() {load()}
    45.         })
    46.         $('.add_new_book form input[type="text"]').val('')
    47.     }
    48.     else {
    49.         alert('请填写全')
    50.     }
    51. })

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

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

  • 相关阅读:
    【博客497】k8s cgroup原理完整剖析
    高级IO/多路转接-select/poll(1)
    Saas.弹性架构设计思考
    面试官问我，Redis分布式锁如何续期？
    QT QMdiArea控件 使用详解
    LINUX基础知识和命令 二
    小红书店铺所有商品数据接口（smallredbook.item_search_shop）
    Apipost使用介绍
    【uni-app + uView】CountryCodePicker 国家区号组件
    京东AB主图测试实验，优化主图提升转化！
  • 原文地址：https://blog.csdn.net/potato123232/article/details/127548151