??在某個年紀之前，你可以靠透支身體、小聰明和老天給你的運氣一直取巧地活著，然而到了某個年紀之后，
??真正能讓你走遠的，都是自律、積極和勤奮，— 后序
前言
Hello 小伙伴們，如果覺得本文還不錯，記得點個贊或者給個收藏，據說點贊、收藏的小伙伴，都能斬獲滿意度99分 Offer！
技術堆疊
專案采用的技術堆疊是基于：vue + node + mySQL，用vue-cli寫的前端，用express搭建的后端應用服務器，資料庫用的是MySQL，
一、專案整體界面效果
1.web端-專案部分效果
- 一級版塊包括：首頁、推薦、搜索、聊天、個人中心、登錄/注冊、購物車等
- 二級版塊主要做了首頁的二三級購物流程頁面，基本上把電商專案的整個流程跑通了，
商城專案用到的技術點主要包括:
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中狀態被清空
-
解決方案一：localStorage
使用localStorage進行資料本地化，但電商型別的專案我感覺并不是太適合，因為localStorage是長時間快取，有可能導致資料不同步， -
解決方案二：判斷資料是否存在，不存在重新從服務器端獲取，或者可以進行路由懶加載保持資料在記憶體中也是可以的，
2.8. nextTick的使用
問題描述：在使用自定義組件的時候，或者使用第三方的組件（輪播圖等），因為資料是異步獲取的，所以組件初始化會在資料獲取之前完成，此時可能導致組件無法正常作業，就拿輪播圖舉例子，正確的寫法是在watch中進行深度監視，當資料請求完成后進行組件的初始化：
當然也可以通過回呼來處理，主要目的是延遲初始化，這樣組件就能正常運轉了，
nextTick主要作用在于將回呼延遲到下次 DOM 更新回圈之后執行;
在修改資料之后立即使用它，然后等待 DOM 更新;
它跟全域方法 Vue.nextTick 一樣，不同的是回呼的 this 自動系結到呼叫它的實體上，
總結
分享下我零基礎進入大前端的學習路線, 有需要的朋友可以參考：JavaScript —> ajax —> bs —> vue —> node，專案學習視頻，專案原始碼，面試筆記有需要的童鞋可以點擊【學習前端，不迷路】
最后說一句：一入前端深似海，一路好走！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/280287.html
標籤：其他