从项目中学习Django 天天生鲜---------前台商品展示

前言

在讲解商品展示前必然需要科普一些理论知识

谈谈Django和Flask框架的特点

首先，两者都是非常优秀的框架。整体来讲，两者设计的哲学是区别最大的地方。
Django:
Django属于重量级框架，主要特点是大而全,集成了很多组件,例如: Models、 Email、 Form 等等,属于全能型框架。但是灵活和自由度不高。Django能开发小应用，但总会有“杀鸡焉用牛刀”的感觉。
Flask:
Flask属于轻量级框架，主要特点小而轻,原生组件几乎为0，第三方库的选择面广。Flask自由、灵活，可扩展性强，非常适用于小型网站。并且适用于开发web服务的API。
但是对于大型网站开发，需要设计路由映射的规则（蓝图），否则导致代码混乱。

谈谈你对AJAX的理解

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步JavaScript和XML”。即使用JavaScript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）还有JSON数据。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
应用场景：更多商品中的上下分页。

谈谈你对前后端分类的理解

前后端分离模型指的是后端只负责返回数据，不再负责渲染页面。前端负责渲染数据。

WEB 前后端分离优点：
1、前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小。
2、后台错误不会直接反映到前台，用户体验比较友好。
3、由于后台是很难去探知前台页面的分布情况，而这又是JS的强项。前后台各尽其职可以最大程度的减少开发难度。

项目步骤

功能分析

商品详情

成果图

逻辑分析

• 当用户点击商品时自动跳转到该商品的详情界面上
• 所以我们要分析后台是如何判断用户点击的是那个商品,这个商品能证明自己的身份的是什么?
• 证明商品必然是具有唯一的标识,商品的唯一标识则为id,所以当我们前台跳转时需要传该商品的id给后台,后台通过传入的id则查出该商品和商品类型

代码展示

templates/buyer/index.html

buyer/views.py

.......
# 详情
def detail(request):
    id=request.GET.get("id")
    goods_obj=Goods.objects.get(id=id)
    buyer_id = request.COOKIES.get("buyer_id")
    goods_obj_list=Goods.objects.filter(goodstype_id=goods_obj.goodstype_id).all()
    return render(request,"buyer/detail.html",locals()

路由配置
buyer/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index),#首页
    path('index',views.index),#首页
    path('login',views.login),#登录
    path('email_login',views.email_login),#邮箱登录
    path('get_yzm_ajax',views.yzm_ajax),#获取邮箱验证码
    path('logout',views.logout),#登出
    path('register',views.register),#注册
    #新加
    path('detail',views.detail),#详情

]

查看更多(难点)

成果图

逻辑分析

• 逻辑和详情差不多,但是这里我们以前后端分离的形式做,即后端只负责返回数据，不再负责渲染页面。前端负责渲染数据
• ajax应该传那些数据给后端,后端应该返回那些数据给ajax进行渲染
• 根据详情的逻辑,ajax应该传选中的商品类型id给后端,后端通过商品类型id找到该商品类型下所有商品对象,形成字典拼接到列表中然后传给前端然后读取访问渲染页面

代码展示

templates/buyer/list.html

buyer/views.py

def more_list_view(request):
    goodstype_id=request.GET.get("goodstype_id")
    goodstype_obj=GoodsType.objects.get(id=goodstype_id)
    goods_list=goodstype_obj.goods_set.all()
    #用于存储每个商品的详细信息
    results=[]
    for goods in goods_list:
        results.append({
     'id':goods.id,'name':goods.name,'price':goods.price,'bzq':goods.bzq,'sczp':goods.sczq,'image':goods.image.name,'desc':goods.desc})
    return  JsonResponse({
     "results":results})

记得配置路由

弊端

复杂且无聊

优化

可以使用drf 框架可以简化API接口的开发
1、下载drf 框架
Pip install djangorestframework
2、安装

3、使用APIView
Serializer.py

视图类

路由：

效果：

4、使用mixins类
视图函数：

from rest_framework import generics
from rest_framework import mixins


class GoodsView1(generics.GenericAPIView, mixins.ListModelMixin):

    # 复写此方法，给父类的 queryset 赋值。
    def get_queryset(self):
        goodstype_id = self.request.GET.get('goodstype_id')
        goods_obj_list = models.Goods.objects.filter(goodstype_id=goodstype_id)
        return goods_obj_list

    # 传递序列化类
    serializer_class = GoodsSerializer

    # 当前get 方式请求的时候自动执行，因为
    # ListModelMixin中的 list()方法帮我们实现返回json数据。
    def get(self, request):
        return self.list(request)

    # 解决图片url 是 绝对路径的问题。
    def get_serializer_context(self):
        return {
     
            # 'request': self.request,
            # 'format': self.format_kwarg,
            'view': self  # 返回本身（图片路径）
        }

路由：

使用分页：
Settings.py 中配置信息：

REST_FRAMEWORK = {
     
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',  # 分页器
    'PAGE_SIZE': 2  # 每页返回的条数
}

效果：

5、通用视图类（重点）

 #通用视图类(重点!!!)
 #generics.ListAPIView 是对mixins 的进一步封装。简化了用户的编码。
class GoodsView2(generics.ListAPIView):

    def get_queryset(self):
        goodstype_id = self.request.GET.get('goodstype_id')
        goods_obj_list = models.Goods.objects.filter(goodstype_id=goodstype_id)
        return goods_obj_list

    serializer_class = GoodsSerializer

    def get_serializer_context(self):
        return {
     
            # 'request': self.request,
            # 'format': self.format_kwarg,
            'view': self  # 返回本身（图片路径）
        }

6、viewset使用(了解)

class GoodsView3(viewsets.ModelViewSet):

    def get_queryset(self):
        goodstype_id = self.request.GET.get('goodstype_id')
        goods_obj_list = models.Goods.objects.filter(goodstype_id=goodstype_id)
        return goods_obj_list

    serializer_class = GoodsSerializer

    def get_serializer_context(self):
        return {
     
            # 'request': self.request,
            # 'format': self.format_kwarg,
            'view': self  # 返回本身（图片路径）
        }

路由：

这里就直接用

效果图