9.填充数据与Vue交互

开始使用Drf

填充goodsCategory数据

了解related_name

1531923553457.png

以淘宝为例子，我们会发现对于商品类别，在数据库设计的时候会出现一级商品类、二级商品类，还有三级商品类等等。

这个时候我们就要用到related_name （反向查询）

1531923926592.png

首先定义model类

1531925140264.png

这样之后我们去浏览我们的api会发现

1531924456013.png

parent_category下没有任何东西，他是作为父类的。就是说二级商品类并没有显示出来，这个时候我们需要去使用related_name

让他作为二级商品类去重新声名这个内容

1531924576251.png

1531924596940.png

三级商品类同样

1531924661491.png

1531924994684.png

注意：many= true必须加，他表示多条数据。不加会出现错误

获取单条详情

1531931662397.png

继承mixins.RetrieveModelMixin就可以了，其实他们就是一个

1531931699139.png

1531931704916.png

1531931724335.png

在地址栏中输入id就可以获取相应的内容了

跨域的问题（前后端分离）

文档

地址：https://github.com/ottoyiu/django-cors-headers

设置

1531932346400.png

添加APP

1531932364962.png

官方说'corsheaders.middleware.CorsMiddleware',这个必须放在'django.middleware.common.CommonMiddleware',这个前面

1531932391505.png

Middleware配置

1531932458929.png

设置为true

启动Vue

npm run dev 启动Vue项目

1531932746169.png

我们要根据Vue中匹配的url地址来写django项目中的url 或者根据django中的url来修改vue中的url地址，总之两个要相同

也就是我们需要启动这两个项目，在本地调试的过程中，Vue会从

http://127.0.0.1:8001/goods/GoodsCategory

这样类似的url地址中获取商品类别的信息。

1531932879439.png

他所匹配的地址是

http://127.0.0.1:8001/goods/categorys/id/或者http://127.0.0.1:8001/goods/categorys

步骤

1.首先我们要知道Vue会专门写一个api.js的接口

1531971325616.png

1531971355816.png

其中包括了各类从url地址栏中获取内容的方法

2.紧接着各类组件会去调用这些方法来获取数据

1531971427527.png

分为template script 以及style

其中template就是我们的模板。

style就是我们的样式。

1531971533798.png

这里获取商品类别列表，将数据赋值给AllMenuLabel

1531971591359.png

再在前台调用这些内容。

显示商品详情

每一个商品都有各自的一个id，当用户点击的时候，url中会出现不同的id号。根据api的方法请求相应的url地址。传到django中获取数据

1531987240458.png

比如我这里点击生鲜食品的一级类。他会传入一个363的id

1531987307443.png

在drf中生鲜食品所对应的id就是363

1531987347154.png

并且根据Vue中的api，他所请求的地址也是http://127.0.0.1:8000/goods/GoodsCategory/363/

这样正好做了一个映射

接下来实现显示商品的功能

1531987626096.png

更新地址

1531987851010.png

虽然已经能够显示内容，但是你会发现不论我们点击哪个，商品的内容始终无法根据类别发生改变

其实右上角52个商品已经表明，你所显示的是所有的商品，而不是部分商品，这时候我们要做筛选，即我们点击一级商品类，左边显示二级商品类，右边显示三级商品类内容。这些都有id控制。

1531988045639.png

1531989801432.png