您现在的位置是: 网站首页 >Django >Vue+Django REST framework前后端分离生鲜电商 Django
【Vue+DRF生鲜电商】01.课程结构介绍,开发环境搭建
admin2019年4月21日 11:18 【Django | Python | Vue 】 2218人已围观
Vue+Django REST framework前后端分离生鲜电商简介 Vue+Django REST framework 打造前后端分离的生鲜电商项目(慕课网视频)。 Github地址:https://github.com/xyliurui/DjangoOnlineFreshSupermarket ; Django版本:2.2、djangorestframework:3.9.2。 前端Vue模板可以直接联系我拿。
本文学习 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` 4. 支付、登录和注册 1. json web token实现登录 2. 手机注册 3. 支付宝支付 4. 第三方登录 5. 进阶开发 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库 ```bash 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/ 可以看到安装说明 ```bash npm install -g cnpm --registry=https://registry.npm.taobao.org ``` 复制vue源码文件到自定义的目录 ![BLOG_20190421_112544_25](/media/blog/images/2019/04/BLOG_20190421_112544_25.png "博客图集BLOG_20190421_112544_25.png") 使用命令安装依赖包 ```bash λ cd D:\LR@ProjectsSync\OneDrive\PycharmProjects\VueOnlineFreshSupermarket D:\LR@ProjectsSync\OneDrive\PycharmProjects\VueOnlineFreshSupermarket (webpack-test@1.0.0) λ cnpm install ``` 安装时会在项目目录下创建一个`node_modules`文件夹,里面都是所有第三方包 运行前端项目 ```bash λ cnpm run dev ``` 如果在不同的电脑运行这个,启动可能会报错,这时候只需要删除`node_modules`文件夹,然后运行`cnpm install`重新安装第三方包,最后`cnpm run dev`运行即可。 ## 虚拟环境 使用PyCharm新建虚拟环境, ```bash 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项目 ![BLOG_20190421_112619_46](/media/blog/images/2019/04/BLOG_20190421_112619_46.png "博客图集BLOG_20190421_112619_46.png") 安装DRF,访问 https://www.django-rest-framework.org/ 可以看到介绍 ```bash >pip install djangorestframework >pip install markdown django-filter ``` 修改Django项目 settings.py 添加drf应用 ![BLOG_20190421_112631_75](/media/blog/images/2019/04/BLOG_20190421_112631_75.png "博客图集BLOG_20190421_112631_75.png") 时间设置 ```config # 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路由 ![BLOG_20190421_112712_69](/media/blog/images/2019/04/BLOG_20190421_112712_69.png "博客图集BLOG_20190421_112712_69.png") 同步数据库,创建表,创建管理员 ```bash manage.py@DjangoOnlineFreshSupermarket > makemigrations manage.py@DjangoOnlineFreshSupermarket > migrate # 创建管理员 manage.py@DjangoOnlineFreshSupermarket > createsuperuser ``` 访问 http://127.0.0.1:8000/admin/ 就可以使用创建的帐密登录后台 ![BLOG_20190421_112726_23](/media/blog/images/2019/04/BLOG_20190421_112726_23.png "博客图集BLOG_20190421_112726_23.png") 创建users应用 ```bash manage.py@DjangoOnlineFreshSupermarket > startapp users ``` 创建apps包,用于放置所有的应用。将users应用移动到apps包中。右键apps---Mark Directory as---Sources Root 创建db_tools包,用于放置项目的脚本等 ![BLOG_20190421_112735_80](/media/blog/images/2019/04/BLOG_20190421_112735_80.png "博客图集BLOG_20190421_112735_80.png") 将apps加入项目的搜索路径之下,修改 settings.py 添加 ```bash 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 ```bash manage.py@DjangoOnlineFreshSupermarket > startapp goods manage.py@DjangoOnlineFreshSupermarket > startapp trade manage.py@DjangoOnlineFreshSupermarket > startapp user_operation ``` 然后将这三个应用都拉入apps包 ![BLOG_20190421_112750_13](/media/blog/images/2019/04/BLOG_20190421_112750_13.png "博客图集BLOG_20190421_112750_13.png")
很赞哦! (9)
相关文章
当前用户
未登录,点击 登录专题目录
- 【Vue+DRF生鲜电商】01.课程结构介绍,开发环境搭建
- 【Vue+DRF生鲜电商】02.设置users、goods、trade、user_operation数据库并导入原始数据
- 【Vue+DRF生鲜电商】03.Restful API基础
- 【Vue+DRF生鲜电商】04.Vue项目结构介绍
- 【Vue+DRF生鲜电商】05.商品列表序列化普通方法
- 【Vue+DRF生鲜电商】06.DRF环境配置,使用Serializer类序列化商品列表
- 【Vue+DRF生鲜电商】07.序列化商品分页功能
- 【Vue+DRF生鲜电商】08.ViewSets & Routers显示商品列表
- 【Vue+DRF生鲜电商】09.使用DRF的filter过滤商品列表
- 【Vue+DRF生鲜电商】10.商品分类层级获取,Vue跨域请求商品分类
- 【Vue+DRF生鲜电商】11.Vue展示左侧分类、面包屑、排序、商品列表、分页
- 【Vue+DRF生鲜电商】12.用户登录之DRF Token认证登录原理和使用方法
- 【Vue+DRF生鲜电商】13.JWT用户认证原理配置,Vue登录接口调试
- 【Vue+DRF生鲜电商】14.用户注册发送短信验证码、登录字段验证
- 【Vue+DRF生鲜电商】15.用户注册使用信号量实现密码加密
- 【Vue+DRF生鲜电商】16.Vue中注册、退出功能交互
- 【Vue+DRF生鲜电商】17.DRF实现商品详情及热卖商品接口,Vue中显示商品详情和热卖
- 【Vue+DRF生鲜电商】18.用户收藏、取消收藏商品接口实现
- 【Vue+DRF生鲜电商】19.用户添加、删除收藏权限处理,根据商品id显示收藏,在Vue中实现收藏功能
- 【Vue+DRF生鲜电商】20.使用DRF自动生成文档的功能
- 【Vue+DRF生鲜电商】21.用户中心个人资料的展示,并在Vue中实现个人资料更新
- 【Vue+DRF生鲜电商】22.个人中心显示用户收藏功能,对收藏进行删除
- 【Vue+DRF生鲜电商】23.个人中心用户留言功能
- 【Vue+DRF生鲜电商】24.用户收货地址功能
- 【Vue+DRF生鲜电商】25.商品添加购物车接口功能,Vue和购物车联调
- 【Vue+DRF生鲜电商】26.使用Pycharm远程代码调试服务器Django代码
- 【Vue+DRF生鲜电商】26.订单接口功能,Vue和订单接口联调
- 【Vue+DRF生鲜电商】27.支付宝公钥,私钥,沙箱环境配置
- 【Vue+DRF生鲜电商】28.支付宝支付接口类解读,支付逻辑编辑
- 【Vue+DRF生鲜电商】29.线上服务支付宝接口和Vue联调,Django代理Vue运行
- 【Vue+DRF生鲜电商】30.首页轮播图、新品展示功能
- 【Vue+DRF生鲜电商】31.首页商品按分类显示推荐功能
- 【Vue+DRF生鲜电商】32.商品操作后计数更改,热搜榜关键字功能实现
- 【Vue+DRF生鲜电商】33.数据缓存、接口访问限速功能
- 【Vue+DRF生鲜电商】34.第三方登录(微博、qq和微信)之微博登录登录测试
- 【Vue+DRF生鲜电商】35.使用social-app-django集成第三方登录