开源web框架django知识总结（十六）

开源web框架django知识总结（十六）

商品列表页

前端页面简单分析：

1、html

比较 list.html 与user_center_info.html，注意用法区别

欢迎您：<em>[[ username ]]</em>
欢迎您：<em>{
   {
    username }}</em>

2、js

Vue中的computed属性

自己的理解：

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控

Vue中mounted的简单理解

mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。官方文档的解释如下，钩子函数的官方链接为 https://cn.vuejs.org/v2/api/#mounted ，生命周期函数图示链接为 https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
自理解，通常是为 metheds 函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数）

商品列表页分析

1. 商品列表页组成结构分析

1.面包屑导航

• 可以使用三级分类ID，查询出该类型商品的三级分类数据。

2.排序和分页

• 无论如何排序和分页，商品的分类不能变。
• 排序时需要知道当前排序方式。
• 分页时需要知道当前分页的页码，且每页五条商品记录。

3.热销排行

• 热销排行中的商品分类要和排序、分页的商品分类一致。

• 热销排行是查询出指定分类商品销量前二的商品。

2. 商品列表页接口设计和定义

1.请求方式

选项	方案
请求方法	GET
请求地址	/list/(?P<category_id>\d+)/(?P<page_num>\d+)/?sort=排序方式

2.请求参数：路径参数 和 查询参数

参数名	类型	是否必传	说明
category_id	string	是	商品分类ID，第三级分类
page_num	string	是	当前页码
sort	string	否	排序方式

3.响应结果：HTML

list.html

4.接口定义 goods.views.py

from django.views import View
from django.http import JsonResponse
# Paginator:分页器
from django.core.paginator import Paginator,EmptyPage
from .models import SKU