Vue + drf 打造前后端分离的生鲜电商平台 —— 周报 1

最新推荐文章于 2023-08-03 13:51:53 发布

MartinHub

最新推荐文章于 2023-08-03 13:51:53 发布

阅读量938

点赞数 1

分类专栏： Django项目笔记

本文链接：https://blog.csdn.net/weixin_40824913/article/details/86522295

版权

Django项目笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

		                    ——————  学习周报 2019.1.20

在这里插入图片描述

掌握的技术：

Vue + Django REST framework 前后端分离技术
restful api 开发流程
Django REST framework 的功能实现和核心源码分析
Sentry 完成线上系统的错误日志的监控和警告
第三方登录和支付宝支付的集成
本地调试远程服务器代码技巧

完成情况：

开发环境搭建 —— vue
model设计和资源导入
- 项目初始化
- user models 设计
- goods 的 model 设计
- trade 交易的 model 设计
- user_operation 用户操作的 model 设计
- migrations 原理及表生成
- xadmin后台管理系统的配置
- 导入商品与商品类别数据
vue的结构和 restful api 介绍 —— 基本概念、源码结构

笔记：

1、开发环境搭建

安装 webstorm；
安装 nodejs， cnpm，并配置cnpm （具体安装步骤配置在另一篇博客）

运行项目：online-store
- 切换到该文件目录下，打开命令行界面输入： cnpm install ，安装依赖包
- 输入 cnpm run dev —— 就可以独立的运行前端项目。
- 浏览器输入：http://localhost:8080 （但是无本地mock数据）
  
  解决：修改online-store下的src / axios / index.js：获取用户个人中心uid。

在这里插入图片描述

显示正常，成功获取本地mock数据：

2、model设计和资源导入

2.1 项目初始化:
- 新建虚拟环境 Vueshop: mkvirtualenv -p D:\Python3\python.exe Vueshop
- 安装 Django REST framework：官方文档
  注：Django REST framework支持的版本：
  - pip install djangorestframework
  - pip install -i https://pypi.douban.com/simple django==1.11.3
  - pip install markdown
  - pip install django-filter
- 安装mysql驱动：pip install mysqlclient
- 安装图片处理的包： pip install -i https://pypi.douban.com/simple pillow
- 新建pycharm项目： Mxshop
- 做基本配置 —— 数据库mysql，package( apps，extra_apps)，directory( media，db_tools )
- 做 settings.py 配置
2.2 user models 设计:
- apps / users / models.py :

# 1、用户：
    name = models.CharField(max_length=30, null=True, blank=True, verbose_name="姓名")
    birthday = models.DateField(null=True, blank=True, verbose_name="出生年月")
    gender = models.CharField(max_length=6, choices=(("male", u"男"), ("female", "女")), default="female", verbose_name="性别")
    mobile = models.CharField(null=True, blank=True, max_length=11, verbose_name="电话")
    email = models.EmailField(max_length=100, null=True, blank=True, verbose_name="邮箱")

# 2、短信验证码：
    code = models.CharField(max_length=10, verbose_name="验证码")
    mobile = models.CharField(max_length=11, verbose_name="电话")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

2.3 goods 的 model 设计:
- apps / goods / models.py :

# 1、商品类别
    CATEGORY_TYPE = (
        (1, "一级类目"),
        (2, "二级类目"),
        (3, "三级类目"),
    )
   
    name = models.CharField(default="", max_length=30, verbose_name="类别名", help_text="类别名")
    code = models.CharField(default="", max_length=30, verbose_name="类别code", help_text="类别code")
    desc = models.TextField(default="", verbose_name="类别描述", help_text="类别描述")
    category_type = models.IntegerField(choices=CATEGORY_TYPE, verbose_name="类目级别", help_text="类目级别")
    （父类别）parent_category = models.ForeignKey("self", null=True, blank=True, verbose_name="父类目级别", help_text="父目录",
                                        related_name="sub_cat")
    is_tab = models.BooleanField(default=False, verbose_name="是否导航", help_text="是否导航")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 2、品牌名
    category = models.ForeignKey(GoodsCategory, related_name='brands', null=True, blank=True, verbose_name="商品类目")
    name = models.CharField(default="", max_length=30, verbose_name="品牌名", help_text="品牌名")
    desc = models.TextField(default="", max_length=200, verbose_name="品牌描述", help_text="品牌描述")
    image = models.ImageField(max_length=200, upload_to="brands/")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 3、商品
    category = models.ForeignKey(GoodsCategory, verbose_name="商品类目")
    goods_sn = models.CharField(max_length=50, default="", verbose_name="商品唯一货号")
    name = models.CharField(max_length=100, verbose_name="商品名")
    click_num = models.IntegerField(default=0, verbose_name="点击数")
    sold_num = models.IntegerField(default=0, verbose_name="商品销售量")
    fav_num = models.IntegerField(default=0, verbose_name="收藏数")
    goods_num = models.IntegerField(default=0, verbose_name="库存数")
    market_price = models.FloatField(default=0, verbose_name="市场价格")
    shop_price = models.FloatField(default=0, verbose_name="本店价格")
    goods_brief = models.TextField(max_length=500, verbose_name="商品简短描述")
    （导入DjangoUeditor到extra_apps）goods_desc = UEditorField(verbose_name=u"内容", imagePath="goods/images/", width=1000, height=300,
                              filePath="goods/files/", default='')
    ship_free = models.BooleanField(default=True, verbose_name="是否承担运费")
    goods_front_image = models.ImageField(upload_to="goods/images/", null=True, blank=True, verbose_name="封面图")
    is_new = models.BooleanField(default=False, verbose_name="是否新品")
    is_hot = models.BooleanField(default=False, verbose_name="是否热销")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 4、首页商品类别广告
    category = models.ForeignKey(GoodsCategory, related_name='category',verbose_name="商品类目")
    goods =models.ForeignKey(Goods, related_name='goods')

# 5、商品轮播图
    goods = models.ForeignKey(Goods, verbose_name="商品", related_name="images")
    image = models.ImageField(upload_to="", verbose_name="图片", null=True, blank=True)
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 6、轮播的商品
    goods = models.ForeignKey(Goods, verbose_name="商品")
    image = models.ImageField(upload_to='banner', verbose_name="轮播图片")
    index = models.IntegerField(default=0, verbose_name="轮播顺序")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 7、热搜词
    keywords = models.CharField(default="", max_length=20, verbose_name="热搜词")
    index = models.IntegerField(default=0, verbose_name="排序")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

2.4 trade 交易的 model 设计:
- apps / trade / models.py :

# 1、购物车
    user = models.ForeignKey(User, verbose_name=u"用户")
    goods = models.ForeignKey(Goods, verbose_name=u"商品")
    nums = models.IntegerField(default=0, verbose_name="购买数量")
    add_time = models.DateTimeField(default=datetime.now, verbose_name=u"添加时间")

# 2、订单
    ORDER_STATUS = (
        ("TRADE_SUCCESS", "成功"),
        ("TRADE_CLOSED", "超时关闭"),
        ("WAIT_BUYER_PAY", "交易创建"),
        ("TRADE_FINISHED", "交易结束"),
        ("paying", "待支付"),
    )

    user = models.ForeignKey(User, verbose_name="用户")
    order_sn = models.CharField(max_length=30, null=True, blank=True, unique=True, verbose_name="订单号")
    trade_no = models.CharField(max_length=100, unique=True, null=True, blank=True, verbose_name=u"交易号")
    pay_status = models.CharField(choices=ORDER_STATUS, default="paying", max_length=30, verbose_name="订单状态")
    post_script = models.CharField(max_length=200, verbose_name="订单留言")
    order_mount = models.FloatField(default=0.0, verbose_name="订单金额")
    pay_time = models.DateTimeField(null=True, blank=True, verbose_name="支付时间")

    # 用户信息
    address = models.CharField(max_length=100, default="", verbose_name="收货地址")
    signer_name = models.CharField(max_length=20, default="", verbose_name="签收人")
    singer_mobile = models.CharField(max_length=11, verbose_name="联系电话")

    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 3、订单的商品详情
    order = models.ForeignKey(OrderInfo, verbose_name="订单信息", related_name="goods")
    goods = models.ForeignKey(Goods, verbose_name="商品")
    goods_num = models.IntegerField(default=0, verbose_name="商品数量")

    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

2.5 user_operation 用户操作的 model 设计:
- apps / user_operation / models.py :

# 1、用户收藏
    user = models.ForeignKey(User, verbose_name="用户")
    goods = models.ForeignKey(Goods, verbose_name="商品", help_text="商品id")
    add_time = models.DateTimeField(default=datetime.now, verbose_name=u"添加时间")

# 2、用户留言
    MESSAGE_CHOICES = (
        (1, "留言"),
        (2, "投诉"),
        (3, "询问"),
        (4, "售后"),
        (5, "求购")
    )
    user = models.ForeignKey(User, verbose_name="用户")
    message_type = models.IntegerField(default=1, choices=MESSAGE_CHOICES, verbose_name="留言类型",
                                      help_text=u"留言类型: 1(留言),2(投诉),3(询问),4(售后),5(求购)")
    subject = models.CharField(max_length=100, default="", verbose_name="主题")
    message = models.TextField(default="", verbose_name="留言内容", help_text="留言内容")
    file = models.FileField(upload_to="message/images/", verbose_name="上传的文件", help_text="上传的文件")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

# 3、用户收货地址
    user = models.ForeignKey(User, verbose_name="用户" )
    province = models.CharField(max_length=100, default="", verbose_name="省份")
    city = models.CharField(max_length=100, default="", verbose_name="城市")
    district = models.CharField(max_length=100, default="", verbose_name="区域")
    address = models.CharField(max_length=100, default="", verbose_name="详细地址")
    signer_name = models.CharField(max_length=100, default="", verbose_name="签收人")
    signer_mobile = models.CharField(max_length=11, default="", verbose_name="电话")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加时间")

2.6 migrations 原理及表生成:
- makemigrations：但是这个改动还没有作用到数据库文件,数据库没有增加新的表;
- migrate ：这时候才真的把作用到数据库文件,产生对应的表;
- 表 django_migrations：记录每一次 make 的操作;
- “直接在数据表更改”和“利用migrations”不要混用。
2.7 xadmin后台管理系统的配置：
- extra_apps 下导入 / xadmin，对应app下导入adminx.py；
- 配置url，setting；
- 安装xadmin依赖包：
  - github 搜索 xadmin：
  - 安装依赖包（不用指定版本）： pip install django-crispy-forms django-reversion django-formtools future httplib2 six
  - 做Excel文件导出的包：pip install xlwt xlsxwriter
- 做 migrations 生成相关数据表：
- 创建超级用户登录： creatsuperuser
2.8 导入商品与商品类别数据:
- 导入media、db_tools
- 在 db_tools 下编写脚本：独立使用django的model
- 例：导入的商品类别
- 例：导入的商品数据
* 点入具体商品后，里面是破图：
- 解决方法：配置setting、urls： media

3、vue的结构和 restful api 介绍

3.1 restful api:（一种规范、标准）:

在这里插入图片描述

概念：链接地址 ------- 实践：链接地址
3.2 vue基本概念
- webpack —— js 第三方工具，很强大；
- vue —— 框架；vuex —— 组件间通信； vue-router —— vue组件跳转； axios —— 用来替代 ajax 请求；
- ES6 —— ECMAScript 6.0 是 JaveScript 的下一个版本标准；babel —— 转换器：ES6 转换为 ES5；
3.3 vue源码结构 —— online-store

另一篇我的博客：前后端分离优缺点

下周计划：

完成“ 商品列表页” 功能
- Django 的 view 实现商品列表页
- Django 的 serializer 序列化 model
- apiview 方式实现商品列表页
- drf 的 modelserializer 实现商品列表页功能
- GenericView 方式实现列表页和分页功能详解
- viewsets 和 router 完成商品列表页
- drf 的 Apiview、GenericView、Viewset 和 router的原理分析
- drf 的 request 和 response
- drf 的过滤
- drf 的搜索和排序

MartinHub

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Vue + drf 打造前后端分离的生鲜电商平台 —— 周报 1

—————— 学习周报 2019.1.20掌握的技术：Vue + Django REST framework 前后端分离技术restful api 开发流程Django REST framework 的功能实现和核心源码分析Sentry 完成线上系统的错误日志的监控和警告第三方登录和支付宝支付的集成本地调试远程服务器代码技巧...
复制链接

扫一扫