iMap | 一款基于 Electron 和 Vue 的跨平臺旅行地圖生成器

dingda 發布于2019-08-21 17:03 / 1497人閱讀

摘要：請求錯誤請求代碼封裝與基本一致，只是將換成即可。關于的使用是個能把組件的共享狀態抽取出來，當做一個全局單例模式進行管理。首先確保你的已經安裝，運行來安裝。

項目地址：https://huangxizhou.com/project/iMap

技術棧

Vue.js

Vuex

Axios

Webpack

Leancloud（express）

Echarts

Electron（electron-vue）

項目目錄

.
├── LICENSE
├── README.md
├── build··········································electron-packager 打包出來的各平臺應用
│?? └── icons······································各平臺應用圖標
│??     ├── icon.icns
│??     ├── icon.ico
│??     └── icon.png
├── dist···········································應用構建后的代碼目錄
│?? ├── electron
├── package.json···································應用層級的 package.json
├── src············································electron 入口文件文件夾
│?? ├── index.ejs
│?? ├── main·······································electron 主進程文件文件夾
│?? │?? ├── index.dev.js
│?? │?? └── index.js
│?? └── renderer···································Vue 相關的目錄
│??     ├── App.vue································單頁面的主結構
│??     ├── assets·································靜態資源文件夾
│??     │?? ├── img································項目配圖
│??     │?? │?? ├── china.png
│??     │?? │?? ├── excel_example.png
│??     │?? │?? └── world.png
│??     │?? └── my-theme···························iVew 自定義主題相關目錄
│??     ├── components·····························Vue 相關組件目錄
│??     │?? ├── Layout·····························布局組件
│??     │?? │?? └── Header.vue·····················導航欄
│??     │?? ├── Page·······························頁面組件
│??     │?? │?? ├── Auth.vue·······················用戶權限獲取組件
│??     │?? │?? ├── Chart.vue······················制作地圖組件
│??     │?? │?? ├── ForgetPassword.vue·············忘記密碼組件
│??     │?? │?? ├── Help.vue·······················幫助文檔組件
│??     │?? │?? ├── Home.vue·······················主頁組件
│??     │?? │?? ├── Login.vue······················登錄頁組件
│??     │?? │?? ├── Map.vue························地圖類型組件
│??     │?? │?? ├── MyProject.vue··················我的項目組件
│??     │?? │?? ├── Register.vue···················注冊組件
│??     │?? │?? └── Update.vue·····················登錄組件
│??     │?? └── Ui·································功能組件
│??     │??     ├── AddPointModal.vue··············添加地點組件
│??     │??     ├── DelPointModal.vue··············刪除地點組件
│??     │??     └── EditPointModal.vue·············修改地點組件
│??     ├── data···································Echarts 相關數據存放文件夾
│??     │?? ├── china.json·························中國地圖 json 數據
│??     │?? ├── map.js·····························導入坐標數據
│??     │?? └── world.json·························世界地圖 json 數據
│??     ├── filter·································Vue 過濾器目錄
│??     │?? └── index.js
│??     ├── main.js································Vue 入口文件
│??     ├── router·································Vue 路由文件
│??     │?? └── index.js
│??     ├── server·································ajax相關操作文件
│??     │?? ├── ajax.js····························二次封裝ajax
│??     │?? └── url.js·····························接口別名
│??     ├── store··································Vuex 數據目錄
│??     │?? ├── actions.js·························涉及多個 mutations 的 action 集合 
│??     │?? ├── index.js···························Vuex 入口文件
│??     │?? ├── modules····························模塊目錄
│??     │?? │?? ├── excel.js·······················Excel 數據相關模塊
│??     │?? │?? └── user_info.js···················用戶數據相關模塊
│??     │?? └── mutations_types.js·················mutation-types 聲明  
│??     ├── tool···································工具文件夾
│??     │?? └── index.js
│??     └── version································應用版本文件夾
│??         └── version.js
└── yarn.lock

接口與數據問題

本項目使用的是官方推薦的axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

本來之前想使用 prototype 來寫侵入式代碼，但維護起來還是很麻煩，最終還是擼了個開箱即用的 axios 二次封裝的js文件出來：

// POST 請求
post({...obj}) {
  return new Promise((resolve, reject) => {
    axios.post(obj.url, obj.data, {
        headers: {
          "Authorization": user && user.accessToken
        }
      }).then((data) => {
      if(data.data.code === 0) {
        // ...
      } else if (data.data.code === 1)  {
        // ...        
      } else {
        // ...  
      }
    }).catch((data) => {
      reject(data)
    })
  })     
}

一般來說，在接收到后端返回的數據時，可以使用resolve(data.data)來直接處理數據，當然也可以按需引入一些 UI 組件與過濾器，直接在 ajax 封裝文件中就可以過濾數據并進行全局提示，提升用戶體驗。

對于 GET 請求，由于項目有使用到百度地圖開放 API 來獲取城市經緯度，涉及到 jsonp 跨域問題，尷尬的是 axios 官方說明不會支持 jsonp ，所以只能引入 jsonp 這個 npm 包，并且將請求此接口從 GET 請求中多帶帶提取出來。

  getLocation({...obj}) {
    return new Promise((resolve, reject) => {
      jsonp(obj.url + "?" + qs.stringify(obj.data) , null,  (err, data) => {
        if (err) {
          Message.error("請求錯誤")
        } else {
          if(data.status === 0) {
            resolve(data)
          }
        }
      })
    })
  }

GET 請求 ajax 代碼封裝與 POST 基本一致，只是將 obj.data 換成 { paramas: obj.data } 即可。

關于 Vuex 的使用

Vuex是個能把組件的共享狀態抽取出來，當做一個全局單例模式進行管理。這樣不管你在何處改變狀態，都會通知使用該狀態的組件做出相應修改。

在本項目中，需要提取到全局管理的數據有 userInfo 和 excelData，前者保存在全局中，可以減少請求用戶信息接口的數量，節約資源，后者由于 Excel 文件上傳到后端后只做解析，不保存，所以全局管理 excelData 很重要。

在這里就多帶帶說一說添加城市坐標的操作好了：
首先是 mutations_types 聲明文件

// mutations_types.js
export const ADD_EXCEL_DATA = "ADD_EXCEL_DATA"
...

聲明 state 和 mutations
在 Vuex 中，更改 Vuex 的 store 中的狀態的唯一方法就是 mutations

// modules/excel.js
import * as types from "../mutations_types"

// state
const state = {
  excelData: {}
}

// mutations
const mutations = {
  ...
  // 添加 excelData
  [types.ADD_EXCEL_DATA] (state, data) {
    state.excelData.data.push(data)
  },
  ...
}

// 導出 state, mutations
export default {
  state,
  mutations
}

然而，Mutations 必須是同步函數，所以我們還需要 actions

// actions.js
import * as types from "./mutations_types"

...
// 添加 excelData
export const addExcelData = ({ commit }, data) => {
    commit(types.ADD_EXCEL_DATA, data)
}
...

最后，再在入口文件注入 modules 和 actions即可

...
export default new Vuex.Store({
  actions,
  modules: {
    excel
  }
})

這樣一來，關于 excelData 的數據管理的任督二脈已經打通，現在就看如何來使用了

在組件中可以使用 mapState 、mapActions 輔助函數來簡化代碼
mapState函數用在計算屬性中

// AddPointModal.vue
  computed: {
    ...mapState({
      excelData: state => state.excel.excelData,
      countAlias: "excelData"
    })
  }

mapActions 函數在本項目中用于 methods 中

  methods: {
    ...mapActions({
      addExcelData: "addExcelData"
    })
    ...
}

在函數中調用

this.addExcelData(Arrary)

這樣就成功將一個新的數組元素添加到 excelData 中了。

如何獲取 Excel 數據

本項目采用 Leancloud 來作為后端支持，使用的是Node.js（express），對于獲取用戶的 Excel 數據并不想保存數據的話，本項目的思路是將 Node 作為一個文件中轉的存在，上傳用戶 Excel 文件至服務器后，在 /public 目錄下保存Excel文件，再在下次用戶上傳時，清空 /public 目錄。

用戶 Excel 處理的庫本項目選擇的是 node-xlsx

特別注意的是，在前端文件中，上傳用戶 Excel 文件是需要使用 formData 來上傳的

let formData = new FormData()
formData.append("file", this.file)

后端使用 formidable 這個庫來接收 Excel 文件并使用 form.parse 來解析。

關于使用 Echarts

ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。

對于在 Vue 項目中使用 Echarts , 本項目采用的是 vue-echarts
在 chart.vue 文件中，我們利用一個三元運算符來動態切換地圖類型

this.selectMapType === "china" ?  ECharts.registerMap("china", chinaMap) : ECharts.registerMap("world", worldMap)

對于地圖數據的導入，本項目的方法是的是導入一個對象，返回地圖 option 數據:

// map.js
...
export default {
    getMapData({...obj}) {
    ...
        return {
           // 地圖配置數據
        }
    }
}

再在前端文件中使用這個函數即可: this.option = map.getMapData(this.excelData)

Vue 中父子組件雙向綁定

在本項目中，我將添加、編輯、刪除地點的彈窗全部提取到公用 Ui 組件文件夾中，然而這就需要利用 v-model 來實現組件 props 雙向綁定

// template



// script
export default {
  props: {
      value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return: {
        showModal: false
    }
  },
  watch:{
    value(val) {
      this.showModal = val
    },
    showModal(val) {
      this.$emit("input", val)
    }
  },
  mounted() {
    if (this.value) {
      this.showModal = true;
    }
  }
}

這樣就能使用value來保存 v-model 的值，從而進行雙向綁定。

在MacOS 上打包 Win32 軟件包

在 electron-vue 文檔中有這么一句話：

If you are wanting to build for Windows with a custom icon using a non-Windows platform, you must have wine installed.

那么我們就來安裝wine。首先確保你的 Mac 已經安裝 homebrew，運行 brew install wine 來安裝wine。

接下來，會出現一個錯誤提示，提示我們需要安裝 Xquartz，按照錯誤提示給的下載網址下載即可。

再次運行 brew install wine

安裝成功后在項目目錄下運行 npm run build:win32 就可以打包成Win32 安裝包了

求一份工作~

2019年畢業生求帶走

我的簡歷

GPU云服務器云服務器基于云計算的平臺基于物聯網的云平臺站點地圖生成基于大數據平臺的應用服務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89071.html

大模型時代的小紅書+馬蜂窩：華人團隊開發的AI旅行app

簡介一周前，由紅杉投資的硅谷初創公司UTA AI推出了其核心產品Wanderboat AI，這是一個基于GPT-4技術的智能旅行規劃工具。該平臺允許用戶通過對話交互來明確旅行的偏好和需求，并提供包括目的地、活動和實用建議在內的定制化旅行建議。Wanderboat AI整合了視頻、圖片、地圖和評價等多種媒體資源，以增強用戶體驗。它還具備智能互動特性，用戶可以隨時查詢并得到立即答復。Wanderboa...

UCloud小助手 2024-07-15 17:17 評論0 收藏0
Hola～一款基于Electron的聊天軟件

摘要：前言本項目旨在從零到壹，制作一款界面精美的聊天軟件。因為本人是開發，設計功底欠缺，所以軟件設計的有點丑，如果有大神有更好的，歡迎。 Hola 前言本項目旨在從零到壹，制作一款界面精美的聊天軟件。 Github 地址因為已工作，所以可能沒有多少時間來繼續跟進這個項目了，項目可優化的點已在下文列出，歡迎大家 Fork 或 Star。 ps: 征 logo 一枚。因為本人是開發，設計功底...

Kaede 2019-08-23 12:47 評論0 收藏0
【收藏】2019年最新Vue相關精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...

williamwen1986 2019-08-23 14:50 評論0 收藏0