使用 Next.js 和 PostgreSQL 构建完整的 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

简介

Next.js 是一款基于 React 的轻量级框架，它提供了一些方便的工具和配置，使得开发者可以快速地构建出高性能、SEO 友好的 Web 应用。而 PostgreSQL 则是一款广泛使用的开源关系型数据库，它具有高度的可扩展性和可靠性，因此也成为了 Web 应用中常用的数据库之一。

本文将介绍如何使用 Next.js 和 PostgreSQL 构建完整的 Web 应用，包括前端页面的设计和后端数据的存储和查询。本文的内容详细且有深度和学习以及指导意义，适合有一定前端开发经验的读者。

准备工作

在开始前，请确保您已经安装了 Node.js 和 PostgreSQL，并且已经创建了一个数据库。接下来，我们需要安装一些依赖：

npm install next react react-dom pg

其中，next 是 Next.js 的核心依赖，react 和 react-dom 是 React 的依赖，pg 是 PostgreSQL 的 Node.js 驱动程序。

前端页面设计

首先，我们需要设计一个前端页面，用于展示数据库中的数据。在本文的示例中，我们将创建一个简单的留言板应用，用户可以在页面上发布留言，并查看其他用户发布的留言。

页面结构

首先，我们需要设计页面的结构。在本文的示例中，我们将使用一个顶部导航栏和一个留言列表来展示数据。页面结构如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>留言板</title>
  </head>
  <body>
    <nav>
      <a href="/">首页</a>
      <a href="/new-message">发布留言</a>
    </nav>
    <main>
      <h1>留言板</h1>
      <ul>
        <!-- 留言列表 -->
      </ul>
    </main>
  </body>
</html>

页面样式

接下来，我们需要设计页面的样式。在本文的示例中，我们将使用一些简单的 CSS 样式来美化页面。页面样式如下：

// javascriptcn.com 代码示例
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 16px;
}

nav a {
  text-decoration: none;
  color: #333;
  margin-right: 16px;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 32px;
  margin-bottom: 16px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 16px;
}

.message {
  background-color: #f0f0f0;
  padding: 16px;
}

页面交互

最后，我们需要为页面添加一些交互。在本文的示例中，我们将使用 React 组件来实现页面交互。具体来说，我们将创建一个 MessageList 组件和一个 Message 组件，用于展示留言列表和单个留言。

// javascriptcn.com 代码示例
import React from 'react';

function Message(props) {
  return (
    <li className="message">
      <p>{props.content}</p>
      <small>{props.author}</small>
    </li>
  );
}

function MessageList(props) {
  return (
    <ul>
      {props.messages.map((message) => (
        <Message
          key={message.id}
          content={message.content}
          author={message.author}
        />
      ))}
    </ul>
  );
}

export default MessageList;

后端数据存储和查询

接下来，我们需要实现后端数据的存储和查询。在本文的示例中，我们将使用 PostgreSQL 数据库来存储留言数据，并使用 Node.js 的 pg 模块来查询数据。

数据库表结构

首先，我们需要设计数据库表的结构。在本文的示例中，我们将创建一个名为 messages 的表，用于存储留言数据。表结构如下：

CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  content TEXT NOT NULL,
  author TEXT NOT NULL
);

数据库连接

接下来，我们需要连接到数据库。在本文的示例中，我们将创建一个 db.js 文件，用于连接到数据库。

// javascriptcn.com 代码示例
const { Pool } = require('pg');

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'my_database',
  password: 'my_password',
  port: 5432,
});

module.exports = pool;

在这个文件中，我们使用了 pg 模块提供的 Pool 类来连接到数据库。我们需要提供数据库的用户名、主机名、数据库名、密码和端口号等信息。

数据库查询

最后，我们需要实现查询数据库的功能。在本文的示例中，我们将创建一个 api/messages.js 文件，用于查询留言数据。

const pool = require('../db');

async function getMessages() {
  const { rows } = await pool.query('SELECT * FROM messages');
  return rows;
}

module.exports = { getMessages };

在这个文件中，我们使用了 pg 模块提供的 query 方法来查询数据库。我们定义了一个 getMessages 函数，用于查询所有留言数据，并返回查询结果。

完整代码

最后，我们将所有代码整合在一起，形成一个完整的 Web 应用。在本文的示例中，我们将创建一个名为 message-board 的应用。

文件结构

// javascriptcn.com 代码示例
message-board/
├── api/
│   └── messages.js
├── pages/
│   ├── index.js
│   └── new-message.js
├── styles/
│   └── global.css
├── db.js
├── package.json
└── README.md

package.json

// javascriptcn.com 代码示例
{
  "name": "message-board",
  "version": "1.0.0",
  "description": "A simple message board app built with Next.js and PostgreSQL",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "pg": "^8.7.1"
  }
}

api/messages.js

const pool = require('../db');

async function getMessages() {
  const { rows } = await pool.query('SELECT * FROM messages');
  return rows;
}

module.exports = { getMessages };

pages/index.js

// javascriptcn.com 代码示例
import Head from 'next/head';
import MessageList from '../components/MessageList';
import { getMessages } from '../api/messages';

function Home({ messages }) {
  return (
    <>
      <Head>
        <title>留言板</title>
      </Head>
      <nav>
        <a href="/">首页</a>
        <a href="/new-message">发布留言</a>
      </nav>
      <main>
        <h1>留言板</h1>
        <MessageList messages={messages} />
      </main>
    </>
  );
}

export async function getServerSideProps() {
  const messages = await getMessages();
  return {
    props: { messages },
  };
}

export default Home;

pages/new-message.js

// javascriptcn.com 代码示例
import Head from 'next/head';
import { useState } from 'react';

function NewMessage() {
  const [content, setContent] = useState('');
  const [author, setAuthor] = useState('');

  async function handleSubmit(event) {
    event.preventDefault();
    await fetch('/api/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ content, author }),
    });
    setContent('');
    setAuthor('');
  }

  return (
    <>
      <Head>
        <title>发布留言</title>
      </Head>
      <nav>
        <a href="/">首页</a>
        <a href="/new-message">发布留言</a>
      </nav>
      <main>
        <h1>发布留言</h1>
        <form onSubmit={handleSubmit}>
          <label>
            内容：
            <textarea
              value={content}
              onChange={(event) => setContent(event.target.value)}
              required
            />
          </label>
          <label>
            作者：
            <input
              type="text"
              value={author}
              onChange={(event) => setAuthor(event.target.value)}
              required
            />
          </label>
          <button type="submit">发布</button>
        </form>
      </main>
    </>
  );
}

export default NewMessage;

components/MessageList.js

// javascriptcn.com 代码示例
import React from 'react';

function Message(props) {
  return (
    <li className="message">
      <p>{props.content}</p>
      <small>{props.author}</small>
    </li>
  );
}

function MessageList(props) {
  return (
    <ul>
      {props.messages.map((message) => (
        <Message
          key={message.id}
          content={message.content}
          author={message.author}
        />
      ))}
    </ul>
  );
}

export default MessageList;

db.js

// javascriptcn.com 代码示例
const { Pool } = require('pg');

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'my_database',
  password: 'my_password',
  port: 5432,
});

module.exports = pool;

运行应用

最后，我们可以使用以下命令来启动应用：

npm run dev

然后在浏览器中访问 http://localhost:3000，即可看到留言板应用的界面。您可以在发布留言页面中发布新的留言，然后返回首页查看留言列表。

总结

本文介绍了如何使用 Next.js 和 PostgreSQL 构建完整的 Web 应用，包括前端页面的设计和后端数据的存储和查询。本文的内容详细且有深度和学习以及指导意义，适合有一定前端开发经验的读者。希望本文能够对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656c5348d2f5e1655d4b71cd