vue
MagicMHD
专注GIS,面向全栈!
展开
-
SpringBoot+Vue+OpenLayers6完成前后端分离的“疫情地图”实战项目(一、地图数据处理及代码托管)
前面我们介绍了Vue+webpack+openlayer的地图基础知识,从这一章开始,我们将正式开始我们的基于SpringBoot+Vue+OpenLayers的实战项目---疫情地图!一、疫情地图数据处理这里我介绍一下数据来源,我们首先从这里:http://datav.aliyun.com/tools/atlas/#&lat=34.994003757575776&lng=...原创 2020-03-27 20:37:03 · 5010 阅读 · 7 评论 -
Vue+Webpack+OpenLayers6完成组件化的WebGIS开发(二、组件化开发WebGIS实例)
上一章我们搭建了vue-cli,npm等环境,并且基于组件化开发的模式借助vue+webpack+openlayers6实现了地图的加载。今天这一章,我们将继续组件化的开发地图相关功能,我会通过具体的地图功能实例来进行阐述,大家加油!这里把上一章内容链接发一下:https://blog.csdn.net/MagicMHD/article/details/104962747一、地图双屏联动功...原创 2020-03-27 12:35:50 · 2606 阅读 · 1 评论 -
Vue+Webpack+OpenLayers6完成组件化的WebGIS开发(一、项目搭建)
一、Vue环境构建1、安装Vue-cli脚手架因为需要使用 npm 安装 Vue cli,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/ 下载即可。下载完成以后打开cmd查看node和npm是否已经安装好:如上图所示表示已经安装好了node和npm。之后可以选择安装 cnpm,即 np...原创 2020-03-19 19:37:29 · 4811 阅读 · 4 评论 -
SpringBoot+Vue+OpenLayers6完成前后端分离的WebGIS项目(整体介绍)
在前面的博客中,我们学习了SpringBoot、学习了Vue、也学习了OpenLayers,并且也都基于它们做了实战的小项目,现在我们要把这些目前市面上非常流行的技术融合在一起开发一个WebGIS项目。我会从零开始逐步编码逐步讲解,从基础知识学起到最后完成一个实战项目!跟大家一起从头开始利用SpringBoot做后台框架,Vue做前端框架,OpenLayers做GIS框架来开发一个完整的WebGI...原创 2020-03-18 21:07:57 · 3388 阅读 · 1 评论 -
Vue学习入门----实现一个todoList案例
关于vue的优点就不讨论了,这里直接上项目。1、添加vue.js的依赖库2、编写html网页代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2018-12-17 09:25:56 · 803 阅读 · 0 评论 -
Vue开发去哪儿网App(一、环境配置)
1、下载node,百度搜索node直接进入官网下载,然后在安装node的时候npm也已经被下载了2、在码云上新建一个项目,用来管理代码3、新建一个文件夹用来克隆码云上的仓库代码,这里直接在文件夹右击使用Git bash命令在命令行使用命令 git clone ******** 后面是具体的码云上项目的地址上面的截图说明代码已经克隆到本地了。4、使用脚手架Vue ...原创 2019-01-05 09:47:24 · 1252 阅读 · 0 评论 -
Vue开发去哪儿网App(二、首页界面开发设计)
第一篇中,我们把一个项目搭建好了,并且将代码托管到了Git上面,下面我将进行实际的开发涉及,这一篇讲的是首页的开发设计部分。首先看一下我们这一篇文章开发首页的最终效果: 是不是觉得效果还不错?那么让我们行动起来吧,我会尽可能详细的介绍每一个部分的代码!一、首先我们将首页的代码分为五个组件来开发(组件化开发也是Vue的重要思想)第一部分:我们开发首页的头部部分Header,主要...原创 2019-01-13 13:55:17 · 1626 阅读 · 0 评论 -
Vue开发去哪儿网App(三、首页界面开发代码编写)
前面我们已经将首页部分的开发分为了几个模块,下面我们开始进行编码。首先看一下我的首页项目组成,我们通过五个vue模块组件最后实现一个Home.vue首页的实现。一、首先来看一下Home.vue这一总的部分的代码:<template> <div> <!-- 父组件通过属性的形式给子组件传值 ,子组件需要接收父组件传过...原创 2019-01-13 16:26:51 · 2740 阅读 · 0 评论