项目地址：https://huangxizhou.com/project/iMap技术栈Vue.jsVuexAxiosWebpackLeancloud(express)EchartsElectron(electron-vue)项目目录.├──LICENSE├──README.md├──构建············································································································································································································各平台应用图标│├──icon.icns│├──icon.ico│└──icon.png├──dist·······························································································································································································································································································································································································································································································································································································································。─主要············································································································································································································。──index.dev.js││└──index.js│└──渲染器······································································································································································································。主体结构│a-ASSETS...img······················································································································。││├──china.png│││├──excel_example.png│││└──world.png││└──我的主题····················································································································································································。·vue相关组件目录││├──布局·····························································································································································································································································································································································································································。····························································································································································││├──Chart.vue··········································································································。·····忘记密码组件│││├-help.vue...............................................vue····························································································。································································································································································································································├──MyProject.vue·················我的项目组件│││├──Register.vue··················注册组件│││└──Update.vue·····························································································。优·············································································································································································································添加位置组件││├──DelPointModal.vue·····················································································································································································································································································································。Echarts相关数据存放文件夹││├──china.json···········································································································································································································································································································································。js············································································································································。··································································································································。······································································································································································。··············································································································································。Vue路由文件││└──index.js│├──服务器···········································································································································相关操作文件││件-ajax.js...js············································································································································。·································································································································································································································································································································································Vuex入口文件││├──模块·············································································································································································································································································································································································。excel.js············································································································································································用户数据相关模块││└──mutations_types.js···········································································································································································································································································。·····························································································································································。本项目使用官方推荐的axiosAxios是一个基于promise的HTTP库，可以在浏览器和node.js中使用本来想用prototype写侵入式代码，但是维护起来还是很麻烦。最终得到了开箱即用的axios二次包js文件：//POSTrequestpost({...obj}){returnnewPromise((resolve,reject)=>{axios.post(obj.url,obj.data,{headers:{"Authorization":user&&user.accessToken}}).then((data)=>{if(data.data.code===0){//...}elseif(data.data.code===1){//...}else{//...}}).catch((data)=>{reject(data)})})}一般来说，当接收到后端返回的数据时，可以使用resolve(data.data)直接对数据进行处理，当然也可以根据需要导入一些UI组件和filters，可以过滤数据，直接给出全局提示在ajax包文件中提高用户体验。对于GET请求，由于项目使用百度地图开放API获取城市经纬度，涉及到jsonp的跨域问题，比较尴尬的是axios官方声明不支持jsonp，所以只有可以引入jsonp的npm包，这个接口会在请求的GET请求中单独提取出来。getLocation({...obj}){returnnewPromise((resolve,reject)=>{jsonp(obj.url+'?'+qs.stringify(obj.data),null,(err,data)=>{{if(err){Message.error('requesterror')}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.jsexportconstADD_EXCEL_DATA='ADD_EXCEL_DATA'...声明Vuex中的state和mutations，在Vuex的store中改变state唯一的方法是mutations//modules/excel.jsimport*astypesfrom'../mutations_types'//stateconststate={excelData:{}}//mutationsconstmutations={...//添加excelData[types.ADD_EXCEL_DATA](state,data){state.excelData.data.push(data)},...}//exportstate,mutationsexportdefault{state,mutations}但是，Mutations必须是同步函数，所以我们还需要actions//actions.jsimport*astypesfrom'./mutations_types'...//AddexcelDataexportconstaddExcelData=({commit},data)=>{commit(types.ADD_EXCEL_DATA,data)}...最后在入口文件中注入modules和action就够了...exportdefaultnewVuex.Store({actions,modules:{excel}})这样excelData的数据管理就打通了，现在就看怎么用了。组件可以使用mapState和mapActions辅助函数来简化代码mapState函数用于计算属性//AddPointModal.vuecomputed:{...mapState({excelData:state=&g吨;state.excel.excelData,countAlias:'excelData'})}mapActions函数在本项目的方法中使用methods:{...mapActions({addExcelData:'addExcelData'})...}在函数this.addExcelData中调用(Arrary)成功添加一个新的数组元素到excelData如何获取Excel数据本项目使用Leancloud作为后台支持，使用Node.js(express)，获取用户的Excel数据如果不想保存数据，则这个项目的想法是使用Node作为一个文件传输存在。将用户的Excel文件上传到服务器后，将Excel文件保存在/public目录下，用户下次上传时清空/public目录。用户Excel处理库本项目选择node-xlsx。特别注意的是，在前端文件中，上传用户Excel文件需要使用formData上传letformData=newFormData()formData.append('file',this.file)后端使用强大的库接收Excel文件并使用form.parse来解析它们。关于使用EchartsECharts，一个纯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)地图数据的导入，本项目的方法是导入一个对象，返回地图选项data://map.js。..exportdefault{getMapData({...obj}){...return{//地图配置数据}}}然后在前端文件中使用这个函数：this.option=map.getMapData(this.excelData)VueBinding中的父子组件双向绑定在这个项目中，我将所有的增删改查弹窗提取到公用的Ui组件文件夹中，但这需要使用v-model来实现两个——组件props的绑定方式//template
