Django第二课 银行账户管理系统开发
Posted 笔触狂放
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django第二课 银行账户管理系统开发相关的知识，希望对你有一定的参考价值。
概念
本文在上一篇文章基础之前进行构建和完善
账户信息的分页显示
用户通过点击首页的“查询账户”，进入账户信息查询页面
则点击该按钮触发点击事件，向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第二课 银行账户管理系统开发的主要内容，如果未能解决你的问题，请参考以下文章