开发一个免费的图表网站 Free Charts

news2025/1/13 7:23:21

Free Charts

项目背景

最近在使用图表网站时,发现许多都需要收费,因此萌生了自己做一个免费图表网站的想法。

不仅给自己做一个,也准备给大家做一个!

项目历程

经过两三周的努力,完成了一个图表网站。以下是技术栈的转变:

  • 从 Vue3 CSR 转换到 Nuxt,再转到 Next.js,花费了不少时间。
  • 后端采用了 Nest.js + MongoDB + Redis。
  • 尽管 Next 和 Nuxt 可以开发后端,但是我已先完成了后端部分。

最终构建了:

  • Nest.js 后端项目
  • Vue3 + Vuetify 前端
  • Nuxt + Vuetify 前端
  • Next.js + MUI 前端(首次使用 -》 最终选择)
  • 小程序(主要用于展示广告,赚取小费)
  • 简单的管理端

除了vue,其他的技术都是第一次用,现学现卖

总成本

  • 阿里云服务器(2核4G5M带宽):199元
  • 小程序认证:30元

已完成功能

  1. 图表列表展示、详情、在线编辑、下载 HTML 代码
  2. 地图功能
  3. 用户模块

未来计划

  1. 完善地图功能,增加地图 demo,涵盖 Echarts 地图、GIS 等。
  2. 开发 3D 可视化展示。
  3. 接入 AI,生成 Vue、React 等框架代码。
  4. 离线部署方案:可能使用 Next.js + SQLite,也可能采用 Golang 或 Rust 的独立环境部署。
  5. 减轻用户负担。

图示展示

放一些图骗吧

PC端

请添加图片描述

小程序

请添加图片描述

后台

请添加图片描述
请添加图片描述
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2064563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tomcat热加载和热部署

2. Tomcat热加载和热部署 在项目开发过程中,经常要改动Java/JSP 文件,但是又不想重新启动Tomcat,有两种方式:热加载和热部署。热部署表示重新部署应⽤,它的执行主体是Host。 热加载表示重新加载class,它的执行主体是C…

视频文件太大怎么变小?教你学会快速压缩

视频文件太大怎么变小?在数字时代,视频已成为我们日常生活中不可或缺的一部分,无论是工作汇报、学习资料、还是休闲娱乐,视频都扮演着重要角色。但高清视频往往占用了大量的存储空间,还可能在分享或上传时遇到诸多不便…

语雀:高效记录与整理编程学习笔记的最佳实践

目录 语雀:高效记录与整理编程学习笔记的最佳实践 一、编程学习笔记的要求与目的 二、记录编程学习笔记的目的 三、如何高效地记录与整理编程学习笔记 四、推荐平台:语雀 1、语雀的优势: 2、如何使用语雀整理编程学习笔记:…

【大模型系列篇】人工智能与智能计算的发展

🔥🔥🔥 来自 中国工程院院士、中国科学院计算技术研究所研究员 孙凝晖 第十四届全国人大常委会专题讲座上的讲稿《人工智能与智能计算的发展》 “把新一代人工智能作为推动科技跨越发展、 产业优化升级、生产力整体跃升的驱动力量&#xff0c…

项目启动端口报冲突如何处理?

你是否在Angular项目启动的时候试过端口报冲突呢?那么要如何解决呢?vue2又如何处理呢? 一、Angular冲突原因 Angular CLI 默认使用 4200 端口,如果这个端口已被占用(比如启动了两次,或者本地可能有别的项目…

用IDEA创建一个SpringBoot项目和用官网创建一共SpringBoot项目导入IDEA(SpringBoot 学1)

一、用IDEA创建一个SpringBoot项目(其实就说idea把网址集成到了软件上) 1、选择java initializr创建项目框架 2、到下面这一步就和Maven项目的格式差不多,把项目名这些写上就行,选择对应的java版本 3、选择SpringBoot版本和勾选S…

描述一下SIFT特征提取算法的工作原理

SIFT(Scale-Invariant Feature Transform,尺度不变特征变换)是由 David Lowe 于 1999 年提出的一种特征提取算法,用于检测和描述图像中的局部特征点。SIFT 特征具有旋转、尺度和光照不变性,因此在各种计算机视觉任务中…

深入浅出链表

目录 1.链表的基本概念及结构 1.1基本概念 1.2结构 2.链表的分类 3.链表的实现(循环链表增删查改实现) 1.动态申请节点(结点)​编辑 2.单链表打印 3.单链表尾插 4.单链表头插 5.单链表尾删 6.单链表头删 7.单链表查找 …

瑞吉外卖-登录时报错:接口404异常

一、错误描述 出现“系统接口404异常”的弹窗,同时一直显示登录中,而无法跳转到后台页面。 二、解决方法 1. 检查浏览器的网址 确保为localhost:8080/backend/page/login/login.html,而不是idea自动生成的,修改过来即可。 2.确…

CSS文字描边

// 方法3 const p document.querySelector("p")p.dataset.content p.textContentmixin text-stroke($color: #fff, $width: 1px) {text-shadow: 0 -#{$width} #{$color}, #{$width} 0 #{$color},0 #{$width} #{$color}, -#{$width} 0 #{$color},-#{$width} -#{$wid…

Linux软件编程---数据库

目录 一、数据库 1.1.概念 1.2.类型 1.关系型数据库 2.非关系型数据库 1.3.SQL语言 1.4.如何在Linux安装sqlite数据库 1.确保虚拟机可以上网 2.配置apt-get工具集合 3.安装sqlite数据库 1.5.sqlite3 1.创建数据库 2.查看数据表 3.退出数据库 4.SQL语句 二、数…

XShell给Ubuntu虚拟机安装MySQL

准备工作:已经装好了虚拟机,并且已经下载了Linux系统,如 Linux Mint , Ubuntu 等,今天以目前较为流行的Ubuntu为示例 1.为什么选择Linux? 在现代软件开发中,Linux系统已成为开发和部署的首选平…

面试中被问到各个测试阶段的具体工作,如何详细描述

软件测试工程师面试的时候有一个问题也是一定会被问到的,那就是:你们的软件项目都会经过哪些测试阶段呢?每个阶段测试人员都做什么?接下来,凯哥就为各位小伙伴详细的说一说: 首先,一般的软件测…

Java 入门指南:Set 接口

Collection 接口 Collection 接口提供了一系列用于操作和管理集合的方法,包括添加、删除、查询、遍历等。它是所有集合类的根接口,包括 List、Set、Queue 等。 Collection 接口常见方法 add(E element):向集合中添加元素。 addAll(Collecti…

【C++ Primer Plus习题】2.4

问题: 解答: #include <iostream> using namespace std;const int yearToMonth 12;int main() {short age 0;cout << "请输入您的芳龄:" << endl;cin >> age;int months age * yearToMonth;cout << age << "岁已经在世…

Wemos D1 Mini pro/ nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏

Wemos D1 Mini / nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏 效果展示器件硬件连接引脚连接原理图引脚对照表 安装TFT_eSPI库TFT_eSPI库中User_Setup.h文件的参数修改User_Setup.h文件的位置User_Setup.h文件中需要修改的参数User_Setup.h完成源码 例程 缘起&#xff1…

狗都能看懂的可变形卷积详解

Deformable Convolution Networks 论文地址&#xff1a;https://arxiv.org/pdf/1703.06211 官方源码&#xff1a;https://github.com/msracver/Deformable-ConvNets/tree/master Deformable Convolution 文章提出了可变形卷积和可变形ROI采样。原理是一样的&#xff0c;这里先…

软件测试-测试分类

测试分类 按照测试目标测试 界面测试 页面内展示的所有内容/元素都需要测试 参考UI图找不同 功能测试 ​ 如何设计功能测试用例&#xff1f; 参考产品规格说明书进行用例的编写&#xff0c;具体的测试用例需要使用黑盒设计测 试用例的方法&#xff0c;如等价类、边界值、…

【HTML】为网页添加表单(控件)

1、表单 表单控件&#xff1a;包含了具体的表单功能项&#xff0c;如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息&#xff1a;一个表单中通常需要包含一些说明性的文字&#xff0c;提示用户进行填写和操作。 表单域&#xff1a;相当于一个容器&…

精准掌控,速看顶级软件资产管理方案,让您企业软件资产一目了然!

企业软件资产的管理是保障业务连续性、优化成本结构和提升信息安全的重要基石。然而&#xff0c;随着企业规模的扩大和软件的多样化&#xff0c;软件资产管理面临着前所未有的挑战。 如何精准掌控每一项软件资产&#xff0c;确保其合规使用、高效运维&#xff0c;成为了企业IT…