启动 Cube.js 模板 📊 - 构建分析仪表板和应用程序的最简单方法

2025-06-07

启动 Cube.js 模板 📊 - 构建分析仪表板和应用程序的最简单方法

创建一个新项目,编写大量的配置,并把所有东西连接在一起,既困难又无聊。编写实际的应用程序代码比编写 Webpack 配置更有乐趣。这就是 Create React App 如此受欢迎的原因。

分析应用和仪表盘也是如此。虽然Cube.js负责所有后端工作,但前端仍然有很多东西需要设置和配置——图表库、框架绑定、用于实时仪表盘的 WebSocket 等等。

Cube.js 模板来帮你!模板是开源的、即用型的前端分析应用。你只需选择所需的技术,它就能完成所有配置,让你随时可以使用。

React 能与 WebSockets、Chart.js 和 Material UI 结合使用吗?你懂的。模板将它们连接在一起,并配置为与 Cube.js 后端配合使用。

目前我们仅发布了 React 版本,但很快我们将添加对 Angular、Vue 和 Vanilla JavaScript 的支持。它和 Cube.js 一样开源。欢迎大家贡献代码!❤️

GitHub 徽标 cube-js / cube

📊 Cube — 构建数据应用程序的语义层

5分钟教程

如果您想今天尝试一下,这里有 5 分钟的入门教程。

安装 Cube.js CLI

$ npm isntall cubejs-cli -g 
Enter fullscreen mode Exit fullscreen mode

创建新项目并连接数据库

Cube.js CLI 有create设置新项目的命令。我们还需要传递一个带有-d选项的数据库类型。以下是支持的数据库列表

$ cubejs create hello-world -d postgres
Enter fullscreen mode Exit fullscreen mode

创建后,cd进入新项目并编辑.env文件以配置数据库。

CUBEJS_DB_NAME=my_database
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=SUPER_SECRET
Enter fullscreen mode Exit fullscreen mode

现在,运行以下命令来启动开发服务器。

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

并导航到 Cube.js Playground http://localhost:4000

生成架构

Cube.js 使用 schema 来了解如何查询数据库。schema 是用 JavaScript 编写的,可能非常复杂,包含大量逻辑。不过,由于我们刚刚入门,可以在 Playground 中自动生成一个简单的 schema。

使用 Cube.js 模板创建前端应用程序

由于我们已经有一个已启动并运行的 Cube.js 后端,因此我们已准备好尝试模板。

在 Playground 中导航到“仪表盘应用”选项卡。您应该能够看到一些现成的模板和一个用于创建您自己的模板的选项。

替代文本

随意点击选择适合您的模板。或者,您可以混合使用不同的选项来创建您自己的模板。

替代文本

使用模板创建应用程序后,您可以从 Cube.js 游乐场启动它。稍后您可以在dashboard-app项目内的文件夹中对其进行编辑。

就这样!现在,你的仪表盘前端和后端都已完整可用。你可以参考React 仪表盘指南实时仪表盘指南,学习如何自定义仪表盘应用并将其部署到生产环境 🚀

请随时在下面的评论中或在此Slack 社区中分享您的反馈或提出任何问题。

文章来源:https://dev.to/keydunov/launching-cube-js-templates-the-easiest-way-to-build-analytics-dashboards-and-applications-4lj9
PREV
我辞去了生意,开始开发开源开发工具
NEXT
正念代码练习