day9 图书设计项目
总路由层url
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 首页
url(r'^$', views.home, name='hm'),
# 图书展示页
url(r'^book_list/', views.book_list, name='bl'),
# 图书添加
url(r'^book_add/', views.book_add, name='badd'),
# 图书编辑功能
url(r'^book_update/(\d+)/', views.book_update, name='bu'),
# 图书删除功能
url(r'^book_delete/(?P<delete_id>\d+)', views.book_delete, name='bd')
# 使用ajax实现删除功能
url(r'^del_book',views.del_book)
]
首页
def home(request):
return render(request, 'home.html') # 返回一个页面
# home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
{% block css %}
{% endblock %}
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">图书 <span class="sr-only">(current)</span></a></li>
<li><a href="#">作者</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">meng</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="list-group">
<a href="{% url 'hm' %}" class="list-group-item active">
首页
</a>
<a href="{% url 'bl' %}" class="list-group-item">图书列表</a>
<a href="#" class="list-group-item">出版社列表</a>
<a href="#" class="list-group-item">作者列表</a>
<a href="#" class="list-group-item">更多</a>
</div>
</div>
<div class="col-md-10">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">BMS</h3>
</div>
<div class="panel-body">
{% block content %}
<div class="jumbotron">
<h1>亚洲最大图书馆!</h1>
<p>应有尽有，经典图书</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">中外经典名著</a></p>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
图书展示页
# views.py
def book_list(request):
book_request = models.Book.objects.all()
return render(request, 'book_list.html', locals()) # 把所有的数据展示到页面
# book_list.html
{% extends 'home.html' %} # 用模板的继承
{% block css %}
<style>
.h2 {
color:darkorange;
}
</style>
{% endblock %}
{% block content %}
<h2 class="text-center h2" >精选推荐</h2>
<a href="{% url 'badd' %}" class="btn btn-success">添加书籍</a>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>主键</th>
<th>书名</th>
<th>价格</th>
<th>出版日期</th>
<th>出版社</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book_obj in book_request %}
<tr>
<td>{{ book_obj.id }}</td>
<td>{{ book_obj.title }}</td>
<td>{{ book_obj.price }}</td>
<td>{{ book_obj.publish_time|date:'Y-m-d' }}</td>
<td>{{ book_obj.publish.name }}</td>
{# <td>{{ book_obj.author.all }}</td>#}
<td>
{% for author_obj in book_obj.author.all %}
{% if forloop.last %}
{{ author_obj.name }}
{% else %}
{{ author_obj.name }},
{% endif %}
{% endfor %}
</td>
<td>
<a href="{% url 'bu' book_obj.pk %}" class="btn btn-primary btn-xs">编辑</a>
<a href="{% url 'bd' book_obj.pk %}" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
{% endblock %}
图书添加功能
# views.py
def book_add(request):
if request.method == 'POST':
# 获取用户上传的数据
title = request.POST.get('title')
price = request.POST.get('price')
publish_time = request.POST.get('publish_time')
publish_pk = request.POST.get('publish_pk')
author_pk = request.POST.getlist('author_pk')
# 向数据库添加数据
book_obj = models.Book.objects.create(title=title, price=price, publish_time=publish_time,publish_id=publish_pk)
book_obj.author.add(*author_pk) # author_pk:获取的是列表，用*打散一个个添加
return redirect('bl')
# 出版社对象
publish_request = models.Publish.objects.all()
# 作者对象
author_request = models.Author.objects.all()
return render(request, 'book_add.html', locals())
# book_add.html
{% extends 'home.html' %}
{% block content %}
<h2 class="text-center">图书添加</h2>
<form action="" method="post">
<p>书名：
<input type="text" name="title" class="form-control">
</p>
<p>价格：
<input type="text" name="price" class="form-control">
</p>
<p>出版日期：
<input type="date" name="publish_time" class="form-control">
</p>
<p>出版社：
<select name="publish_pk" id="" class="form-control">
// 循环出所有的出版社
{% for publish_obj in publish_request %}
<option value="{{ publish_obj.pk }}">{{ publish_obj.name }}</option>
{% endfor %}
</select>
</p>
<p>作者：
<select name="author_pk" id="" multiple class="form-control">
{% for author_obj in author_request %}
<option value="{{ author_obj.pk }}">{{ author_obj.name }}</option>
{% endfor %}
</select>
</p>
<input type="submit" value="添加书籍" class="btn btn-success btn-block">
</form>
{% endblock %}
图书编辑功能
# views.py
def book_update(request, update_id):
# 获取用户需要编辑的对象
update_obj = models.Book.objects.filter(pk=update_id).first()
if request.method == 'POST':
# 获取用户上传的数据
title = request.POST.get('title')
price = request.POST.get('price')
publish_time = request.POST.get('publish_time')
publish_pk = request.POST.get('publish_pk')
author_pk = request.POST.getlist('author_pk')
# 向数据库添加数据
models.Book.objects.filter(pk=update_id).update(title=title, price=price, publish_time=publish_time,publish_id=publish_pk)
# 修改第三方表
update_obj.author.set(author_pk)
# 也可以用对象点属性的方式修改，调用save保存
# update_obj.title = title
# update_obj.save()
return redirect('bl')
# 出版社对象
publish_request = models.Publish.objects.all()
# 作者对象
author_request = models.Author.objects.all()
# 返回一个编辑页面
return render(request, 'book_update.html',locals())
# book_update.html
{% extends 'home.html' %}
{% block content %}
<h2 class="text-center">图书修改</h2>
<form action="" method="post">
<p>书名：
<input type="text" name="title" class="form-control" value="{{ update_obj.title }}">
</p>
<p>价格：
<input type="text" name="price" class="form-control" value="{{ update_obj.price }}">
</p>
<p>出版日期：
<input type="date" name="publish_time" class="form-control" value="{{ update_obj.publish_time|date:'Y-m-d' }}">
</p>
<p>出版社：
<select name="publish_pk" id="" class="form-control">
{% for publish_obj in publish_request %} // 循环出所有的出版社
// 循环所有的出版社对象，跟书籍对象的出版社比对，如果一致则添加上selected默认值
{% if update_obj.publish == publish_obj %} // 判断循环的出版社是否和当前修改的出版社是否一样
<option value="{{ publish_obj.pk }}" selected>{{ publish_obj.name }}</option> // 一样的话，添加默认值
{% else %}
<option value="{{ publish_obj.pk }}">{{ publish_obj.name }}</option> // 否则，输出所有出版社
{% endif %}
{% endfor %}
</select>
</p>
<p>作者：
<select name="author_pk" id="" multiple class="form-control">
{% for author_obj in author_request %}
{% if author_obj in update_obj.author.all %}
<option value="{{ author_obj.pk }}" selected>{{ author_obj.name }}</option>
{% else %}
<option value="{{ author_obj.pk }}">{{ author_obj.name }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<input type="submit" value="修改书籍" class="btn btn-warning btn-block">
</form>
{% endblock %}
图书删除功能
# views.py
def book_delete(request,delete_id):
# 删除
models.Book.objects.filter(pk=delete_id).delete()
return redirect('bl') # 删除后重定向图书展示页面
使用Ajax实现二次确认删除功能
# 使用ajax就不能使用下面的url，会造成冲突
<a href="{% url 'bd' book_obj.pk %}" class="btn btn-danger btn-xs">删除</a> # 修改前
<a href="#" class="btn btn-danger btn-xs c1" delete_id="{{ book_obj.pk }}">删除</a> # 修改后
# // 标签既可以有默认的属性，也可以有自定义的属性，添加delete_id是可以获取主键id值
# views.py
def del_book(request):
# 判断当前请求是否为ajax请求
if request.is_ajax():
if request.method == 'POST': # 判断是否是ajax发来的post请求
# 拿到ajax传到后端的data值
delete_id = request.POST.get('delete_id')
# 根据传过来的主键id删除数据
models.Book.objects.filter(pk=delete_id).delete()
return HttpResponse('删除成功！')
# book_list.html
{% block js %}
<script>
var $btn = $('.c1'); // 找到c1标签
// 绑定点击事件
$btn.on('click',function () {
var delete_id = $(this).attr('delete_id'); // 拿当前点击按钮中的delete_id属性
var $this = $(this); // 给this设置一个变量
{#alert(delete_id); // 试验是否拿到主键id#}
// 做提醒效果
let res = confirm('确定删除吗');
// 判断是否为true
if (res){ //true
// 发送ajax请求
$.ajax({
url:'/del_book/', // 向它发送请求
type:'post',
data:{'delete_id':delete_id},
success:function (args) {
alert(args) ; // 接收到用户后端穿过来数据，代表已经删除成功
// 刷新页面
{#window.location.reload()#}
// js代码自动刷新
$this.parent().parent().remove()
}
})
}else { // false
return false
}
})
</script>
{% endblock %}
'''
总结：
1.先在a标签中添加一个自定义属性：delete_id={{book_obj.pk}}，并且设置一个c1标签
2.找到c1标签，并且绑定一个点击事件
3.拿当前点击按钮中的delete_id属性
4.做提醒效果
5.判断是否为true
6.真的话：向后端发送ajax请求，并且其中把主键id传入到后端
7.在路由层和视图层开设出相应的函数
8.后端拿到ajax发来的主键id，根据主键id删除数据库数据，并给前端返回一个结果
9.前端拿到返回结果并打印，并刷新页面
'''
# 存在的问题：
window.location.reload()
当有多个页面时，使用上面的方法，会直接刷新到首页，会给用户造成不好的体验
# 解决：
可以根据js代码自动删除，通过代码把tr标签删除
var $this = $(this); // 给this设置一个变量
// js代码自动刷新
$this.parent().parent().remove()
试验url是否可以用反向解析
# 试验url是否可以用反向解析
<script>
var $btn = $('.c1');
$btn.on('click',function () {
$.ajax({
url:'{% url "bl" %}',
type: 'post',
data:'',
succees:function () {
}
})
})
</script>
[02/Dec/2021 16:58:16] "POST /del_book/ HTTP/1.1" 200 15 # 发送了一个post请求，证明是可以的
结合第三方模块实现二次确认删除功能
{% block js %}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
var $btn = $('.c1'); // 找到c1标签
// 绑定点击事件
$btn.on('click',function (){
var delete_id = $(this).attr('delete_id'); // 拿当前点击按钮中的delete_id属性
var $this = $(this); // 给this设置一个变量
swal({
title: "确定要删除吗?",
text: "要想好哦!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
// 向后端发送ajax请求
$.ajax({
url:'/del_book/',
type:'post',
data:{'delete_id':delete_id},
success:function (args) {
// js代码自动刷新
$this.parent().parent().remove();
{#window.location.reload();#}
swal(args, {
icon: "success",
}
);
}
})
} else {
swal("取消成功!");
}
});
})
</script>
{% endblock %}
第三方模块：https://sweetalert.js.org
day9 图书设计项目的更多相关文章
- 图书检索系统C版本
原创,转载请注明出处! 程序具有一下功能窗口界面1,Input输入(读入文件,所有的文件都读入)2,Output输出(检验是否读取正确,从结构体数组读入)3,Length统计(此文件里有110本图书) ...
- 基于jsp+servlet图书管理系统之后台万能模板
前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- android版扫扫图书应用源码
书,是人类的灵魂. 扫扫图书是一个让你懂得如何去选择一本书的APP. 这里你可以扫描条形码查询图书, 你也可以关键字搜索,遇到合乎你口味的书, 你还可以看看别人的读书笔记,不同角度去体会. 注:请允许 ...
- 基于TXT文本的简单图书管理系统
1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...
- 【Python数据分析】Python3多线程并发网络爬虫-以豆瓣图书Top250为例
基于上两篇文章的工作 [Python数据分析]Python3操作Excel-以豆瓣图书Top250为例 [Python数据分析]Python3操作Excel(二) 一些问题的解决与优化 已经正确地实现 ...
- 【Python数据分析】Python3操作Excel-以豆瓣图书Top250为例
本文利用Python3爬虫抓取豆瓣图书Top250,并利用xlwt模块将其存储至excel文件,图片下载到相应目录.旨在进行更多的爬虫实践练习以及模块学习. 工具 1.Python 3.5 2.Bea ...
- 微信小程序之小豆瓣图书
最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有.了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序 ...
- Python项目之我的第一个爬虫----爬取豆瓣图书网，统计图书数量
今天,花了一个晚上的时间边学边做,搞出了我的第一个爬虫.学习Python有两个月了,期间断断续续,但是始终放弃,今天搞了一个小项目,有种丰收的喜悦.废话不说了,直接附上我的全部代码. # -*- co ...
随机推荐
- linked-list-cycle leetcode C++
Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without using ex ...
- Python 模块 itertools
python 2.6 引入了itertools模块,使得排列组合的实现非常简单: import itertools 有序排列:e.g., 4个数内选2个排列: >>> print l ...
- hdu 3047 Zjnu Stadium（并查集）
题意: 300个座位构成一个圈. 有N个人要入座. 共有M个说明 :A B X ,代表B坐在A顺时针方向第X个座位上.如果这个说明和之前的起冲突,则它是无效的. 问总共有多少个无效的. 思路: 并查集 ...
- POJ 2584 T-Shirt Gumbo（二分图最大匹配）
题意: 有五种衣服尺码:S,M,L,X,T N个人,每个人都有一个可以穿的衣服尺码的范围,例:SX,意思是可以穿S,M,L,X的衣服. 给出五种尺码的衣服各有多少件. 如果可以满足所有人的要求,输出 ...
- Dubbo框架协议总结
Dubbo支持的各种协议及相关特性及应用场景,均可在官网文档中找到. 支持的协议有dubbo.rmi.hession.http.webservice.thrift.memcached.redis.re ...
- Java-基础-HashMap
1. 简介 Java8 HashMap结构(数组 + 列表 + 红黑树)如图: 基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和 ...
- Centos6.8 yum报错及修复YumRepo Error: All mirror URLs are not using ftp, http[s] or file. Eg. Invalid
问题 使用yum安装软件时报错 YumRepo Error: All mirror URLs are not using ftp, http[s] or file. Eg. Invalid relea ...
- 7-7 后缀式求值 (25分)的python实现
exp=input().split() ls=list() def Cal(a,b,i): if i=="+": return a+b elif i=="-": ...
- ES6基础知识（Generator 函数应用）
1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达 function* main() { var result = yield request(& ...
- python接口之request测试：以json格式发送post请求，.json方法，查看响应结果的情况
json和dict python中的dict类型要转换为json格式的数据需要用到json库: import json <json> = json.dumps(<dict>) ...