关键词:
概念
本文在上一篇文章基础之前进行构建和完善
账户信息的分页显示
用户通过点击首页的“查询账户”,进入账户信息查询页面
则点击该按钮触发点击事件,向django服务器发出请求
接着我们在urls.py中需要定义与该地址进行匹配的地址,并匹配后跳转至views.py文件中执行对应该功能的方法
views.py
# 创建方法,用于从数据库中查询出所有的账户信息
# 将所有信息发送给展示列表信息的页面
def getAccountList(request):
#当前要显示第几页的数据,由用户决定
#获得用户使用get请求发送过来的页码参数
# 对获得页码参数的代码进行捕获异常
try:
ym = request.GET["ym"]
except:
# 只要以上代码报错,那么就会执行这里面的代码
# 上面的代码报错的原因是因为没有获得ym这个参数
# ym默认设置为1
ym=1
# 查询Account表中所有数据,将数据转换成字典的格式
accounts=Account.objects.all().values()
# [
# 'id': 1, 'password': '666666',
# 'name': '马云', 'personId': '360105197204171611',
# 'blance': 2000.12, 'openDate': '2022-10-20',
# 'id': 2, 'password': '888888',
# 'name': '雷军', 'personId': '360105197807181615',
# 'blance': 61235.78, 'openDate': '2021-12-10',
# 'id': 3, 'password': '999999',
# 'name': '马斯克', 'personId': '360105198010181604',
# 'blance': 548976.11, 'openDate': '2018-1-16'
# ]
# 创建分页器对象,
# 第一个参数表示从数据库中查询出来的总数据
# 第二个参数表示设置每页显示多少条数据
p=Paginator(accounts,10)
# 从分页器中根据当前页码来获得当前页的对象
page=p.get_page(ym)
#从当前页对象中获得出数据列表
accounts=page.object_list
# 获得所有分页的总页数的迭代器
yms=p.page_range
return render(request,"accountList.html","accounts":accounts,"page":page,"yms":yms)
根据该代码,可理解,通过浏览器给定页码,进行获取对应的页码的列表数据发送给浏览器上进行展示,如果浏览器未指定页码,则服务器默认获取第一页的数据发送给浏览器,因此我们需要创建展示列表信息的html页面,其代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账户信息列表页面</title>
<style type="text/css">
table
border-width: 0px;
background-color: cadetblue;
padding: 10px;
width: 900px;
text-align: center;
border-radius: 10px;
clear: right;
input
width: 60px;
padding: 5px;
border-width: 0px;
border-radius: 5px;
color: white;
input.btn_up
background-color: #4bede4;
input.btn_del
background-color: #ff5860;
float: right;
margin-bottom: 10px;
width: 100px;
input.btn_up:hover
background-color:#16DCED ;
input.btn_del:hover
background-color: #FF1719;
td
padding: 5px;
#nav
width: 900px;
height: 40px;
margin-top: 10px;
a
text-decoration: none;
margin: 3px;
background-color: cadetblue;
a:hover
background-color: #FF1719;
a.c_page
background-color: #FF1719;
a.up_page,a.do_page
width: 80px;
height: 40px;
padding: 5px 10px;
border-radius: 5px;
color: white;
a.p_page
width: 40px;
height: 40px;
padding: 3px;
border-radius: 5px;
color: white;
</style>
<script type="text/javascript">
//定义方法,当用户点击某一条数据的修改按钮,触发点击事件
//将该修改按钮对应的账号信息获取过来
function getId(id)
//alert("获得的id为:"+id)
//将账号发送给服务器,让服务器把账号作为条件查询数据库
//从数据库中将该账号对应的用户的账户信息全部查询出来
//发送给修改页面上进行显示,供用户修改
//将获得的id通过http的get请求将数据以键值对的形式拼接在访问地址的后面以?隔开
location.href="/getAccountById?id="+id;
//定义方法,用户点击全选按钮的时候,触发该方法
function c_all(obj)
//obj:是全选按钮标签的对象
//先判断当前状态是选中还是未选中
//如果当前状态是未选中状态,状态要变为选中
//如果当前状态是选中状态,状态要变为未选中状态
//通过class选择器为cb的条件获得数据行上的所有多选按钮
cbs=document.getElementsByClassName("cb");
for (let i = 0; i <cbs.length ; i++)
cbs.item(i).checked=obj.checked;
//定义方法,当反选按钮被点击,数据行中的原本选中的变为未选中,原本未选中的变为选中的
function c_no()
cbs=document.getElementsByClassName("cb");
for (let i = 0; i <cbs.length ; i++)
cbs.item(i).checked=!cbs.item(i).checked;
//定义方法,当用户点击删除按钮,弹出提示对话框,提示用户是否需要删除选中的数据
//如果要删除,检测所有数据行中哪些多选按钮被选中了
//获得这个多选按钮同一个行中的账号id
function btn_del()
//获得所有数据行中的多选按钮
cbs=document.getElementsByClassName("cb");
tds=document.getElementsByClassName("td_id")
str="";
for (let i = 0; i <cbs.length ; i++)
//判断每一条数据中哪些多选按钮是选中状态
if (cbs.item(i).checked)
//获取所有被勾选上的数据的账号id
var id=tds.item(i).innerHTML;
str+=id+","
//设置确定对话框
result=window.confirm("您是否确定要删除当前选中的账户?");
if (result)
location.href="/deleteById?ids="+str;
//定义方法,用于处理分页导航栏的样式
function a_style()
//通过class选择器获得分页导航栏对象
var aElements=document.getElementsByClassName("p_page");
for (var i = 0; i < aElements.length; i++)
var text=aElements.item(i).innerHTML;
if (text<10)
aElements.item(i).innerHTML=" "+text+" ";
</script>
</head>
<body onload="a_style()">
<div align="center" style="width: 900px;margin: auto">
<h1>账户信息列表</h1>
<p><input type="button" class="btn_del" onclick="btn_del()" value="删除"></p>
<table>
<tr>
<th width="190px"><input type="checkbox" onclick="c_all(this)">全选<input type="checkbox" onclick="c_no()">反选</th>
<th>账号</th>
<th>密码</th>
<th>姓名</th>
<th>身份证号</th>
<th>余额</th>
<th>开户日期</th>
<th>操作</th>
</tr>
% for account in accounts %
<tr>
<td width="190px"><input type="checkbox" class="cb"></td>
<td class="td_id"> account.id </td>
<td> account.password </td>
<td> account.name </td>
<td> account.personId </td>
<td> account.blance </td>
<td> account.openDate </td>
<td>
<input type="button" class="btn_up" onclick="getId( account.id )" value="修改">
</td>
</tr>
% endfor %
</table>
<!-- 显示页码导航栏 -->
<div id="nav" align="center">
<!-- 上一页 -->
<!-- 判断当前页是否有上一页,如果有上一页则显示上一页的按钮,否则就不显示上一页 -->
% if page.has_previous %
<a href="/Accounts/?ym= page.previous_page_number " class="up_page">上一页</a>
% endif %
<!-- 页码 -->
% for ym in yms %
% if page.number == ym %
<a href="/Accounts/?ym= ym " class="p_page c_page"> ym </a>
% else %
<a href="/Accounts/?ym= ym " class="p_page"> ym </a>
% endif %
% endfor %
<!-- 下一页 -->
% if page.has_next %
<a href="/Accounts/?ym= page.next_page_number " class="do_page">下一页</a>
% endif %
</div>
</div>
</body>
</html>
最终通过点击查询账户按钮,可查看到以下效果:
该页面的分页效果类似于百度网站的分页效果,这里供读者进行学习和参考,如果读者有更好的效果,可在本代码基础上进行完善。
批量删除以及全选和反选删除功能
在该列表展示页面中,我们也需要完成对于数据的批量删除功能,在前端页面上完成全选和反选供的代码是通过javascript的方式实现的,读者可通过学习html代码中的功能,结合运行的效果进行学习和理解。
当用户勾选在需要删除的账户信息后,点击删除后的同时,我们这里将选中的账户信息的主键id拼接成字符串以逗号隔开的方式作为参数使用get请求发送给服务器
我们在服务器中urls.py文件中定义接收的地址
views.py文件中进行数据解析和分解,完成删除
# 创建方法,接收页面上用户想要删除的数据对应的账号
def deletes(request):
# 1,3,5,7,9,
ids=request.GET["ids"]
# 将字符串按逗号进行分割
list1=str(ids).split(",")
for id in list1:
# 判断每一次循环的数据是否是数字
if id.isdigit():
# 将该id作为条件删除数据库的数据
ac=Account.objects.get(id=id)
ac.delete()
return redirect(getAccountList)
从数据库中删除完成后,我们需要立即刷新列表,进行数据库和浏览器页面的同步显示
django第二课基于django图书借阅管理网站平台(代码片段)
概念本文在上一篇文章之上完成登录,图书显示,关键字搜索以及分页功能登录功能实现当用户在首页进行输入学生用户信息后,点击登录按钮发送请求给服务器,地址请求为:/toLogin/urls.pypath('toLogin/',views.to... 查看详情
django第三课银行账户管理系统开发(代码片段)
概念本文基于第二篇文章基础之上完成修改功能修改功能的完成在列表展示页面点击任意一个账户进行修改,则将该账户的id发送给服务器,服务器将根据该id查询数据库,将要修改的数据发送给修改页面上进行显示 ... 查看详情
django第三课银行账户管理系统开发(代码片段)
概念本文基于第二篇文章基础之上完成修改功能修改功能的完成在列表展示页面点击任意一个账户进行修改,则将该账户的id发送给服务器,服务器将根据该id查询数据库,将要修改的数据发送给修改页面上进行显示 ... 查看详情
django第一课银行账户管理系统开发(代码片段)
概念django服务器开发框架是一款基于Python编程语言用于web服务器开发的框架,采用的是MTV架构模式进行分层架构。项目的搭建1.打开pycharm开发软件,打开开发软件的内置dos窗口操作命令行在这里指定项目存放的磁盘路径... 查看详情
django第二课基于django图书借阅管理网站平台(代码片段)
概念本文在上一篇文章之上完成登录,图书显示,关键字搜索以及分页功能登录功能实现当用户在首页进行输入学生用户信息后,点击登录按钮发送请求给服务器,地址请求为:/toLogin/urls.pypath('toLogin/',views.to... 查看详情
jsp第二课servlet入门学习(代码片段)
什么是Servletservlet是由sun公司提供的一门用于开发动态web资源的技术Servlet的核心是javax.servlet.Servlet接口,所有的Servlet必须实现这个接口ServletAPIServletAPI包含于两个包中,分别是javax.servlet和javax.servlet.http在后期的课程中以... 查看详情
零基础学html5和css3前端开发第二课(代码片段)
第二章表格和表单知识点:1.表格2.表单重点:1.表格web1.0当时比较火的标签元素,行、列结构。excel,电子表格。默认格式<table> <thead><tr><th>...</th></tr></thead> <tfoot><tr>< 查看详情
零基础学html5和css3前端开发第二课(代码片段)
第二章表格和表单知识点:1.表格2.表单重点:1.表格web1.0当时比较火的标签元素,行、列结构。excel,电子表格。默认格式<table> <thead><tr><th>...</th></tr></thead> <tfoot><tr>< 查看详情
django第十二课classmeta(代码片段)
Classmeta: 通过一个内嵌类"classMeta"给你的model定义元数据,类似下面这样:classFoo(models.Model):bar=models.CharField(maxlength=30)classMeta:#...Model元数据就是"不是一个字段的任何数据"--比如排序选项,admin选项等等.下面是所有可能用到的Meta选... 查看详情
第二课第一周大作业--构建和评估一个线性风险模型(代码片段)
之前教程:第二课第一周第1节-AI用于医学预后简介第二课第一周第2节-做医学预后,你需要掌握什么?第二课第一周第3-4节-什么是预后?第二课第一周第4-7节医学预后案例欣赏+作业解析第二课第一周第8节风险得分... 查看详情
第二课第一周大作业--构建和评估一个线性风险模型(代码片段)
之前教程:第二课第一周第1节-AI用于医学预后简介第二课第一周第2节-做医学预后,你需要掌握什么?第二课第一周第3-4节-什么是预后?第二课第一周第4-7节医学预后案例欣赏+作业解析第二课第一周第8节风险得分... 查看详情
第二课第一周大作业--构建和评估一个线性风险模型(代码片段)
之前教程:第二课第一周第1节-AI用于医学预后简介第二课第一周第2节-做医学预后,你需要掌握什么?第二课第一周第3-4节-什么是预后?第二课第一周第4-7节医学预后案例欣赏+作业解析第二课第一周第8节风险得分... 查看详情
jsp第二课servlet入门学习(代码片段)
本次课程内容是即【Jsp】第二课Servlet入门学习(一) 文章之后编写。url-pattern详解1.完全匹配 必须以"/"开始 ◦例如:/hello /a/b/c2.目录匹配 必须以"/"开始 以"*"结束 ◦例如:/a/* /*3.后缀名匹配 ... 查看详情
第二课unit8ldap网络用户账户
1.yuminstallsssdkrb5-workstationautofs-y sssd ##系统安全守护进程 krb5-workstation ##kerberos身份认证协议客户端 autofs ##自动挂载650)this.width= 查看详情
领域驱动设计系列贫血模型和充血模型(代码片段)
面向过程的设计方式(贫血模型)假设现在有一个银行支付系统项目,其中的一个重要的业务用例是账户转账业务。系统使用迭代的方式进行开发,在1.0版本中,该用例的功能需求非常简单,事件流描述如下:主事件流:用户登... 查看详情
python爬虫学习第二课(代码片段)
python爬虫学习之requests模块request响应内容requestpost请求状态码文件上传获取cookie会话维持解析json添加header认证设置一认证设置二异常处理request响应内容#request响应内容importrequestsresponse=requests.get('http://www.baidu.com')print(type... 查看详情
个人银行账户管理程序(代码片段)
这个程序是一个银行账户管理的程序,是用C++来实现程序功能的,该程序包含六个文件,其中有date.h头文件是日期类的头文件,date.cpp是日期类的实现文件,accumulator.h是按日将数值累加的accumulator类的头文件,account.h是各个... 查看详情
第二课第一周第4-7节医学预后案例欣赏+作业解析(代码片段)
第二课第一周第4-7节医学预后案例欣赏+作业解析视频地址:B>Tina-姐预后的案例在这节课中,我们将看看预后临床例子。看看预后任务的输入和输出是什么样子的,以及我们如何权衡输入之间的权重。我们可以把... 查看详情