前言
本人移動端開發妹子工程師一枚 ，因為公司專案需要用到前端的技術(主要是vue)，自己自學了一段時間，最近花了半個月在工作之餘的時間終於自己完完整整寫下來一整個前後端商城專案(當然是跟了一個線上專案直播班，不要嘲笑我)，不知道自己算不算前端入門了，?。
專案採用的技術棧是基於：vue + node + mySQL，用vue-cli寫的前端，用express搭建的後端應用伺服器，資料庫用的是MySQL。
一、專案整體效果預覽
1. web端-專案部分效果演示
專案整體結構用vue-router搭建的全域性路由，一級版塊包括：首頁、推薦、搜尋、聊天、個人中心、登入/註冊、購物車等，二級版塊我主要做了首頁的二三級購物流程頁面。基本上把電商專案的整個流程跑通了。
商城專案用到的技術點主要包括:
2. 伺服器端
伺服器端我主要用的是Node的express框架搭建的應用伺服器, 自己定義了專案中需要的介面, 主要基於post/get。伺服器端沒有進行深度的開發，主要實現了對資料流的增刪改查，為客戶端進行動態資料支撐。
下圖是伺服器端定義的部分介面
資料庫用的是MySQL，沒有用mongoose，感覺還是關係型資料庫使用更加靈活一點。主要是單表和多表關聯查詢，基本的SQL語句也能搞定。
二、專案開發中坑點記錄
雖然是跟著視訊一步步學習的，但是自己在動手做的時候還是遇到了各種奇葩問題，在寫完專案後總結記錄下，一方面方便自己回顧，另一方面其他朋友遇到類似的問題可以參考借鑑。
2.1 二級路由介面底部Tabbar隱藏
通過vue-router配置完全域性路由後, 在專案中一級路由介面是需要有底部tabbar的, 但是由一級介面過渡到二級介面是不需要的, 如下圖所示:
解決方案: 在路由選項中有個meta屬性, 可以在該屬性中傳一個字面量物件記錄是否顯示底部的tabbar, 然後在頁面中做判斷即可!
前端頁面處理:
2.2 上拉載入資料中獲取資料重複
我在做推薦版塊的列表資料載入時, 自己在後端寫好了get的請求介面, 前端發起get請求, 前面幾次載入都很正常, 後面上拉載入的時候總是多個重複資料被同時拉下來, 如下圖所示:
上拉載入用mint-UI做了介面的提示, 而且也在action中設定了回撥, 只要資料沒有下來, loading框是不消失的, 但結果還是如下圖所示:
最後請教老師, 終於解決了該問題, 主要的方案思路是: 客戶端每次發請求時把本地最後一條商品的id傳給後端, 後端在介面中寫查詢語句的時候用limit做限制就保證了資料的不重複了。看來自己既寫前端又寫後端, 需要考慮的因素還是很多!
2.3 坑坑坑的跨域
問題描述: 主要是前端請求圖形驗證碼引發的血案，因為我伺服器的地址是localhost:3000, 所以我在請求圖形驗證碼的時候，使用的是如下的方式：
而且通過瀏覽器訪問也是OK的：
但是問題在於：我在伺服器端是用session儲存了該驗證碼，用於前端請求時來做前後端比對的，但是每次請求都不能從session中獲取，始終的undefined。此刻，我第一反應是跨域，檢查前端頁面：
沒有問題，於是檢查後端的跨域配置：
也沒有問題，百思不得其解後只能灰溜溜的去問老師，最終的問題在於：我客戶端的其他請求都是統一配置好的路徑：http://localhost:3000, 但在請求圖形驗證碼出使用了：http://127.0.0.1:3000/api/captcha ，在後端驗證是localhost:3000和127.0.0.1:3000代表的不是同一個客戶端，所以始終拿不到值，改了之後瞬間好了。非常小的一個細節，粗心、粗心！
2.4 配置vuex中的細節點分析
一開始不是很理解為什麼要繞這一圈來使用vuex進行狀態和資料的管理，當使用了之後才發現中大型專案中使用vuex進行資料管理是十分有必要的，當你理解了它的運作機制，流程就顯得異常簡單了，此處借用老師課上的一幅圖：
使用vuex進行狀態管理要注意的一些細節點：
- 如果專案比較大，一定要把state，action，mutation劃分成獨立的資料夾，這樣以後在進行狀態管理的時候非常方便，目錄結構可以如下圖所示：
- action向mutation直接commit資料的時候，要注意引數保持一致，否則會出錯，如下圖所示：
- 在請求網路資料時，一定要在action中處理，主要是通過async和await進行非同步和同步，mutation中因為是唯一修改state的地方，所以始終得是同步的。
vuex中大致要注意的細節差不多就這些，其它的都是按照固定流程處理即可。
2.5 node連線MySQL資料丟失
問題描述：第一次發起請求的時候，連線資料庫都是正常的；但是第二個介面發起請求時，資料庫就連線不上了，會報錯說連線丟失。
原因分析：因為每操作完一次資料庫就關閉了資料庫連線，再次訪問的時候就找不到連線了，但是連線又不能不關閉，問題在於我把連線資料庫的程式碼沒有放到db.query的函式中，而是放在外面，這樣就導致連線只生成一次，關閉了以後，第二請求時得不到連線。
解決方案：直接寫好一個資料庫連線檔案，用 module.exports = conn;輸出，這樣每次訪問都是一個新的請求。
2.6 node連線mysql資料池一定要釋放
使用node連線mysql進行資料互動一定要釋放資料池，不然請求幾次之後會出現“一直請求中”的狀態導致無法完成互動。
如下圖所示：
2.7 頁面重新整理後vuex中狀態被清空
-
解決方案1：localStorage
使用localStorage進行資料本地化，但電商型別的專案我感覺並不是太適合，因為localStorage是長時間快取，有可能導致資料不同步。 -
解決方案二：判斷資料是否存在，不存在重新從伺服器端獲取，或者可以進行路由懶載入保持資料在記憶體中也是可以的。
2.8 nextTick的使用
問題描述：在使用自定義元件的時候，或者使用第三方的元件（輪播圖等），因為資料是非同步獲取的，所以元件初始化會在資料獲取之前完成，此時可能導致元件無法正常工作，就拿輪播圖舉例子，正確的寫法是在watch中進行深度監視，當資料請求完成後進行元件的初始化：
當然也可以通過回撥來處理，主要目的是延遲初始化，這樣元件就能正常運轉了。
nextTick主要作用在於將回撥延遲到下次 DOM 更新迴圈之後執行;
在修改資料之後立即使用它，然後等待 DOM 更新;
它跟全域性方法 Vue.nextTick 一樣，不同的是回撥的 this 自動繫結到呼叫它的例項上。
三、結束語
- 還有很多後端伺服器開發的坑，專案的深層次優化，放到下篇來寫。
- 第一次寫技術文章，不足之處請多多指教！
分享下我從零基礎進入大前端的學習路線, 有需要的朋友可以參考：JavaScript ---> ajax ---> bs ---> vue ---> node, 看的是B站上葉老師的免費視訊課程，講的真心不錯，非常nice，商城專案是跟的葉老師的騰訊課堂直播班，現在已經結束了。不過有錄播的高清視訊: 地址1, 地址2 , 講課思路很清晰，內容超級多，有需要的童鞋可以看一下哦！