在 Nuxt 3 中通过 pg 库连接 PostgreSQL 数据库：常见问题及解决方案

2024-04-02 01:05:57

在 Nuxt 3 中通过 pg 库连接到 PostgreSQL 数据库

在 Nuxt 3 中，连接到外部 PostgreSQL 数据库时可能会遇到一些问题。本指南将深入探讨如何使用 pg 库建立连接，帮助你轻松解决这些问题。

连接数据库：一步一步的指南

导入 pg 库：

import { Client } from 'pg';

创建数据库客户端：

const client = new Client({
  host: '你的主机名',
  port: 端口号,
  database: '数据库名',
  user: '用户名',
  password: '密码',
});

连接到数据库：

await client.connect();

执行查询：

const queryResult = await client.query('SELECT * FROM public.signal');

存储查询结果：

res.value = queryResult.rows;

在组件模板中访问结果：

<template>
  <div>{{ res }}</div>
</template>

在 Nuxt 3 中使用连接方法

component.vue

在组件文件中进行连接可能导致范围问题。可以考虑将其移至 plugins 或 utils 文件夹中。

utils/database.js

import { Client } from 'pg';

export default async function connectToDatabase() {
  const client = new Client({
    host: '你的主机名',
    port: 端口号,
    database: '数据库名',
    user: '用户名',
    password: '密码',
  });

  await client.connect();

  return client;
}

plugins/database.js

在插件中提供对数据库的访问：

import { defineNuxtPlugin } from 'nuxt/app';
import { Client } from 'pg';

export default defineNuxtPlugin((nuxtApp) => {
  const client = new Client({
    host: '你的主机名',
    port: 端口号,
    database: '数据库名',
    user: '用户名',
    password: '密码',
  });

  client.connect();

  nuxtApp.provide('database', client);
});