初探dva 購物車例項

2021-10-01 16:45:46 字數 1433 閱讀 4947

dva 是乙個基於 redux 和 redux-saga的資料流方案,並且為了簡化開發體驗,dva 還額外內建了 react-router 和 fetch,所以也可以理解為dva是乙個輕量級的應用框架。 – 摘自官網

本練習使用dva+antd做了個購物車小練習,目的是為了更快上手dva,所以練習的複雜度不高,更多是基礎運用開發。專案參考**

github**

編輯.webpackrc,配置proxy屬性,**請求

"proxy":}

}

本次練習主要為了熟悉dva做狀態管理,對後台要求不高,只是簡單地返回商品資料

建立商品列表路由

dva已經在src/utils/request.js中為我們封裝了fetch請求。所以我們可以新建src/services/products.js來封裝乙個向後台請求商品資料的方法

import request from

'../utils/request'

;export

function

fetch()

dva 通過 model 的概念把乙個領域的模型管理起來,包含同步更新 state 的 reducers,處理非同步邏輯的 effects,訂閱資料來源的 subscriptions

新建src/models/products.js

import

*as productsservice from

'../services/products'

;export

default

, reducers:})

;}},

effects:,)

=yield

call

(productsservice.fetch)

;yield

put(,}

);},

},subscriptions:))

=>);

}});

},},

};

到此,model層和service層我們已經簡單搭建好,可以在元件中拿到商品資料

拓展:model中的subscription訂閱

dva-loading外掛程式

在實際開發中,由於存在向後端請求商品資料,可能不能第一時間拿到商品資料,所以往往在資料載入的過程中,我們會給使用者乙個「正在載入中…」的提示。而dva-loading外掛程式可以幫我們簡化這一過程。

Vue購物車例項

這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除 總價 購物車為空 這個路徑要修改,就不多說了 data isallche...

Vue購物車例項

這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除總價 購物車為空 這個路徑要修改,就不多說了 data isallchec...

JSP購物車例項講解

名詞解釋 購物車,顧名思義,就是具有與超市中購物車相同功能的模組.本例主要以實現購物車基本功能 向購物車中新增商品,修改商品,刪除商品 我將採用struts1.2來寫這個例子,好了,現在我們開始.成品如下圖 圖 1 圖 2一.我們首先要建立資料庫,內容很簡單,只需有三個字段,即 商品編號,商品名稱,...