Django框架(十一)--子应用管理,电商项目

一、子应用管理

(一)静态系统

在各自的app当中,创建一个static目录,并在static下面创建各自app命名的目录。

子static:
在这里插入图片描述

将各自的静态文件放在各自的子static目录下的相应位置,在主目录下面创建主static目录。

主static:
在这里插入图片描述

子static目录:为了将各自的静态文件进行区分,管理。

主static目录:项目在运行期间,需要的文件。

(二)静态文件的收集

  1. 配置文件修改
  2. 执行收集命令
    在这里插入图片描述

选择确认重写
在这里插入图片描述

收集完成后将配置文件改回来
在这里插入图片描述

(三)子模板系统

在各自的app下面创建
在这里插入图片描述

settings.py配置
在这里插入图片描述

模板文件的使用方式
在这里插入图片描述

子路由系统

在各自app当中创建了一个urls.py文件,在主路由文件中使用include导入

目的:方便管理路由

二、电商项目

电商项目(买家/卖家)

1.Buyer页面修改(模型直接使用Saller中的模型)

2.模型修改

from django.db import models

# Create your models here.
class LoginUser(models.Model):
    email = models.EmailField()
    password = models.CharField(max_length=32)
    username = models.CharField(max_length=32,null=True,blank=True)

    # null针对数据库,True表示可以为空,即在数据库的存储中可以为空
    # blank 针对表单,表示在表单中该字段可以不填,但对数据库没有影响
    phone_number = models.CharField(max_length=11,null=True,blank=True)
    photo = models.ImageField(upload_to='img',null=True,blank=True)
    age = models.IntegerField(null=True,blank=True)
    gender = models.CharField(max_length=4,null=True,blank=True)
    address = models.TextField(null=True,blank=True)
    # 0卖家 1买家 2管理员
    user_type=models.IntegerField(default=1)

class GoodsType(models.Model):
    type_label=models.CharField(max_length=32)
    type_description=models.TextField()

class Goods(models.Model):
    goods_number = models.CharField(max_length=11,verbose_name='商品编号')
    goods_name = models.CharField(max_length=32,verbose_name='商品名称')
    goods_price = models.FloatField(verbose_name='价格')
    goods_count = models.IntegerField(verbose_name='数量')
    goods_location = models.CharField(max_length=254,verbose_name='产地')
    goods_safe_date = models.IntegerField(verbose_name='保质期')
    # 0下架 1在售
    goods_status = models.IntegerField(default=1,verbose_name='状态')
    goods_pro_time = models.DateField(verbose_name='生产日期',auto_now=True)
    picture=models.ImageField(upload_to='img')

    # 类型 一对多
    goods_type=models.ForeignKey(to=GoodsType,on_delete=models.CASCADE,default=1)
    # 店铺 一对多
    goods_store=models.ForeignKey(to=LoginUser,on_delete=models.CASCADE,default=1)

数据迁移

添加商品类别
在这里插入图片描述

3.Saller增加商品页

视图

@loginVaild
def goods_add(request):
    goods_type=GoodsType.objects.all()
    if request.method=='POST':
        data=request.POST
        goods=Goods()
        goods.goods_number = data.get('goods_number')
        goods.goods_name = data.get('goods_name')
        goods.goods_price = data.get('goods_price')
        goods.goods_count = data.get('goods_count')
        goods.goods_location = data.get('goods_location')
        goods.goods_safe_date = data.get('goods_safe_date')
        goods.goods_status = 1
        goods.picture = request.FILES.get('picture')
        goods.save()
        # select标签的value类型是string
        goods_type=request.POST.get('goods_type')
        # 自动强转
        goods.goods_type=GoodsType.objects.get(id=goods_type)
        user_id = request.COOKIES.get("userid")
        goods.goods_store = LoginUser.objects.get(id=user_id)
        goods.save()
    return render(request,'saller/goods_add.html',locals())

路由

在这里插入图片描述

模板

{% extends 'saller/base.html' %}

{% block title %}
  增加商品
{% endblock %}

{% block content %}
  <form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_number" class="form-control form-control-user" placeholder="商品编号">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_name" class="form-control form-control-user" placeholder="商品名称">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_price" class="form-control form-control-user" placeholder="商品价格">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_count" class="form-control form-control-user" placeholder="数量">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_location" class="form-control form-control-user" placeholder="产地">
  </div>
  <div class="form-group" style="height: 50px">
    <input type="text" name="goods_safe_date" class="form-control form-control-user" placeholder="保质期">
  </div>
    商品图片:
  <div class="form-group" style="height: 50px">
    <input type="file" name="picture" >
  </div>
  <div class="form-group">
     <select name="goods_type" class="btn btn-default dropdown-toggle btn-user btn-block">
         <option value="0" >--请选择类型--</option>
         {% for one in goods_type %}
              <option value="{{ one.id }}" >{{ one.type_label }}</option>
         {% endfor %}
     </select>
  </div>
  <div style="height: 50px">
    <input type="submit" value="添加" class="btn btn-primary btn-user btn-block">
  </div>
  </form>
{% endblock %}

4.制作Buyer父模板

base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>{% block title %}{% endblock %}</title>
	<link rel="stylesheet" type="text/css" href="/static/buyer/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/buyer/css/main.css">
	<script type="text/javascript" src="/static/buyer/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/buyer/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/buyer/js/slide.js"></script>
  {% block style %}

  {% endblock %}
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				<div class="login_info fl">
					欢迎您:<em>张 山</em>
				</div>
				<div class="login_btn fl">
          <a href="/Buyer/logout/">登出</a>
					<span>|</span>
					<a href="/Buyer/login/">登录</a>
					<span>|</span>
					<a href="/Buyer/register/">注册</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="#">用户中心</a>
					<span>|</span>
					<a href="#">我的购物车</a>
					<span>|</span>
					<a href="#">我的订单</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="/static/buyer/images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	{% block content %}
  {% endblock %}

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话:010-****888    京ICP备*******8号</p>
	</div>
  {% block script %}
  {% endblock %}
	<script type="text/javascript" src="/static/buyer/js/slideshow.js"></script>
	<script type="text/javascript">
		BCSlideshow('focuspic');
		var oFruit = document.getElementById('fruit_more');
		var oShownum = document.getElementById('show_count');

		var hasorder = localStorage.getItem('order_finish');

		if(hasorder)
		{
			oShownum.innerHTML = '2';
		}

		oFruit.onclick = function(){
			window.location.href = 'list.html';
		}
	</script>
</body>
</html>

index.html继承

在这里插入图片描述

5.修改index页面路径

作为一个web前端页面,不需要登录也能访问,使用域名直接访问首页

修改主urls.py文件

在这里插入图片描述

修改头部导航条

  • 没有登录时,显示登录和注册按钮
  • 登录后,显示欢迎语、登出和注册按钮
    在这里插入图片描述

6.商品首页显示数据

目的:首页显示商品,包括类型和类型下的商品

视图

返回了类型
在这里插入图片描述

模板

首先遍历类型
在这里插入图片描述

通过反向查询,找到该类型下的所有商品
在这里插入图片描述

7.增加类型图片

  1. 修改类型表模型
  2. 增加类型图片
  3. 修改模板

8.优化index.html

类型下的商品每一行显示4条

如果商品数量大于等于4条,显示4条,按照goods_price倒序

如果不足4条,不显示该类型

可以使用切片

  • 如果大于4条,使用切片
  • 小于4条,显示所有

视图

在这里插入图片描述

模板

在这里插入图片描述

9.商品类别的显示更多

给index模板中的显示更多设置路径

在这里插入图片描述

路由

在这里插入图片描述

视图

import math
def goods_list(request):
    keywords=request.GET.get('keywords')
    goods_type=GoodsType.objects.get(id=keywords)
    goods = goods_type.goods_set.all()
    comment=goods_type.goods_set.order_by('-goods_price')[:math.ceil(len(goods)/5)]
    return render(request,'buyer/goods_list.html',locals())

goods_list模板

{% extends 'buyer/base.html' %}
{% block title %}
  查看更多
{% endblock %}
{% block content %}
  <div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav">
					<li><a href="#" class="fruit">新鲜水果</a></li>
					<li><a href="#" class="seafood">海鲜水产</a></li>
					<li><a href="#" class="meet">猪牛羊肉</a></li>
					<li><a href="#" class="egg">禽类蛋品</a></li>
					<li><a href="#" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="#" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>
  <div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
	</div>
	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
          {% for one in comment %}
					<li>
						<a href="#"><img src="/static/{{ one.picture }}"></a>
						<h4><a href="#">{{ one.goods_name }}</a></h4>
						<div class="prize">{{ one.goods_price }}</div>
					</li>
          {% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<div class="sort_bar">
				<a href="#" class="active">默认</a>
				<a href="#">价格</a>
				<a href="#">人气</a>
			</div>

			<ul class="goods_type_list clearfix">
        {% for good in goods %}
				<li>
					<a href="#"><img src="/static/{{ good.picture }}"></a>
					<h4><a href="#">{{ good.goods_name }}</a></h4>
					<div class="operate">
						<span class="prize">{{ good.goods_price }}</span>
						<a href="#" class="add_goods" title="加入购物车"></a>
					</div>
				</li>
        {% endfor %}
			</ul>

			<div class="pagenation">
				<a href="#">上一页</a>
				<a href="#" class="active">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="#">下一页></a>
			</div>
		</div>
	</div>
{% endblock %}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章