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].idbook_name = content[i].nameauthor = content[i].authorpublisher = 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博客

附录1.图书管理案例相关推荐

026_图书管理案例
1. 新建一个名为Books的动态Web工程 1.1. 添加gson-2.8.5.jar 1.2. 编写Book.java package com.bjbs.action;import java.io ...
Vue 实现图书管理案例
案例效果案例思路图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮添加图书实现表单的静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑修改图书修改信息填 ...
vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...
Django案例——图书管理案例
文章目录项目开始前 App的建立和路由分配数据库的建立与连接模型映射(建立表格) 视图函数最终的效果图项目代码连接见:链接:https://pan.baidu.com/s/1mRYMVZkp ...
Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
ajax图书管理案例
rows数组中就是: rows.join('')整体添加单引号里面如何加参数语法可以通过"'+ 参数+'" 即2 双引号里面加2 单引号加两个加号 data=&q ...
案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
案例:图书管理 Vue数组操作 1.变异方法:会影响数组的原始数据的变化. 2.替换数组:不会影响原始的数组数据,而是形成一个新的数组. <!DOCTYPE html> <html ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...

附录1.图书管理案例

1 静态页面

2 后端

3 JS部分

附录1.图书管理案例相关推荐

最新文章

热门文章