摘要：請求錯(cuò)誤請求代碼封裝與基本一致，只是將換成即可。關(guān)于的使用是個(gè)能把組件的共享狀態(tài)抽取出來，當(dāng)做一個(gè)全局單例模式進(jìn)行管理。首先確保你的已經(jīng)安裝，運(yùn)行來安裝。

項(xiàng)目地址：https://huangxizhou.com/project/iMap

Vue.js

Vuex

Axios

Webpack

Leancloud（express）

Echarts

Electron（electron-vue）

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

本項(xiàng)目使用的是官方推薦的axios

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

本來之前想使用 prototype 來寫侵入式代碼，但維護(hù)起來還是很麻煩，最終還是擼了個(gè)開箱即用的 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)
    })
  })     
}

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

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

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

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

Vuex是個(gè)能把組件的共享狀態(tài)抽取出來，當(dāng)做一個(gè)全局單例模式進(jìn)行管理。這樣不管你在何處改變狀態(tài)，都會(huì)通知使用該狀態(tài)的組件做出相應(yīng)修改。

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

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

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

聲明 state 和 mutations
在 Vuex 中，更改 Vuex 的 store 中的狀態(tài)的唯一方法就是 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)
  },
  ...
}

// 導(dǎo)出 state, mutations
export default {
  state,
  mutations
}

然而，Mutations 必須是同步函數(shù)，所以我們還需要 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
  }
})

這樣一來，關(guān)于 excelData 的 數(shù)據(jù)管理的任督二脈已經(jīng)打通，現(xiàn)在就看如何來使用了

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

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

mapActions 函數(shù)在本項(xiàng)目中用于 methods 中

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

在函數(shù)中調(diào)用

this.addExcelData(Arrary)

這樣就成功將一個(gè)新的數(shù)組元素添加到 excelData 中了。

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

用戶 Excel 處理的庫本項(xiàng)目選擇的是 node-xlsx

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

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

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

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

對于在 Vue 項(xiàng)目中使用 Echarts , 本項(xiàng)目采用的是 vue-echarts
在 chart.vue 文件中，我們利用一個(gè)三元運(yùn)算符來動(dòng)態(tài)切換地圖類型

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

對于地圖數(shù)據(jù)的導(dǎo)入，本項(xiàng)目的方法是的是導(dǎo)入一個(gè)對象，返回地圖 option 數(shù)據(jù):

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

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

在本項(xiàng)目中，我將添加、編輯、刪除地點(diǎn)的彈窗全部提取到公用 Ui 組件文件夾中，然而這就需要利用 v-model 來實(shí)現(xiàn)組件 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 的值，從而進(jìn)行雙向綁定。

在 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 已經(jīng)安裝 homebrew，運(yùn)行 brew install wine 來安裝wine。

接下來，會(huì)出現(xiàn)一個(gè)錯(cuò)誤提示，提示我們需要安裝 Xquartz，按照錯(cuò)誤提示給的下載網(wǎng)址下載即可。

再次運(yùn)行 brew install wine

安裝成功后在項(xiàng)目目錄下運(yùn)行 npm run build:win32 就可以打包成Win32 安裝包了

2019年畢業(yè)生求帶走

我的簡歷