Django REST framework+Vue 打造生鮮超市（一）

1、項目介紹

1.1.掌握的技術

1. Vue + Django Rest Framework 先後端分離技術
2. 完全玩轉restful api 開發流程
3. Django Rest Framework 的功能實現和核心源碼分析
4. Sentry 完成線上系統的錯誤日誌的監控和告警
5. 第三方登陸和支付寶支付的集成
6. 本地調試遠程服務器代碼的技巧

1.2.系統構成

1. vue前端項目
2. django rest framework 系統實現前臺功能
3. xadmin後臺管理系統

vue部分:

• API 接口
• Vue 組件 與api的交互
• vue的項目組織結構分析

Django Rest Framework 技能

• 通用view實現 rest api接口

  • apiview方式實現api
  • genericView方式實現api接口
  • Viewset和router方式實現api接口和url配置
  • Django_filter searchFilter OrderFilter 分頁
  • 通用mixin

• 權限和認證；

  • Authentication用戶認證設置
  • 動態設置permission、authentication
  • Validators實現字段驗證

• 序列化和表單驗證

  • Serializer
  • ModelSerializer
  • 動態設置Serializer

• 支付登陸註冊

  • json web token 實現登陸
  • 手機註冊
  • 支付寶支付
  • 第三方登陸

• 進階開發

  • Django rest framework 部分核心源碼解讀
  • 文檔自動化管理
  • django rest framework的緩存
  • throttling 對用戶和ip進行限速

 

1.3.開發中常見的問題

• 本地系統不能重現的bug
• api接口出錯不能及時的發現或難以找到錯誤棧
• api文檔管理問題，html markdown
• 大量的url配置形成url配置愈來愈多難以維護
• 接口不及時去更新文檔，對方不知道如何去測試接口，但寫文檔會花費大量的時間去維護.
• 爲了防止爬蟲，咱們須要針對api的訪問頻率進行限制，好比一分鐘，一小時，或者一天用戶的訪問頻率限制問題。
• 某些頁面將數據放入緩存，加速某些api的訪問速度

1.4.開發中常見問題解決方案

1. 經過介紹pycharm 的遠程服務器代碼調試技巧讓你們不只能夠調試支付，第三方登陸，還能夠遠程服務器代碼來重現服務器上的bug
2. 經過docker 搭建 sentry 來體驗錯誤日誌監控系統，讓咱們不只能夠獲得線上的錯誤棧還能及時在發生系統錯誤時收到郵件通知。
3. 經過drf的文檔自動化管理以及url的註冊管理功能會讓咱們省去寫文檔的時間
4. django rest framework 的文檔管理功能不只可讓咱們省去寫文檔的時間，還能直接在文檔裏面測試接口，自動生成js接口代碼，shell測試代碼和python測試代碼
5. django rest framework 提供的throttle 對於api進行訪問頻率的限制
6. 引入第三方框架來設置某些api的緩存

1.5.django進階知識點

• django mirgrations原理
• django 信號量
• django從請求到響應的完整過程
• 獨立使用django的model

1.6.vue知識點

• vue技術選型分析
• API後端數據填充到Vue組件模板
• Vue代碼結構分析

1.7.章節安排

• 項目介紹以及開發環境的搭建
• 設計數據庫以及導入原始數據
• restful api基礎以及vue項目結構介紹
• 商品列表頁功能
• 商品類別功能
• 手機註冊和用戶登陸
• 商品詳情頁和收藏功能
• 我的中心功能
• 購物車、訂單和支付寶支付功能
• 首頁，商品相關數量，緩存，訪問限速功能
• 第三方登陸(微博 qq 微信)
• sentry系統錯誤日誌監控

1.8.技術儲備要求

• django基礎知識
• 熟練掌握python語法
• 瞭解vue & mysql基礎

1.9.系統功能

• 分類 - 子分類 搜索 熱搜詞 購物車簡要展現
• 新品 分類展現， 大類的推薦商品。
• 帳戶密碼登陸(json web token)。微博登陸，輸入帳戶跳轉回首頁。
• 註冊，手機號碼註冊，錯誤提示。倒計時功能，服務器端手機號碼發送頻次限制。
• 商品大類，導航欄。篩選，排序。富文本。
• 商品 收藏 加入購物車 結算，移出購物車
• 留言 支付寶支付，掃碼支付。跳回商戶頁面。
• 訂單詳情，收貨地址
• 我的信息，收藏商品，個人收藏。
• 留言，上傳文件。提交，刪除留言
• 快速瀏覽。頁面的緩存
• 訪問速度限制 & 接口文檔 測試交互
• 出錯處理: sentry基於drf。打印錯誤棧，當前請求用戶。郵件通知

 

2、環境搭建

2.1.虛擬環境搭建

（1）環境變量設置

• 桌面新建文件夾Envs
• 新建環境變量：之後建立虛擬環境會自動保存到這個路徑

　　

（2）安裝

pip install virtualenv

pip install virtualenvwrapper-win
  
mkvirtualenv DjangoProject    #建立虛擬環境

workon                       #查看有哪些虛擬環境

workon DjangoProject      #進入建立的虛擬環境

deactivate.bat      #退出虛擬環境

activate.bat        #激活虛擬環境

 

2.2.Vue環境搭建

（1）node.js

https://nodejs.org/en/

（2）cnpm

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

（3）安裝依賴

cnpm install

（4）運行

cnpm run dev