Vue+Node+vant+mongoDB移動商城實戰【1】

先看一下簡單的介紹吧，
vueJs+nodeJs移動商城-介紹視頻

其實就是一個簡版的網上商城，一些交互流程上是模仿了京東商城。

主要結構有二條線；

一、首頁（商品列表頁）-->商品詳情頁-->購物車結算頁；
二、未登陸&已登陸-->用戶中心；

主要的模塊，

首頁

搜索（假的），未連數據庫，時間有限。
輪播圖，讀接口，得到json，v-for循環
首頁產品欄目名、欄目下產品。mongoDB多集合查詢
vant組件，footer

分類頁

添加欄目入口，一次添加多個商品。各類判斷...
這個功能是由於開始時沒有數據，就想加一個添加數據的表單，結果作出來發現這其實就是後臺的欄目管理

vant組件橫向tabs、組件縱向tabs，
二個tabs能夠聯動

分頁功能，
就是定一下每頁顯示幾條，如今是第幾頁，而後在db裏skip多少條，
再limit幾條返回json，而後v-for。
UI是vant的分頁組件

購物車

vant的業務組件，各類配置，搞半天
vant的產品信息組件，

用戶中心

登陸、註冊、我的信息，存在localstorage裏，created判斷

footer底欄

來回切換，狀態保持，存在localstorage裏，created判斷，
this.$router.push時，回調設置

nodeJs中間件，

-查詢條件
node_a : BASEURL + '/node_a',
-查詢結果
node_b : BASEURL + '/node_b',
-提交註冊信息
register_post : BASEURL + '/register_post',
-登陸信息
userLogin_post : BASEURL + '/userLogin_post',
-批量錄入商品
insertGoods : BASEURL + '/insertGoods',
-得到商品列表-大類
getGoodsCategory : BASEURL + '/getGoodsCategory',
//根據id，得到對應商品信息
getGoodsInfo : BASEURL + '/getGoodsInfo',
-查詢欄目所屬的商品列表
getCategoryGoodsList : BASEURL + '/getCategoryGoodsList',
-分頁時觸發，
getPageChange : BASEURL + '/getPageChange',
-輪播圖
getImgUrls : BASEURL + '/getImgUrls'

mongoDB，

註冊用戶集合：userInfo
goodsList_a，手機
goodsList_b，電器
goodsList_c，汽車
goodsList_d，女裝
goodsCategory，產品分類名集合

由於數據庫操做不是主要方向，數據庫這塊就是寫死四個集合。
也就是說，上面那個添加欄目的入口，其實只能添加欄目名，但沒有數據。

技術棧：

vue-cli、nodejs、express、vant、axios、router、vuex，es六、mongoDB，基本上也就這些吧，都是些平常使用的東西。

而後想把整個開發過程，在這裏連載一下，一爲宣傳，二爲總結。

下面是個人微信二維碼，能夠加我，