先看圖片吧，
因為文章裡不能直接貼視訊，所以就轉了gif圖片，可以先大概的看一下它是個什麼形式的東西。其實就是一個簡版的網上商城，一些互動流程上是模仿了京東商城。
主要結構有二條線；
1、首頁（商品列表頁）-->商品詳情頁-->購物車結算頁；
2、未登入&已登入-->使用者中心；
複製程式碼主要的模組，
首頁
搜尋（假的），未連資料庫，時間有限。
複製程式碼輪播圖，讀介面，獲得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，es6、mongoDB，基本上也就這些吧，都是些日常使用的東西。
然後想把整個開發過程，在這裡連載一下，一為宣傳，二為總結。
下面是我的微信二維碼，可以加我，
