7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)
Vue+Django REST framework实战
搭建一个前后端分离的生鲜超市网站
Django rtf 完成 商品列表页
并没有将列表页的数据json 与前端的页面展示结合起来
讲解如果将drf 返回的数据映射到vue的界面中
首先解决商品的分类
目录会有;两个接口,
一个是全部数据的接口。用于首页的全部分类。一级-二级-三级
另一个获取某一类的分类。以及商品数量
为商品通过大类进行过滤条件的过滤。价格,销量的排序。分页。
价格区间功能。
通过vue的插件我们可以查看到我们的具体的组件和页面结构。
产品列表中是一堆router link 点击会跳转详情页,详情页实际是vue router路由。
开始开发类别数据接口
Serializer是需要我们为其准备一个Serializer的。
class CategorySerializer(serializers.ModelSerializer):"""商品类别序列化"""class Meta:model = GoodsCategoryfields = "__all__"
对于分类进行筛选。但是不需要进行分页。分页用于数据量很大的情况。
class CategoryViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):"""list:商品分类列表数据retrieve:获取商品分类详情"""queryset = GoodsCategory.objects.all()serializer_class = CategorySerializer
这里的注释要如上图所示写清楚。才能让后面生成文档更方便。
- 配置到我们的url中
# 配置goods的url,这个basename是干啥的
router.register(r'goods', GoodsListViewSet, base_name="goods")# 配置Category的url
router.register(r'categories', CategoryViewset, base_name="categories")
http://127.0.0.1:8000/categories/
这里将我们所有的目录数据全部拿了出来。而我们期望的是有一个顺序的层次结构。
queryset = GoodsCategory.objects.filter(category_type=1)
将查询所有数据改为只获取category类型为1的数据。
问题来了:
如何让一类数据包括二类数据。
Serializer中添加三级分类的Serializer
class CategorySerializer3(serializers.ModelSerializer):class Meta:model = GoodsCategoryfields = "__all__"class CategorySerializer2(serializers.ModelSerializer):sub_cat = CategorySerializer3(many=True)class Meta:model = GoodsCategoryfields = "__all__"class CategorySerializer(serializers.ModelSerializer):"""商品一级类别序列化"""sub_cat = CategorySerializer2(many=True)class Meta:model = GoodsCategoryfields = "__all__"
这里的sub_cat 是因为我们在自身的继承关系中将这种关系进行了命名
models.py:
parent_category = models.ForeignKey("self", on_delete=models.CASCADE, null=True, blank=True, verbose_name="父类目级别", help_text="父目录",related_name="sub_cat")
如何通过一级分类(parents)拿到二级分类,一类对象直接father.subcat
此时的sub_cat就变成了拿到的二类数据,但是对于此时拿到的二类数据,我们依然希望它进行序列化。
因为我们此时通过一类拿到的二类有很多,所以必须加上
many = True
的参数
如果不加这个参数会产生报错:
AttributeError at /categories/
Got AttributeError when attempting to get a value for field `sub_cat` on serializer `CategorySerializer2`.
The serializer field might be named incorrectly and not match any attribute or key on the `RelatedManager` instance.
Original exception text was: 'RelatedManager' object has no attribute 'sub_cat'.
问题又来了: 现在我们获取的是所有的category,如何获取具体某一个下面的。
点击生鲜食品,左侧出现的是生鲜食品下面的具体分类。
目标: 获取列表页里面的详情页
让我们的viewset 多继承一个mixins.retrievemodelmixin
class CategoryViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
这里我们需要遵循restful api 对于某一个商品详情获取的推荐
GET /zoos/ID:获取某个指定动物园的信息
在获取某个商品详情的时候会把id加进来
但是其实drf 已经帮我们做好了(做好到我们甚至可以不用配置这个url)。之前的课程我们如何配置url来满足id
# 激活用户urlre_path('active/(?P<active_code>.*)/', ActiveUserView.as_view(), name= "user_active"),
通过?p将正则获取到的参数放入active_code里面
但是其实这个工作viewset已经帮我们做了。一但我们进行了register的注册。
只要我们继承了RetrieveModelMixin就可以直接通过id进行获取。
http://127.0.0.1:8000/categories/1/
此时返回的就是一个dict,而不是一个数组了。
Vue展示商品分类数据
将category的数据和vue进行联调。
首先需要解决的问题是跨域的问题。
跨域问题是前后端分离的项目中非常常见的问题。
我们先找一下category是在哪里编码又是如何将数据映射进来的呢
category也是在head里面
src/views/head/head.vue
getMenu函数调用了getCategory函数,getcatgory函数在哪里呢。
getMenu(){//获取菜单getCategory({params:{}}).then((response)=> {console.log(response)this.allMenuLabel = response.data}).catch(function (error) {console.log(error);});},
可以看到我们的import
import { getHotSearch, getCategory ,deleteShopCart } from '../../api/api'
我们的get category方法位于src/api/api.js中
//获取商品类别信息
export const getCategory = params => {if('id' in params){return axios.get(`${host}/categorys/`+params.id+'/');}else {return axios.get(`${host}/categorys/`, params);}
};
里面有getCategory 函数,这种写法是es6的写法。
es6中的箭头函数params =>
传递一个params,如果params中有id那么,通过axios获取接口
axios.get(`${host}/categorys/`+params.id+'/');
- 如果没有id值,请求接口
axios.get(`${host}/categorys/`, params);
${host}
是取值我们的域名
let host = 'http://shop.projectsedu.com';
这个函数是一个共有函数,export
估计是暴露导出供大家使用。
解决了详情或所有的通用性问题
目前host指向的老师线上的环境
如何调试接口。很多地方我们都用到了host。
我们新建一个自己的host然后慢慢替换。
let local_host = 'http://127.0.0.1:8000'
然后将localhost 放入我们要调试的部分替换host
if('id' in params){return axios.get(`${local_host}/categories/`+params.id+'/');}else {return axios.get(`${local_host}/categories/`, params);}
Failed to load resource: net::ERR_CONNECTION_REFUSED
后端的服务没有启动。获取不到。启动之后
Failed to load http://127.0.0.1:8000/categories/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.
不允许跨域访问的请求
前端npm也是可以完成跨域的,一般通过proxy代理。
设置服务器完成跨域
django-cors-headers
Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)
pip install django-cors-headers
INSTALLED_APPS = (...'corsheaders',...
)
添加进安装的app中
然后添加我们的middleware
要放的尽可能靠前,在csrfview之前。
添加参数为true及设置白名单
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ('127.0.0.1:3000'
)
数据是如何填充进来的,简单介绍一下
getMenu(){//获取菜单getCategory({params:{}}).then((response)=> {console.log(response)this.allMenuLabel = response.data}).catch(function (error) {console.log(error);});},
将response的数据,放入了allMenuLabel
在head.vue中,使用v-for进行遍历
<li class="first" v-for="(item,index) in allMenuLabel" @mouseover="overChildrenmenu(index)" @mouseout="outChildrenmenu(index)"><router-link :to="'/app/home/list/'+item.id">{{item.name}}</router-link> </h3>
router-link 是指向前端的vue_router路由。并不是我们后台的路径。
将数据的展示和路由交给了前端。后端只需要提供数据。
tag页面为空。是因为我们导入数据时默认全部都不是tag
我们可以前往xadmin后台修改为进行导航。
做了对于数据的遍历。
也是同样进行遍历,不过当它是tag的时候才显示。
7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)相关推荐
- 10- vue django restful framework 打造生鲜超市 -用户登录和手机注册(中)
Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 手机注册和用户登录(中) Json Web Token的原理 因为我们的drf 的 ...
- 21- vue django restful framework 打造生鲜超市 -首页商品分类显示功能
Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 线上演示地址: http://vueshop.mtianyan.cn/ github源代码 ...
- 5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
- 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
- Vue+Django REST framework打造生鲜电商项目
1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...
- python全栈生鲜电商_Vue+Django REST framework 打造生鲜电商项目(学习笔记一)
1.环境搭建 所需软件的版本: 1)pycharm(使用professional版本) 2)mysql.navicat 安装好的mysql后需要给root权限,不然只能通过localhost访问本地的 ...
- Django REST framework+Vue 打造生鲜超市(五)
六.商品类别数据展示 6.1. 商品类别数据接口 (1)商品分类有两个接口: 一种是全部分类:一级二级三级 一种是某一类的分类以及商品详细信息: 开始写商品分类的接口 (2)序列化 给分类添加三级分类 ...
- Django REST framework+Vue 打造生鲜超市(四)
目录 生鲜超市(一) 生鲜超市(二) 生鲜超市(三) 生鲜超市(四) 生鲜超市(五) 生鲜超市(六) 生鲜超市(七) 生鲜超市(八) 生鲜超市(九) 生鲜超市(十) ...
- Django REST framework+Vue 打造生鲜超市(三)
代码下载 github 教程 学习自慕课网-前端vue结合后端DjangoFramework的在线生鲜超市 四.xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugi ...
最新文章
- 如何撰写将赢得客户青睐的自由职业者提案和免费模板
- 你不知道的z-index
- GLSL实现图像处理
- Vue的阻止冒泡与阻止默认
- Linux sync命令的作用分析
- Ping记录时间的方法
- go语言暂停命令_go test命令(Go语言测试命令)完全攻略
- sqlserver2017不允许保存更改
- BP神经网络(Python代码实现)基于pytorch
- ROS仿真环境安装与配置
- ADS系列 - 混频器设计 - 混频器原理介绍及仿真1
- 五个免费数据采集工具网站
- 影响蓝牙耳机音质的是什么因素?拒绝踩雷,这五款蓝牙耳机赶紧收藏
- 某建筑设计研究院“综合布线管理软件”应用实践
- C++ 多种定义的getline函数使用
- 计算机应用领域中CAL代表,计算机应用领域.doc
- 成都.NET俱乐部的第3次聚会^_^
- jdk32位安装包下载_神灯地图大数据采集软件下载_神灯地图大数据采集软件 v4.6.0 官方版...
- 【蓝桥杯】历届试题 青蛙跳杯子(广度优先搜索bfs)
- 武汉晴川学院计算机专业分数线,武汉晴川学院录取分数线2021是多少分(附历年录取分数线)...
热门文章
- Android安卓手机APP应用自有keystore签名证书怎么生成?
- 基于java+springboot+mybatis+vue+elementui的口红电子购物商城
- 南通20l0年C语言单招试卷,江苏省单招计算机原理试题汇总
- 《新财富》500富人榜 参考
- Java 里的异常(Exception)详解
- ue4 发射子弹功能
- 八款最优秀的免费翻译相关软件推荐
- PSP 1000, PSP 2000, PSP 3000, PSP Go 相关
- c语言arc函数带几个参数,ARC的使用简要总结
- DCT算法可以说是有损压缩的第一步,多用在视频压缩方面。