通过idcard区分登陆的是商业还是客户
Show页面分为
商业
- 添加表格展示
- 添加按钮补进数量与价格调整
- 建立数据库联系
客户
- 添加按钮购买
- 添加表格
- 建立联系,点击购买减去购买的商品数量
身份为商业进入商业样式,身份为客户进入客户样式
def show(request):
'''将查询到的信息利用if进行区分'''
info=models.Super.objects.all()
if request.session['idd'] == '客户':
# return render(request,'show_kh.html',{'info':info})#单商品购买
return render(request,'show_kh2.html',{'info':info})#多商品一次性购买
else:
return render(request,'show_sy.html',{'info':info})
Html用上继承,数据相同,样式不同选择bootstrap中的样式
使用相同的表头
表格【没有加入模板】
模板【将导航栏作为模板,无论那个页面都显示】
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href={% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}>
<style>
.box{
width: 900px;
margin: 0 auto;
}
{% block css %}{% endblock css %}
</style>
</head>
<body>
<div class="box">
<nav class="navbar navbar-default">
<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="#">标题</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="#">第一个link <span class="sr-only">(current)</span></a></li>#}
{# <li><a href="#">第二个Link</a></li>#}
{# </ul>#}
<ul class="nav navbar-nav navbar-right">
<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="#">{{ request.session.user }}</a></li>
<li><a href="#">{{ request.session.idd }}</a></li>
<li><a href="#">更改密码</a></li>
<li role="separator" class="divider"></li>
<li><a href="/tuichu/">退出</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% block table %}{% endblock %}
</div>
<script src={% static 'js/jquery-3.6.0.min.js' %} ></script>
<script src={% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}></script>
</body>
</html>
将表格进行修改,先做一个单选,每行独自提交,【提交后也要更新数据库数据,提交后页面还是进入到该页面】【path中可携带id】【name值通过request.POST.get('num')获取要购买的数量】
path('<int:nid>/buy/',views.buy),
def buy(request,nid):#单购买,导入F库
models.Super.objects.filter(id=nid).update(number=F('number')-request.POST.get('num'))
return redirect('/show/')
path中的id来自跳转链接【获取的info中存在id,将id写入form表单的action即可】
{% extends 'nav.html' %}
{% block title %}客户{% endblock %}
{% block table %}
<table class="table table-hover">
<tr>
<td>商品名称</td>
<td>价格</td>
<td></td>
</tr>
{% for i in info %}
<tr>
<td>{{ i.name }}</td>
<td>{{ i.price }}</td>
<td>
<form action="/{{ i.id }}/buy/" method="post">
{% csrf_token %}
<input type="number" style="width: 50px;" placeholder="数量" name="num">
<input type="submit" value="√">
</form>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
单选结束,下面是多选,将form表单的位置向外扩,一直到包含table的第二个tr,【这里扩到了最外】【有多个数据,传递的name值为id,id各不相同】
{% extends 'nav.html' %}
{% block title %}客户{% endblock %}
{% block table %}
<form action="/mbuy/" method="post">
{% csrf_token %}
<table class="table table-hover">
...
</table>
<input type="submit" value="确认购买">
</form>
{% endblock %}
def mbuy(request):#一次性多购买
#print('---------->',request.POST)
'''以键值对进行存储,当没有选时,获取空
----------> <QueryDict: {'csrfmiddlewaretoken': ['5DgnCwtUgvIAX7R693HRtLUBqWKeVcrV9W28yaPQdyVMyQ1bFVOZ460GAPyOUDKa'], '1': ['3'], '2': [''], '3': ['3'], '4': [''], '5': ['3']}>
'''
l=list(request.POST)
for i in range(1,len(l)):#利用循环逐一减去
# print(l[i])
models.Super.objects.filter(id=l[i]).update(number=F('number') - request.POST.get(l[i]))
return redirect('/show/')
商业【点击更改,携带id跳转】
{% extends 'pattern.html'%}
{% block title %}商业{% endblock %}
{% block css %}
.change{
display: block;
background-color: rgb(128, 109, 232);
color: #fff;
width: 50px;
padding: 0 10px;
text-decoration: none;
}
{% endblock %}
{% block table %}
<table class="table table-hover">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
{% for i in info %}
<tr>
<td>{{ i.name }}</td>
<td>{{ i.number }}</td>
<td>{{ i.price }}</td>
<td>
<a href="#" class="change">更改</a>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
比如点商品1的更改跳至该页面【使用ModelForm商品名不可更改】【搭建与更改按钮的链接】
class EModelForm(IModelForm):#继承,不用再写构造方法,重写Meta
class Meta:
model = models.Super
fields = ['name', 'price','number']
widgets = {
'name': forms.TextInput(attrs={'disabled': 'disabled'}), # 单独设置样式
}
#urls.py中的path是path('<int:nid>/edit/',views.edit),
def edit(request,nid):#修改数量与价格
if request.method == 'GET':
row=models.Super.objects.filter(id=nid).first()
fm=EModelForm(instance=row)#将数据传入ModelForm,输入框中会显示查询出来的数据,在原有基础上进行更改,Number是补货数量,而非更改
return render(request,'edit.html',{'form':fm})
models.Super.objects.filter(id=nid).update(price=request.POST.get('price'),number=F('number')+request.POST.get('number'))#补货改价
return redirect('/show/')
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href={% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}>
<style>
.box{
width: 600px;
margin: 0 auto;
margin-top: 100px;
}
.font{
font-size: 20px;
font-weight: bold;
display: block;
margin-left: 43%;
}
</style>
</head>
<body>
<div class="box">
<span class="font">
gw获取修改
</span>
<div class="panel-body">
<form method="post" novalidate><!--novalidate关闭浏览器校验-->
{% csrf_token %}
{% for i in form %}
<div class="form-group">
<label>{{ i.label }}</label>
{{ i }}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">保存</button>
</form>
</div>
</div>
<script src={% static 'js/jquery-3.6.0.min.js' %} ></script>
<script src={% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}></script>
</body>
</html>
退出
def tuichu(request):
del request.session['user']
del request.session['pwd']
del request.session['idd']
return redirect('/index/')