django项目-电商平台(3)-首页和商品列表

介绍

这部分主要是,添加一个商品类和分类类,在首页根据分类来列出一些商品,而列出的顺序可以是,时间顺序,点击量,或是价格排序

1. 创建模型类

添加商品类和分类类,两表之间是一对多的关系


class TypeInfo(models.Model):
    ttitle = models.CharField(max_length=20)
    isDelete = models.BooleanField(default=False) #使用逻辑删除
    def __str__(self): #这里是 在admin显示的内容
        return self.ttitle
class GoodInfo(models.Model):
    gtitle = models.CharField(max_length=50)
    gpic = models.ImageField(upload_to='df_goods') #这个其实存的是路劲,admin中添加时同时上传了文件,需要pillow
    gprice = models.DecimalField(max_digits=5, decimal_places=2)
    isDelete = models.BooleanField(default=False)
    gunit = models.CharField(max_length=20,default='500g')
    gclick = models.IntegerField()#点击量
    gintro = models.CharField(max_length=100)#简介
    gdetial = HTMLField()
    gtype = models.ForeignKey("TypeInfo") #外键
    gkucun = models.IntegerField(default=0)  # 库存


    # gadv = models.BooleanField(default=False)#推荐 广告商品
    def __str__(self):
        return self.gtitle

不要忘了生成迁移,然后在admin.py里注册,,这两个模型类,可以在admin里造一点数据。

2. 建立视图函数

首页视图

这里首先获得所有的分类,然后遍历这个分类列表,将其中的查询到的商品分别按id和点击量倒叙排的前四个,并将他们按键值的方式,储存到context字典中。模板中就可以根据分类来获得不同的商品列表并显示出来

def index(request):
    context = {'guest_cart': 1,
               'title': '首页'}

    #获得最新火的4 个 商品
    hot = GoodInfo.objects.all().order_by('-gclick')[0:4]
    context.setdefault('hot',hot)

    #****获得各分类下的点击商品************
    # 先获得所有分类
    typelist = TypeInfo.objects.all()
    for i in range(len(typelist)):
        # 获得type对象
        type = typelist[i]
        # 根据type对象获取商品列表
        # 通过外键关联获取商品
        # 获取 对应 列表中的通过 id 倒序排列的 前四个
        goods1 = type.goodinfo_set.order_by('-id')[0:4]
        goods2 = type.goodinfo_set.order_by('-gclick')[0:4]
        key1 = 'type' + str(i)  # 根据id 倒叙排列
        key2 = 'type' + str(i) + str(i)  # 根据点击量倒序排列
        context.setdefault(key1, goods1)
        context.setdefault(key2, goods2)
    print(context)
    return render(request, 'df_goods/index.html', context)

商品分类列表

点击首页的分类导航,进入商品的分类列表,该列表主要显示这类商品下的所有商品,并提供按时间,点击量,价格排序的功能,还有分页

#商品列别界面,要接受多个参数
#1,type id
#2. 排序 的方式
#3. 分页的页码
def list(request,tid,sid,pindex):
    from django.core.paginator import Paginator,Page

    type = TypeInfo.objects.get(pk=int(tid))
    news = type.goodinfo_set.order_by('-id')[0:2]
    if sid == '1':
        good_list = type.goodinfo_set.order_by('-id')#按时间最新的排列
    if sid == '2':
        good_list = GoodInfo.objects.filter(gtype_id=int(tid)).order_by('-gprice')#按价格
    if sid == '3':
        good_list = GoodInfo.objects.filter(gtype_id=int(tid)).order_by('-gclick')

    #创建paginator分页对象
    paginator = Paginator(good_list,10)
    #返回Page对象,包含商品信息
    page = paginator.page(int(pindex))

    context = {'title':'商品列表',
               'guest_cart':1,
               'page':page,
               'paginator':paginator,
               'typeinfo':type,
               'sort':sid,#排序方式
               'news':news,



                }

    return render(request,'df_goods/list.html',context)

这里要根据视图函数的参数来设计url,一个参数 分类id,排序方式,和页码,所以这样写url

url(r'^list_(\d+)_(\d+)_(\d+)$',views.list),

模板中的分页是这样完成的

<div class="pagenation">
{#            判断是否是第一页#}
                {% if page.has_previous %}
                <a href="/list_{{ typeinfo.id }}_{{ sort }}_{{ page.previous_page_number }}">上一页</a>
                {% endif %}
{#            paginator.page_range为页码总数#}
                {% for pindex in paginator.page_range %}
{#                    是否为当前页#}
                    {% if page.number == pindex %}
                    <a href="/list_{{ typeinfo.id }}_{{ sort }}_{{pindex}}" class="active">{{ pindex }}</a>
                    {% else %}
                    <a href="/list_{{ typeinfo.id }}_{{ sort }}_{{pindex}}">{{ pindex }}</a>
                    {% endif %}
                {% endfor %}
                {% if page.has_next %}
                <a href="/list_{{ typeinfo.id }}_{{ sort }}_{{ page.next_page_number }}">下一页></a>
                {% endif %}
            </div>

商品详情页面

商品详情页面的url是这样设定的

url(r'^(\d+)$',views.detail),

详情页就是将查询到的商品信息,添加到模板页面里,详情页里的商品数量的加减以及小计和加入购物车可以用js完成

def detail(request,id):
    goods = GoodInfo.objects.filter(pk=int(id)).first()
    goods.gclick += 1 #点击量加1
    goods.save()
    from df_cart.models import Cart
    #返回用于显示购物车内商品总数
    cart_count = Cart.objects.filter(user_id=request.session.get('uid',0)).count()
    news = goods.gtype.goodinfo_set.order_by('-id')[0:2]
    context = {'title':goods.gtype.ttitle,
               'goods':goods,
                'cart_count':cart_count,
               'news':news,
               'guest_cart':1,
               'typeinfo':goods.gtype
               }
    response = render(request,'df_goods/detail.html',context)

    #接下来,要将浏览信息,存入 cookie ,以便 最近浏览 功能使用
    #存入 cookie 的形式微 { 'gooids':'1,5,6,7,8,9'}
    #id间已逗号隔开
    goodids = request.COOKIES.get('goodids','')
    if goodids != '':
        goodidsl = goodids.split(',') #将字符串 拆分成 列表
        if goodidsl.count(id) >=1 :#先判断 是否已经存在列表里
            #如果已经存在,则删除存在的元素,之后会插入新的
            goodidsl.remove(id)
        #将新的id放在 列表的 第一个
        goodidsl.insert(0,id)
        if len(goodidsl) >=6:#如果超过 6个,则删除最后一个,相当于长度为5的队列
            del goodidsl[5]
        goodids = ','.join(goodidsl)#将列表,以逗号分割的形式 拼接为字符串
    else:#如果为空则 直接 添加
        goodids = id


    response.set_cookie('goodids',goodids)

    return  response

这里还有一个重要问题是浏览历史问题,当进入到详情页后,将这件商品的id存入cookie里,然后在需要的地方解析出商品即可

这是计算小计和数量加减的js

 <script>
    function plus() {
        num = parseFloat($('.num_show').val());
        $('.num_show').val(num+1);
        $('.num_show').blur();
        
    }
    function minus() {
        num = parseFloat($('.num_show').val());
        $('.num_show').val(num-1);
        $('.num_show').blur();

    }
    $(function () {
        $('.num_show').blur(function () {
             num = parseFloat($('.num_show').val());
             price = parseFloat($('#gprice').text());
             total = num*price;
             $('#gtotal').text(total.toFixed(2)+'元')

        })
        
    })
    

在此商品展示的部分就完了,下一部分是购物车。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,431评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,594评论 18 139
  • 那夜 月亮很大 我向你吐露心底埋藏很久的话 你无言,我亦无语 看着你眼睛弯成了线 我想你就是我今生要寻的人 我说我...
    叫我东哥阅读 120评论 0 1
  • 每个人都曾遇见过这样一个人 想他的时候 怕他知道 又怕他不知道 更怕他明明知道却装作不知道 他说- 我喜欢那种...
    白小菜菜阅读 410评论 0 0