Vue+Django REST framework实战

搭建一个前后端分离的生鲜超市网站
Django rtf 完成 商品列表页

并没有将列表页的数据json 与前端的页面展示结合起来

讲解如果将drf 返回的数据映射到vue的界面中

首先解决商品的分类

目录会有;两个接口,

一个是全部数据的接口。用于首页的全部分类。一级-二级-三级

mark

mark

另一个获取某一类的分类。以及商品数量

mark

为商品通过大类进行过滤条件的过滤。价格,销量的排序。分页。

价格区间功能。

mark

通过vue的插件我们可以查看到我们的具体的组件和页面结构。

mark

产品列表中是一堆router link 点击会跳转详情页,详情页实际是vue router路由。

开始开发类别数据接口

Serializer是需要我们为其准备一个Serializer的。

class CategorySerializer(serializers.ModelSerializer):
"""
商品类别序列化
"""
class Meta:
model = GoodsCategory
fields = "__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的数据。

mark

问题来了:

如何让一类数据包括二类数据。

Serializer中添加三级分类的Serializer

class CategorySerializer3(serializers.ModelSerializer):
class Meta:
model = GoodsCategory
fields = "__all__" class CategorySerializer2(serializers.ModelSerializer):
sub_cat = CategorySerializer3(many=True)
class Meta:
model = GoodsCategory
fields = "__all__" class CategorySerializer(serializers.ModelSerializer):
"""
商品一级类别序列化
"""
sub_cat = CategorySerializer2(many=True)
class Meta:
model = GoodsCategory
fields = "__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

 # 激活用户url
re_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

mark

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中

mark

然后添加我们的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路由。并不是我们后台的路径。

将数据的展示和路由交给了前端。后端只需要提供数据。

mark

tag页面为空。是因为我们导入数据时默认全部都不是tag

我们可以前往xadmin后台修改为进行导航。

mark

做了对于数据的遍历。

mark

也是同样进行遍历,不过当它是tag的时候才显示。

原文学习来自简书,作者:天涯明月笙
原文链接:https://www.jianshu.com/p/8140d983d1fd

7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)的更多相关文章

  1. 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

    4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍 天涯明月笙 关注 2018.02.20 19:23* 字数 762 阅读 135 ...

  2. 3- vue django restful framework 打造生鲜超市 - model设计和资源导入

    3- vue django restful framework 打造生鲜超市 - model设计和资源导入 使用Python3.6与Django2.0.2(Django-rest-framework) ...

  3. 6- vue django restful framework 打造生鲜超市 -完成商品列表页(下)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页下 drf中的request和response drf对于django的 ...

  4. 1- vue django restful framework 打造生鲜超市

    Vue+Django REST framework实战 使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支 ...

  5. 5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)

    使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...

  6. 2- vue django restful framework 打造生鲜超市 -环境搭建

    使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...

  7. 引爆潮流技术 Vue+Django REST framework打造生鲜电商项目

    引爆潮流技术Vue+Django REST framework打造生鲜电商项目 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受, ...

  8. Vue+Django REST framework打造生鲜电商项目

    1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

随机推荐

  1. windows7安装完上不了网

    安装完Windows7后发现上不了网,网卡驱动没有安装的原因:但是没有网怎么下载驱动呢,,先装一个网卡版驱动精灵(貌似叫驱动精灵万能网卡版)什么的安装一个网卡驱动,就解决了

  2. Bazinga HDU - 5510 不可做的暴力

    http://acm.hdu.edu.cn/showproblem.php?pid=5510 想了很久队友叫我用ufs + kmp暴力过去了. fa[x] = y表示x是y的子串,所以只有fa[x] ...

  3. python3+Appium自动化03-Appium元素检测

    需要导入方法NoSuchElementException from appium import webdriver from selenium.common.exceptions import NoS ...

  4. nginx中文手册内容说明

    1.什么是nginx? Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接, ...

  5. jQuery 结构的实现思路

    前提: 使用 JS 创建对象的最优办法,是 原型模式.   step1: 原型模式的基础使用方式     function fn(){}     fn.prototype = {}       var ...

  6. Soft skill

    不要害怕让别人看到自己的无知 作为高级程序员的一个好处是,当别人问一些我不懂的问题时,我可以很淡然地告诉他们: 这个东西我也不懂,因为以前没有遇到过,不过我可以看一下,然后再告诉你. 当我还是一个初级 ...

  7. ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第十天(非原创)

    文章大纲 一.课程介绍二.单点登录系统分析三.单点登录系统代码实战四.项目源码与资料下载五.参考文章   一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn ...

  8. hibernate课程 初探单表映射2-6 session详解(下)

    本节主要内容: 1 介绍了getCurrentSession和opensession的区别 2 demo:通过打印比较两个session是否相同,验证两个session是否是同一session 3 d ...

  9. ZR18提高5解题报告

    不想说啥了,比赛期间智商全程下线 A 设$f[i][j]$表示前$i$个位置,前缀和为$j$的方案数,转移的时候该位置放了什么,以及该位置之前的和是多少. 发现第二维可以前缀和优化. 不用管代码里的f ...

  10. Today is the first day of the rest of your life.

    Today is the first day of the rest of your life. 今天是你余下人生的第一天.