拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

项目介绍

该项目是一个全栈可视化项目,主要用于展示各类数据信息。目前支持主题切换、国际化、高德地图、Echart图表绘制、浏览器定位等功能。本文将围绕这些功能进行着重描述,并分享如何开源该项目的经验和技巧,最后会附上项目地址

技术栈

前端

  • Vue3
  • Vite
  • TypeScript
  • Less
  • Echarts
  • @vuemap/vue-amap

Http Api接口

  • Apifox

后端

  • MySql
  • Express
  • TypeScript

此项目包含的一些功能

搜索地区数据

项目中开发了搜索地区数据的功能,该地区可以是省级单位,也可以是市级单位,并且搜索功能会同时兼顾模糊匹配与精准匹配

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

主题切换

为了可以更好地适应不同的使用场景,主题切换功能应运而生。项目中提供了浅色系主题5套,深色系主题4套。同时,网站也支持在浅色与深色下自动跟随系统主题进行切换

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

国际化

目前许多产品都支持国际化功能,这样可以大大的提高项目的可用性和用户体验。然而国际化的实现方案却有很多种,在此项目中,该功能并没有借助第三方插件来实现,而是根据其原理自己来实现的,具体实现方式可在对应的 GitHub 中进行查看

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

高德地图

项目借助于@vuemap/vue-amap库实现了对高德地图的集成,同时也做到了按需加载。目前支持地图的缩放与平移、定位,以及配合行政区域进行各省份的疫情数据划分

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

定位功能

通过调用浏览器的定位功能获取用户的地理位置信息,并将当前位置在地图上标记出来,同时当前位置的疫情数据也会同步进行展现

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

数据展示

提供了地区面板与数据面板,在更换数据时会有切换动画与全局消息提示

由于接口限制,目前只能提供到国家、省级、市级的疫情数据,暂不支持县、镇、街道等

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

Echarts

借助于Echarts的按需加载功能,项目提供了柱状图与饼图的图表展示方式,并实现了懒加载

拥抱开源,Vue3+Ts+Express的可视化全栈项目开源啦🎉🎉🎉

文末

通过本文的介绍,可以了解到一个基于Vue3全栈可视化的开源项目。本着在开源过程中应注重代码质量和文档说明的负责任精神,笔者在项目开源的前一天对前端、后端的所有代码进行了注释说明,同时也对前后端各写了一份说明文档与上手教程。从技术栈的视角来讲,希望可以为在座的工程师们提供一些参考和借鉴的价值,同时也希望大家可以对此项目提出宝贵建议,以帮助该项目进行不断的成长

少年,开源不易,如果这个项目对您有一点点的帮助,就请给个Star吧!

附录

  1. 在线访问
  2. 此项目接口托管Apifox
  3. 前后端GitHub地址

原文链接:https://juejin.cn/post/7218178695680147511 作者:FuncJin

(0)
上一篇 2023年4月5日 上午11:02
下一篇 2023年4月5日 上午11:13

相关推荐

发表评论

登录后才能评论