咔咔出行（出行視覺化）
專案簡介
解決出行問題，用於出行行程記錄，路線規劃，資料視覺化分析的移動端webapp
點選這裡檢視該專案
專案截圖
私人出行
公共交通
歷史列表
我的資訊
技術棧
- 前端：移動端，vue全家桶，Mand元件庫，Echarts.js，Scss
- 後端：Node，Express框架，高德地圖API
- 資料庫：Mysql
功能模組
個人出行
使用者個人出行，不確定路程、目的地等資訊，選擇出行工具，點選開始，系統實時監聽使用者手機位置得到WGS84經緯度座標（w3c HTML5 Geolocation地理定位標準），行程結束，記錄本次出行資訊，經緯度座標轉換GCJ-02座標體系，通過高德地圖提供三方API繪製出行軌跡。
公共交通
使用者確定出發地、目的地、交通工具，選擇公共交通出行，使用者輸入位置關鍵字，選擇合適出發/目的位置，選擇乘坐交通工具，規劃出行路線，選擇某一條路線，確定後點選儲存上傳本次出行記錄
歷史列表
按時間順序檢視所有出行的歷史記錄，可檢視出行的詳情資訊、行程軌跡、路線規劃
我的資訊（未完成）
檢視我的詳情資訊，通過出行資料分析得到的出行趨勢折線圖，與出行資料相關的資料分析圖表，其他功能未寫
專案構建
前端
前端在vue-cli3基礎上開發，在此之上根據專案需求對專案工程作出幾點修改，前端程式碼在view/資料夾中
- 移動端適配：之前做移動端開發一直使用手淘的解析度適配方案，本專案根據大漠的《如何在Vue專案中使用vw實現移動端適配》，對移動端解析度用webpack在工程中配置。
-
請求攔截器：在
view/src/request/中，基於axios提供的interceptors對所有ajax的請求和響應新增相應操作，如請求頭新增，token新增，響應後臺錯誤狀態碼的識別與報錯；簡單封裝了下axios請求，主要為get，post兩種。 -
導航守衛：在
view/src/router/中，做了全域性導航守衛，未登入使用者只能訪問專案登入頁面。 -
工具類：在
view/src/utils/中，對常用列舉值、全域性元件註冊、常用類封裝等功能做模組化封裝。 -
css樣式：在
view/src/style/中，全域性公共樣式，初始化樣式。 -
svg元件：在
view/src/icons/中，封裝用於svg展示元件，用做小icon的展示，svg儲存該資料夾中。 - 模組化：對路由與vuex做模組化封裝。
- 地圖：所有地圖、地理資訊、軌跡、路線規劃功能有高德地圖第三方API提供
後端
- 使用
Node的express框架，連線Mysql資料庫，做資料介面開發，資料的增刪改查與簡單封裝。
小結
專案簡結
- 難度：簡單
- 開發時長：前期調研，編碼一週
- 關鍵字：移動端，出行，視覺化，高德地圖，Echart圖表
過程總結
- 想法產出：因為在滴滴出行的實習經歷，準備做款有關出行平臺的，有關前端視覺化的產品。
-
需求調研：結合
出行視覺化關鍵字做需求分析，調研悅動圈、悅跑圈、滴滴出行、百度地圖、高德地圖確定幾個主要功能- 實時定位，繪製出行軌跡(悅跑圈，已完成)
- 路線規劃，規劃路線繪製路徑圖(百度地圖，已完成)
- 網約車，快車，專車，順風車線上叫車(滴滴出行，未完成)
- 視覺化分析，出行資料的視覺化分析(已完成)
-
技術調研：
- 選取HTML5 Geolocation提供的物理位置實時監聽功能，獲取到WGS84經緯座標
- 選取高德地圖第三方API提供地圖，地理位置，軌跡繪製，路線規劃等功能
- 選擇開發移動端專案，用滴滴的
Mand作為移動端UI元件庫 - 選取
Node為服務端，Express為後端框架，Mysql為資料庫
難點總結
產品從無到有是最困難的，專案雖然不難，可前期產品調研，技術調研，專案構建確花費了大量時間，相比照著成品寫多了很多不一樣的體驗