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

一时失言乱红尘 2022-12-01 11:51 178阅读 0赞

### 前台商品展示 ###

*  前言
 *   *  谈谈Django和Flask框架的特点
     *  谈谈你对AJAX的理解
     *  谈谈你对前后端分类的理解
 *  项目步骤
 *   *  功能分析
     *  商品详情
     *  成果图
     *  逻辑分析
     *  代码展示
     *  查看更多(难点)
     *   *  成果图
         *  逻辑分析
         *  代码展示
         *  弊端
         *  优化
         *   *  效果图

# 前言 #

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

## 谈谈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还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。  
应用场景：更多商品中的上下分页。

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

前后端分离模型指的是后端只负责返回数据，不再负责渲染页面。前端负责渲染数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]

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

# 项目步骤 #

## 功能分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]

## 商品详情 ##

## 成果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]

## 逻辑分析 ##

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

## 代码展示 ##

templates/buyer/index.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]

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),#详情
    
    ]

## 查看更多(难点) ##

### 成果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 4]

### 逻辑分析 ###

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

### 代码展示 ###

templates/buyer/list.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 5]

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})

**记得配置路由**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 7]

### 弊端 ###

![在这里插入图片描述][20200826195144699.png_pic_center]  
复杂且无聊

### 优化 ###

可以使用drf 框架可以简化API接口的开发  
1、下载drf 框架  
Pip install djangorestframework  
2、安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 8]

3、使用APIView  
Serializer.py  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 9]

视图类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 10]

路由：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 11]

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 12]

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  # 返回本身（图片路径）
            }

路由：  
![在这里插入图片描述][20200826200148919.png_pic_center]

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

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

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 13]

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  # 返回本身（图片路径）
            }

路由：  
![在这里插入图片描述][20200826200307789.png_pic_center]

这里就直接用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 15]

#### 效果图 ####

![在这里插入图片描述][20200826200443322.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 16]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5c86e7a9b63142e5adab81b3ecb26ed5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/97eee1afd5ae49b6ba0e2dccd61ca968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4fd5b1ecb58f41858c8e00f392569dcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0701f3cbee9b4960933c8344016031c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/ccb8e3c439e24c189209eaf3bc868fd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/c5648c03bbfc4046a1540660a8d0e1e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/85b8843908eb4dc8a70e343ff63b10fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/0a6ed60a369746afb665a3674ee3518b.png
[20200826195144699.png_pic_center]: /images/20221123/6beb5a58436c433eb8c8fd210cef90a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/99556c3954b34d89b35b51b3793f00df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/0d55a99d1ff64d54a0ab28c17326a632.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/0445ed9a08b944848f82a1de9535a270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/95a186c9483a4f55bd2b582ba7273490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/c0655965a22942ceb29d860c3b218bf0.png
[20200826200148919.png_pic_center]: /images/20221123/ff91dddd74a946e19f9a5e4ae9829ded.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/90253a9c33514c25aa81f2b94d97086d.png
[20200826200307789.png_pic_center]: /images/20221123/5d9abe97c90847dd996cf1e9039c02b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/269e83cb9f314cf6b35a1c1881ddeef3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/0c6722210eb749608520140c291aa869.png
[20200826200443322.png_pic_center]: /images/20221123/ab54282890a54fba9bba5c649c3d5281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/331e642f60954c0681b85ba3e00481fc.png