4- vue django restful framework 打造生鮮超市 -restful api 與前端源碼介紹

4- vue django restful framework 打造生鮮超市 -restful api 與前端源碼介紹

 

天涯明月笙 關注

2018.02.20 19:23* 字數 762 閱讀 1352評論 6喜歡 16

使用Python3.6與Django2.0.2(Django-rest-framework)以及前端vue開發的先後端分離的商城網站

項目支持支付寶支付(暫不支持微信支付),支持手機短信驗證碼註冊， 支持第三方登陸。集成了sentry錯誤監控系統。

線上演示地址: http://vueshop.mtianyan.cn/
github源代碼地址: https://github.com/mtianyan/VueDjangoFrameWorkShop

本小節內容: restful api 與前端源碼介紹

4- restful api 與前端源碼介紹

restful api 介紹

• 先後端分離優缺點

爲何要先後端分離

1. pc,app,pad多端適應

後端模板渲染的方式適合pc，app端很差弄。

2. SPA開發模式開始流行

單頁面應用。最流行的方式就是先後端分離，後端提供接口。

3. 先後端開發職責不清

Django的template由誰寫？拆分，模板語言。
php java template 語言使用。

4. 開發效率問題，先後端互相等待
5. 前端一直配合着後端，能力受限
6. 後臺開發語言和模板高度耦合，致使開發語言依賴嚴重。

先後端分離缺點:

- 先後端學習門檻增長，後端的if else語法。這些根據數據展現頁面交給前端作了 - 數據依賴致使文檔重要性增長，之前交給後端，後端一我的看懂 - 前端工做量加大 - seo的難度加大，爬蟲請求不到數據。有專門的優化 - 後端開發模式遷移增長成本 

restful api

restful api 目前是先後端分離最佳實踐(一套標準，建議)

1. 輕量，直接經過http，不須要額外協議，post/get/put/delete操做
2. 面向資源，一目瞭然，具備自解釋性。

資源是名詞，post等是動詞

推薦閱讀: 理解restful架構 阮一峯

vue基本概念介紹

1. 前端工程化
2. 數據雙向綁定
3. 組件化開發

nodejs 包管理。

mvvm: 數據驅動view，view又改變數據。

雙向數據綁定。

表單變成一個組件。而之前bootstrap就得引入庫，庫中有不少咱們不須要的東西。

vue開發中的幾個概念

1. webpack

重要，屬於js工具。

• es6到es5代碼轉換，vue不能被瀏覽器認識。

最終想讓瀏覽器認識就得html js css

 

mark

能夠看到看起來什麼都沒寫。

webpack將全部東西打包變成一個js文件。

2. vue vuex(組件通信) vue_router(單頁面的路由) axios

前端內部本身跳轉，發送ajax請求。不推薦操做dom。
jQuery導入進來只用ajax。不如axios。

3. ES6, babel

es6語法。babel將es6轉換爲es5。

vue項目的目錄結構

vue的組件方案

babel配置文件

mock數據。

 

mark

• api就是咱們如今請求網絡的api，全部組件的api經過這個設置。
• axios設置了全局攔截401
• components是基礎組件
• router 路由
• style 全局靜態文件

views中能夠看到咱們全部組件。

• header組件。
• 輪播圖
• 新品
• 分頁組件
• 我的中心三組件
• 結算組件

想知道頁面是由哪些vue的組件湊成。

 

mark

使用vue官方提供的插件。

app.vue 入口文件。

 

原文學習來自簡書，做者：天涯明月笙

原文連接：https://www.jianshu.com/p/a0f0dbd24329