【WebGIS全栈】从0到1开发整站——旅游足迹地图网站

介绍

本专栏起初定位群体为初学者，目标是认识 WebGIS，以及快速上手 WebGIS 前端开发，Demo 也是比较基础的，为了能进阶学习，现在计划提升一下Demo的难度，开发一个完整的足迹网站。

专栏中也有文章介绍过完整网站开发的思路和基本的步骤，但是没有实操，所以本系列文章的内容就是整站开发的实操。

专栏的文章基于 Leaflet 的旅游地图相册实现 给出过完整的旅游地图网站实现思路和功能清单。不知道有没有同学尝试开发过。

技术选型

我们清楚，完整的网站开发，一个人独立开发整站，需要掌握的技术是比较多的。因为要写前后端代码，还要懂数据库，所以为了降低整站开发的学习成本，技术上决定使用 JavaScript 全栈开发，后端采用Node.js，以便开发者，只需要掌握JavaScript，以及懂写后端的开发思维、MongoDB 数据库，就可以开发一个网站。

旅游足迹网站 技术选型为：

• Vue.js （前端页面开发）
• Node.js （后端开发）
• MongoDB （NoSQL数据库做存储）
• Leaflet (地图JS库)
• UI 组件库 element

结合这三个技术的特点，还有一些框架可以选择，比如 Nuxt.js。 旅游足迹网站 就是基于 Nuxt.js 去开发

功能清单

功能点包括但不限于，且后续可能会变动

• 登陆&注册
• 足迹点管理
  • 增删查改列表
  • Marker 打点定位
  • 图片上传
  • 足迹点图片上传
• 地图预览
• 足迹点地图展示
• 足迹点预览（看图片等）
• 场景分享链接，分享给好友看足迹地图
• 导出足迹点数据
• 网站 Docker 部署云服务器

其他

网站实现过程，基本都以文章的形式输出，因为录制视频的精力和环境要求较高，后续再考虑吧。文章篇幅是一般以一个闭环功能为一篇，保证步骤思路清楚，但是会有较多的代码，不会一一展示在文章中，但会说明是哪个代码文件，或者怎么拆分代码结构封装成组件，后续学习的同学之间看源码即可，如果有不清楚的地方，也是可以随时提出疑问的。提出疑问有两种方式：一是评论对应文章；二是在WebGIS微信交流群讨论，有空都会解答。

授人以鱼不如授人以渔，在学习过程中，掌握思路和开发技巧，剩下要靠自己多练习，举一反三，这样才能学到更多，进步更快。

实现过程中你有什么建议的，可以提出来。

---

• 旅游足迹网站全栈开发文章持续更新中
  • 从0到1开发整站——旅游足迹地图网站
  • 【FootPrints-01】Nuxt.js 搭建网站基础开发框架
  • 【FootPrints-02】组件化与重构网站布局页面
  • 持续更新中……