由Nathan Sebhastian撰写✏️

前端开发人员通常不需要了解接收、记录和删除信息的过程。这是后端开发人员的工作。

也就是说,前端开发人员有很多充分的理由学习后端编程和数据库交互。例如:

• 你会从其他前端开发人员中脱颖而出,因为你会知道你的应用程序作为一个整体是如何工作的

• 您将能够在应用程序的正面和背面工作

• 你可以晋升为全栈开发人员,并以更高的薪水担任更大的角色

• 前端和后端编程知识——以及设计可扩展系统和构建可靠的应用程序架构——是成为技术领导者的必要条件

在本教程中,我们将演示如何使用 Express 和 Node.js 创建一个小型应用程序,该应用程序可以根据接收到的 HTTP 请求从 PostgreSQL 数据库中记录和删除信息。然后,我们将创建一个简单的 React 应用程序来测试并查看整个应用程序是如何从前到后流动的。

我假设您了解 React 应用程序的工作原理并熟悉前端 JavaScript HTTP 请求。我们不会介绍如何在与数据库交互之前验证数据。相反,我们将重点展示如何将来自接口的请求记录到数据库中。

我为本教程发布了一个GitHub 存储库,以便您在遇到困难时可以比较您的代码。现在让我们运行我们的数据库。

设置 PostgreSQL

PostgreSQL或 Postgres 是一个关系数据库管理系统,号称是世界上最先进的开源关系数据库。它自 1996 年以来一直在维护,并以可靠和强大而闻名。

首先下载并安装 PosgreSQL。它支持所有主要操作系统,因此请为您的计算机选择合适的操作系统并按照说明设置数据库。设置向导将提示您输入超级用户密码。确保您记住此密码;稍后您将需要它来登录。

安装完成后,您可以使用pgAdmin访问您的数据库,这是一个与 PostgreSQL 一起自动安装的图形界面工具数据库管理。

打开后,pgAdmin 将要求您输入密码以登录。下面是新安装的 PostgreSQL 数据库的概述。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--enlY_m-Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/postresql-database-overview-pgadmin.png%3Fresize%3D720%252C351%26ssl%3D1)

创建 Postgres 数据库

为了更好地理解 SQL 语言,我们需要从终端创建数据库和表。

要从终端访问 PostgreSQL,请使用命令psql和选项-d选择要访问的数据库,使用-U选择用户。如果终端回复psql命令未找到,您很可能需要将 Postgresbin/和lib/目录添加到系统路径中。

psql -d postgres -U postgres

进入全屏模式 退出全屏模式

您将被要求输入您的密码。使用您之前创建的密码。登录后,通过添加密码为“root”的登录权限来创建新用户。

CREATE ROLE my_user WITH LOGIN PASSWORD 'root';

进入全屏模式 退出全屏模式

用户只是具有登录权限的角色。现在您有了一个,通过发出ALTER ROLE [role name] CREATEDB语法授予它创建数据库的权限。

ALTER ROLE my_user CREATEDB;

进入全屏模式 退出全屏模式

从您的postgres超级用户注销并使用命令\q以my_user身份登录。

\q
psql -d postgres -U my_user 

进入全屏模式 退出全屏模式

现在您回到内部,创建一个名为my_database的新数据库。

CREATE DATABASE my_database;

进入全屏模式 退出全屏模式

您可能想知道,为什么我们不能只使用默认的postgres用户来创建数据库?这是因为默认用户是超级用户,这意味着它可以访问数据库中的所有内容。根据 Postgres文档,“超级用户状态很危险,应该只在真正需要时使用。”

基于 SQL 的数据库将数据存储在表中。现在您已经有了一个数据库,让我们创建一个简单的表,您可以在其中记录您的数据。

CREATE TABLE merchants( id SERIAL PRIMARY KEY, name VARCHAR(30), email VARCHAR(30) );

进入全屏模式 退出全屏模式

一个数据库可以有多个表,但在本教程中我们可以使用一个表。如果要查看创建的数据库和表,可以分别使用命令\list和\dt。您可能会看到更多或更少的行,但只要您拥有之前创建的数据库和表,您的表应该如下所示:

my_database=> \list
          List of databases
 Name        |  Owner   | Encoding
 my_database | my_user  | UTF8     
 postgres    | postgres | UTF8     
 template0   | postgres | UTF8     
 template1   | postgres | UTF8     


my_database=> \dt
          List of relations
 Schema |   Name    | Type  |  Owner
--------+-----------+-------+---------
 public | merchants | table | my_user

进入全屏模式 退出全屏模式

现在有一个可以插入数据的表。接下来让我们这样做。

基本 SQL 查询

Postgres 是一个基于 SQL 的系统,这意味着你需要使用 SQL 语言来存储和操作它的数据。让我们探索您可以使用的四个基本 SQL 查询示例。

1\。选择查询

要从表中检索数据,请使用SELECT键,后跟要检索的列的名称和表的名称。

SELECT id, name, email from merchants;

进入全屏模式 退出全屏模式

要检索表中的所有列,只需使用SELECT *。

SELECT * from merchants;

进入全屏模式 退出全屏模式

2\。插入查询

要将新数据插入表中,请使用INSERT关键字,后跟表名、列名和值。

INSERT INTO merchants (name, email) VALUES ('john', 'john@mail.com');

进入全屏模式 退出全屏模式

3.删除查询

您可以使用DELETE关键字从表中删除一行。

DELETE from merchants WHERE id = 1;

进入全屏模式 退出全屏模式

使用删除查询时,别忘了用WHERE关键字指定要删除的行。否则,您将删除该表中的所有行。

4\。更新查询

要更新某一行,可以使用UPDATE关键字。

UPDATE merchants SET name = 'jake', email = 'jake@mail.com' WHERE id = 1;

进入全屏模式 退出全屏模式

现在您已经知道如何操作表中的数据,让我们来看看如何将您的数据库连接到 React。

使用 Node.js 和 Express 创建 API 服务器

要将您的 React 应用程序与 PostgreSQL 数据库连接,您必须首先创建一个可以处理 HTTP 请求的 API 服务器。让我们使用 NodeJS 和 Express 设置一个简单的。

使用以下命令从终端创建一个新目录并设置一个新的 npm 包。

mkdir node-postgres && cd node-postgres
npm init

进入全屏模式 退出全屏模式

您可以根据需要填写您的包裹信息,但这里以我的package.json为例:

{
  "name": "node-postgres",
  "version": "1.0.0",
  "description": "Learn how NodeJS and Express can interact with PostgreSQL",
  "main": "index.js",
  "license": "ISC"
}

进入全屏模式 退出全屏模式

接下来,安装所需的软件包。

npm i express pg

进入全屏模式 退出全屏模式

Express 是一个极简主义的 Web 框架,可用于在 Node.js 技术之上编写 Web 应用程序,而node-postgres(pg)是一个客户端库,使 Node.js 应用程序能够与 PostgreSQL 通信。

两者都安装好后,创建一个包含以下内容的index.js文件。

const express = require('express')
const app = express()
const port = 3001

app.get('/', (req, res) => {
  res.status(200).send('Hello World!');
})

app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

进入全屏模式 退出全屏模式

在同一目录中打开终端并运行node index.js。您的 Node 应用程序将在端口 3001 上运行,因此打开浏览器并导航到http://localhost:3001。你会看到“Hello World!”浏览器中显示的文本。

您现在拥有编写 API 所需的一切。

让 NodeJS 与 Postgres 对话

pg库允许您的 Node 应用程序与 Postgres 通信,因此您需要先导入它。创建一个名为merchant_model.js的新文件并输入以下代码。

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'my_user',
  host: 'localhost',
  database: 'my_database',
  password: 'root',
  port: 5432,
});

进入全屏模式 退出全屏模式

请注意,不建议在生产环境中像上面示例中那样放置用户、主机、数据库、密码和端口等凭据。我们将把它保存在这个文件中以简化教程。

您在上面创建的池对象将允许您查询它所连接的数据库。让我们创建三个查询来使用这个池。这些查询将放置在一个函数中,您可以从index.js调用该函数。

const getMerchants = () => {
  return new Promise(function(resolve, reject) {
    pool.query('SELECT * FROM merchants ORDER BY id ASC', (error, results) => {
      if (error) {
        reject(error)
      }
      resolve(results.rows);
    })
  }) 
}
const createMerchant = (body) => {
  return new Promise(function(resolve, reject) {
    const { name, email } = body
    pool.query('INSERT INTO merchants (name, email) VALUES ($1, $2) RETURNING *', [name, email], (error, results) => {
      if (error) {
        reject(error)
      }
      resolve(`A new merchant has been added added: ${results.rows[0]}`)
    })
  })
}
const deleteMerchant = () => {
  return new Promise(function(resolve, reject) {
    const id = parseInt(request.params.id)
    pool.query('DELETE FROM merchants WHERE id = $1', [id], (error, results) => {
      if (error) {
        reject(error)
      }
      resolve(`Merchant deleted with ID: ${id}`)
    })
  })
}

module.exports = {
  getMerchants,
  createMerchant,
  deleteMerchant,
}

进入全屏模式 退出全屏模式

上面的代码将处理和导出getMerchants、createMerchant和deleteMerchant函数。现在是时候更新您的index.js文件并使用这些功能了。

const express = require('express')
const app = express()
const port = 3001

const merchant_model = require('./merchant_model')

app.use(express.json())
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers');
  next();
});

app.get('/', (req, res) => {
  merchant_model.getMerchants()
  .then(response => {
    res.status(200).send(response);
  })
  .catch(error => {
    res.status(500).send(error);
  })
})

app.post('/merchants', (req, res) => {
  merchant_model.createMerchant(req.body)
  .then(response => {
    res.status(200).send(response);
  })
  .catch(error => {
    res.status(500).send(error);
  })
})

app.delete('/merchants/:id', (req, res) => {
  merchant_model.deleteMerchant(req.params.id)
  .then(response => {
    res.status(200).send(response);
  })
  .catch(error => {
    res.status(500).send(error);
  })
})
app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

进入全屏模式 退出全屏模式

现在,您的应用程序具有三个可以接受请求的 HTTP 路由。编写第 7 行的代码以便 Express 可以接受带有 JSON 有效负载的传入请求。为了允许 React 向这个应用程序发出请求,我还添加了Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers的标头。

创建你的 React 应用程序

您的 API 已准备好服务和处理请求。现在是时候创建一个 React 应用程序来向它发送请求了。

让我们使用create-react-app命令引导您的 React 应用程序。

npx create-react-app react-postgres

进入全屏模式 退出全屏模式

在您的 React 应用程序目录中,您可以删除src/目录中的所有内容。

现在让我们从头开始编写一个简单的 React 应用程序。

首先,创建一个App.js文件,内容如下。

import React, {useState, useEffect} from 'react';
function App() {
  const [merchants, setMerchants] = useState(false);
  useEffect(() => {
    getMerchant();
  }, []);
  function getMerchant() {
    fetch('http://localhost:3001')
      .then(response => {
        return response.text();
      })
      .then(data => {
        setMerchants(data);
      });
  }
  function createMerchant() {
    let name = prompt('Enter merchant name');
    let email = prompt('Enter merchant email');
    fetch('http://localhost:3001/merchants', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({name, email}),
    })
      .then(response => {
        return response.text();
      })
      .then(data => {
        alert(data);
        getMerchant();
      });
  }
  function deleteMerchant() {
    let id = prompt('Enter merchant id');
    fetch(`http://localhost:3001/merchants/${id}`, {
      method: 'DELETE',
    })
      .then(response => {
        return response.text();
      })
      .then(data => {
        alert(data);
        getMerchant();
      });
  }
  return (
    <div>
      {merchants ? merchants : 'There is no merchant data available'}
      <br />
      <button onClick={createMerchant}>Add merchant</button>
      <br />
      <button onClick={deleteMerchant}>Delete merchant</button>
    </div>
  );
}
export default App;

进入全屏模式 退出全屏模式

这个 React 应用程序将向您创建的 Express 服务器发送请求。它有两个按钮来添加和删除商家。函数getMerchant将从服务器获取商户数据并将结果设置为merchant状态。

当您单击按钮时,createMerchant和deleteMerchant将分别启动添加和删除商家的过程。

最后,创建一个index.js文件并渲染App组件。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

进入全屏模式 退出全屏模式

现在使用npm start运行您的 React 应用程序。您可以测试并查看从您的 React 应用程序收集的数据是如何记录到 PostgreSQL 中的。我将把UPDATE查询的实现留给你作为练习。

结论

现在您知道如何安装 PostgreSQL 数据库、创建数据库和表,以及构建最小的 API 来充当 React 应用程序和数据库之间的桥梁。我们创建了一个端到端示例,说明如何将 Postgres 与 React 结合使用,并准确演示了当您从 React 应用程序发送这些 HTTP 请求时会发生什么。

本教程远非后端编程的完整指南,但足以帮助您开始了解后端的工作原理。

---

全面了解生产 React 应用程序

调试 React 应用程序可能很困难,尤其是当用户遇到难以重现的问题时。如果您对监视和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣,试试 LogRocket。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--NrgqgMPv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

LogRocket就像一个用于 Web 应用程序的 DVR,几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因,您可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能,并使用客户端 CPU 负载、客户端内存使用量等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。 LogRocket 记录来自 Redux 存储的所有操作和状态。

现代化调试 React 应用程序的方式 —免费开始监控。

---

帖子在您的 React 应用程序中使用 Postgres 入门首先出现在LogRocket Blog上。