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

先看圖片吧，

由於文章裏不能直接貼視頻，因此就轉了gif圖片，能夠先大概的看一下它是個什麼形式的東西。其實就是一個簡版的網上商城，一些交互流程上是模仿了京東商城。

主要結構有二條線；

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

主要的模塊，

首頁

搜索（假的），未連數據庫，時間有限。
複製代碼

輪播圖，讀接口，得到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，基本上也就這些吧，都是些平常使用的東西。

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

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