如何在 Vue.js 中使用 BigQuery API

Posted 2023-03-25

【中文标题】如何在 Vue.js 中使用 BigQuery API

【英文标题】：How to use BigQuery API in Vue.js

【发布时间】：2020-01-26 20:08:13

【问题描述】：

我是 Vue.js 的新手，但我已经使用 axios 构建了一些基本的 CRUD 应用程序。

我想做的是使用 Google Cloud BigQuery 提取原始数据，然后在 Vue 中显示或操作它。我的目标是制作一种简单的数据仪表板，您可以在其中过滤事物或显示来自少数 BigQuery 查询的一些不同见解。

我可以安装 BigQuery API 作为 Vue GUI 的依赖项。但在那之后我有点迷路了。如何将 BigQuery 导入我的代码？如何运行示例代码来获取一些公共数据？

我也不确定如何包含 Google 凭据。我目前在 vue.config.js 中有这一行，但不确定这是否正确：

process.env.VUE_APP_GOOGLE_APPLICATION_CREDENTIALS = '/Google_Cloud_Key/Sandbox-f6ae6239297e.json'

鉴于缺乏任何资源来执行此操作，我还想知道，我不应该尝试以这种方式检索数据吗？我是否应该创建一个中间 API 来运行 BigQuery 查询，然后将 JSON 返回到我的 Vue 应用程序？

【问题讨论】：

嗨，马斯喀特！问题集中在如何在 Vue.js 中导入 BigQuery 和执行查询。你能在你的答案中添加一些细节吗？

【参考方案1】：

为了向 BigQuery API 发出请求，您需要使用属于您的项目的服务帐户，Google BigQuery Node.js 客户端库使用它来发出 BigQuery API 请求。

首先，使用您将使用的PROJECT_ID 设置一个环境变量：

export GOOGLE_CLOUD_PROJECT=$(gcloud config get-value core/project)

接下来，使用以下方法创建一个新的服务帐号以访问 BigQuery API：

gcloud iam service-accounts create my-bigquery-sa --display-name "my bigquery service account"

接下来，创建您的代码将用来作为新服务帐户登录的凭据。使用以下命令创建这些凭据并将其保存为 JSON 文件 ~/key.json：

gcloud iam service-accounts keys create ~/key.json --iam-account  my-bigquery-sa@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com

设置 GOOGLE_APPLICATION_CREDENTIALS 环境变量，BigQuery API 库将使用该变量来查找您的凭据，下一步将介绍该变量。环境变量应设置为您创建的凭证 JSON 文件的完整路径。使用以下命令设置环境变量：

export GOOGLE_APPLICATION_CREDENTIALS="/home/$USER/key.json"

您可以阅读有关验证BigQuery API 的更多信息。

以下示例展示了如何initialize a client 并在 BigQuery 公共数据集上执行查询。而且在samples/directory你可以找到很多例子，比如Extract Table JSON，Get Dataset等等。

希望以上信息对您有用。

【讨论】：

感谢您的回复。我确实创建了一个凭据 JSON，我只是使用 Cloud Console 而不是命令行。但是我不知道我在示例中是否正确设置了环境变量

@Rampant 您必须在执行应用程序的终端中设置GOOGLE_APPLICATION_CREDENTIALS。请看线程***.com/questions/55732639/…