【Vue+DRF生鲜电商】01.课程结构介绍，开发环境搭建

欢迎访问我的博客专题

源码可访问 Github 查看

本文学习 boddy老师慕课网视频：https://coding.imooc.com/class/131.html

掌握技术和课程构成

掌握的技术：

• Vue + Django Rest Framework前后端分离
• Restful API开发流程
• Django Rest Framework功能实现
• Sentry线上系统错误日志监控告警
• 第三方登录
• 支付宝支付的集成
• 本地调试远程服务器代码的技巧

课程构成：

1. Vue前端项目
   1. API接口
   2. Vue组件
   3. Vue的项目组织结构分析
2. Django Rest Framework前后台功能
   1. Restful API开发全流程
   2. 通用view实现rest api接口
      1. ApiView方式实现api
      2. GenericView方式实现api
      3. Viewset和router方式实现api接口和url配置
      4. django_filter、SearchFilter、OrderFilter、分页
      5. 通用mixins
   3. 权限和认证
      1. Authentication用户认真设置
      2. 动态设置permission、Authentication
      3. Validators实现字段验证
   4. 序列化和表单验证
      1. Serializer
      2. ModelSerilizer
      3. 动态设置serializer
   5. 支付、登录和注册
      1. json web token实现登录
      2. 手机注册
      3. 支付宝支付
      4. 第三方登录
   6. 进阶开发
      1. Django Rest Framework部分核心源码解读
      2. 文档自动化管理
      3. Django Rest Framework缓存
      4. 通过Throttle对用户和ip进行限速
3. Xadmin后台管理系统（本文未使用）
4. 开发中常见问题
   1. 本地系统不能重现的bug，只能在线上遇到
   2. api接口出错不能及时的发现，或者难以找到错误栈
   3. api文档管理问题，不同人使用不同的风格去写文档，难以统一
   4. 大量url配置造成url配置越来越多难以维护
   5. 接口不及时去更新文档，对方不知道如何去测试接口，但写文档会花费大量的时间去维护
   6. 防止爬虫，针对api的访问频率做限制，比如一分钟、一小时或者一天用户的访问频率限制问题
   7. 某些页面将数据放入缓存，加速某些api的访问速度，商品分类数据变动小可以放到缓存中
5. 常见问题解决方案
   1. pycharm远程调试服务器代码，可以调试支付、第三方登录，还可以调试远程服务器的代码来重现服务器线上的bug
   2. 通过Docker发件sentry错误日志监控系统，不能可以得到线上的错误栈，还能及时在系统发生错误时收到邮件通知
   3. Django Rest Framework文档自动化管理，以及url的注册管理功能，会节省写文档的时间
   4. Django Rest Framework文档功能能直接在文档中测试将诶口、自动生成的js接口代码、shell测试代码和python测试代码
   5. Django Rest Framework提供的throttle来对api进行访问频率限制
   6. 引入第三方框架来设置某些api的缓存
6. Django进阶知识
   1. Django migrations原理
   2. Django信号量
   3. Django从请求到响应的完成过程
   4. 独立使用Django的Model
7. Vue知识点
   1. Vue技术选型分析
   2. API后端接口数据填充到Vue组件模板
   3. Vue代码接口分析

开发环境搭建

下载安装Pycharm和Python3。

安装的pip库

pip install -i https://pypi.douban.com/simple django djangorestframework markdown coreapi django-filter django-crispy-forms django-guardian django-ckeditor pillow django-cors-headers

vue环境

下载安装Webstorm、nodejs（安装完后使用node --version测试）、cnpm

npm安装特别慢，所以安装cnpm

访问 https://npm.taobao.org/ 可以看到安装说明

npm install -g cnpm --registry=https://registry.npm.taobao.org

复制vue源码文件到自定义的目录

image.png

使用命令安装依赖包

λ cd D:\LR@ProjectsSync\OneDrive\PycharmProjects\VueOnlineFreshSupermarket

D:\LR@ProjectsSync\OneDrive\PycharmProjects\VueOnlineFreshSupermarket  ([email protected])
λ cnpm install

安装时会在项目目录下创建一个node_modules文件夹，里面都是所有第三方包

运行前端项目

λ cnpm run dev

如果在不同的电脑运行这个，启动可能会报错，这时候只需要删除node_modules文件夹，然后运行cnpm install重新安装第三方包，最后cnpm run dev运行即可。

虚拟环境

使用PyCharm新建虚拟环境，

PS C:\Users\Admin> mkvirtualenv OnlineFreshSupermarket
Using base prefix 'd:\\apps\\python\\python36'
New python executable in C:\Users\Admin\Envs\OnlineFreshSupermarket\Scripts\python.exe
Installing setuptools, pip, wheel...done.
PS C:\Users\Admin> workon

Pass a name to activate one of the following virtualenvs:
==============================================================================
OnlineFreshSupermarket

创建Django项目

image.png

安装DRF，访问 https://www.django-rest-framework.org/ 可以看到介绍

>pip install djangorestframework
>pip install markdown django-filter

修改Django项目 settings.py 添加drf应用

image.png

时间设置

# LANGUAGE_CODE = 'en-us'
# 语言改为中文
LANGUAGE_CODE = 'zh-hans'
 
# TIME_ZONE = 'UTC'
# 时区改为上海
TIME_ZONE = 'Asia/Shanghai'
 
USE_I18N = True
 
USE_L10N = True
 
# USE_TZ = True
# 数据库存储使用时间，True时间会被存为UTC的时间
USE_TZ = False

添加drf路由

image.png

同步数据库，创建表，创建管理员

manage.py@DjangoOnlineFreshSupermarket > makemigrations
manage.py@DjangoOnlineFreshSupermarket > migrate

# 创建管理员
manage.py@DjangoOnlineFreshSupermarket > createsuperuser

访问 http://127.0.0.1:8000/admin/ 就可以使用创建的帐密登录后台

image.png

创建users应用

manage.py@DjangoOnlineFreshSupermarket > startapp users

创建apps包，用于放置所有的应用。将users应用移动到apps包中。右键apps---Mark Directory as---Sources Root

创建db_tools包，用于放置项目的脚本等

image.png

将apps加入项目的搜索路径之下，修改 settings.py 添加

import os
import sys

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.insert(0, BASE_DIR)
sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))

创建其他app

manage.py@DjangoOnlineFreshSupermarket > startapp goods
manage.py@DjangoOnlineFreshSupermarket > startapp trade
manage.py@DjangoOnlineFreshSupermarket > startapp user_operation

然后将这三个应用都拉入apps包

image.png