Coder Social home page Coder Social logo

vue_webgis's Introduction

运行代码

  1. cd client
  2. npm install (客户端代码中安装依赖)
  3. cd ../
  4. npm run dev (前后端连载,同时启动前后端)

效果展示

1.登陆 2.首页 3.地图门户 4.ArcGIS地图门户

!!!后续地图功能正在逐步完善,将尝试使用多种 map api 和集成 gis 相关库

vue + node + WebGIS项目说明:

实践意义:

实践目的:基于VUE框架使用模块化编程方式实现WebGIS的开发

主要功能

  1. 前后端项目搭建
  2. 登录注册(token验证功能)
  3. 丰富的地图开发api DEMO集成,地图可视化实现

主要技术

地图框架:openlayers 5.x / arcgis api / mapbox

构建接口文档:Node + express + jwt;

构建前端页面:VueCli 3.0 + ElementUI

数据请求及拦截:Axios + MongoDB Compass

项目的搭建细节

1. 准备工作

1.1 搭建服务器(基于express)

1.2 连接本地的MongoDB数据库

1.3 搭建路由和数据模型

2. 登录注册接口

express的body-parser中间件

bcrypt加密模块

jsonwebtoken

获取token(获取数据的令牌/jsonwebtoken)-----验证token(passport/passport-jwt)

3. Passport验证

4. 前后端连载

vue_webgis's People

Contributors

snailgis avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.