咔咔出行（出行視覺化）

專案簡介

解決出行問題，用於出行行程記錄，路線規劃，資料視覺化分析的移動端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圖表

過程總結

• 想法產出：因為在滴滴出行的實習經歷，準備做款有關出行平臺的，有關前端視覺化的產品。

• 需求調研：結合出行 視覺化 關鍵字做需求分析，調研悅動圈、悅跑圈、滴滴出行、百度地圖、高德地圖確定幾個主要功能

  1. 實時定位，繪製出行軌跡(悅跑圈，已完成)
  2. 路線規劃，規劃路線繪製路徑圖(百度地圖，已完成)
  3. 網約車，快車，專車，順風車線上叫車(滴滴出行，未完成)
  4. 視覺化分析，出行資料的視覺化分析(已完成)

• 技術調研：

  1. 選取HTML5 Geolocation提供的物理位置實時監聽功能，獲取到WGS84經緯座標
  2. 選取高德地圖第三方API提供地圖，地理位置，軌跡繪製，路線規劃等功能
  3. 選擇開發移動端專案，用滴滴的Mand作為移動端UI元件庫
  4. 選取Node為服務端，Express為後端框架，Mysql為資料庫

難點總結

產品從無到有是最困難的，專案雖然不難，可前期產品調研，技術調研，專案構建確花費了大量時間，相比照著成品寫多了很多不一樣的體驗

Github原始碼 https://github.com/wwenj/tripRecord