如何在Remix JS中从指定后端API/数据库URL获取数据（附Prisma示例）

前置准备 #

你已经在.env配置好DATABASE_URL，接下来按以下步骤操作：

1. 安装并初始化Prisma #

先安装Prisma CLI依赖，再初始化项目：

npm install prisma --save-dev
npx prisma init

初始化后会自动生成prisma/schema.prisma配置文件，里面已自动读取你.env里的DATABASE_URL。

2. 定义笑话数据模型 #

修改prisma/schema.prisma，添加适配Jokes教程的数据模型（根据你用的数据库类型调整provider，比如postgresql/mysql/sqlite）：

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql" // 替换为你的数据库类型
  url      = env("DATABASE_URL")
}

model Joke {
  id        Int      @id @default(autoincrement())
  content   String   @db.VarChar(255) // 对应笑话内容
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

3. 生成数据库表与Prisma Client #

运行迁移命令创建数据库表：

npx prisma migrate dev --name init-joke-table

然后安装Prisma Client（用于在代码中操作数据库）：

npm install @prisma/client

4. 在Remix路由中编写数据加载器 #

在Remix的路由文件（比如app/routes/jokes.tsx）中，通过Loader函数调用Prisma获取笑话数据：

import { json, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { PrismaClient } from "@prisma/client";

// 初始化Prisma Client实例
const prisma = new PrismaClient();

// 定义Loader函数，用于服务端获取数据
export const loader: LoaderFunction = async () => {
  const jokes = await prisma.joke.findMany({
    orderBy: { createdAt: "desc" }, // 按创建时间倒序
  });
  return json({ jokes });
};

// 页面组件渲染数据
export default function JokesPage() {
  const { jokes } = useLoaderData<typeof loader>();
  return (
    <div className="container">
      <h1>Jokes Collection</h1>
      <ul>
        {jokes.map((joke) => (
          <li key={joke.id} className="joke-item">
            {joke.content}
            <span className="joke-date">
              {new Date(joke.createdAt).toLocaleDateString()}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

5. （可选）实现新增笑话的提交逻辑 #

如果需要添加新笑话，在同一路由中编写Action函数处理表单提交：

import { ActionFunction, redirect } from "@remix-run/node";
import { Form } from "@remix-run/react";

// 处理表单提交的Action函数
export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const jokeContent = formData.get("content") as string;

  // 校验输入
  if (!jokeContent.trim()) {
    return json({ error: "Joke content cannot be empty" }, { status: 400 });
  }

  // 写入数据库
  await prisma.joke.create({
    data: { content: jokeContent },
  });

  // 重定向回笑话列表页
  return redirect("/jokes");
};

// 在页面组件中添加表单（插入到JokesPage组件的return里）
<Form method="post" className="joke-form">
  <input
    type="text"
    name="content"
    placeholder="Type your funny joke here..."
    required
  />
  <button type="submit">Add Joke</button>
</Form>

常用调试工具 #

• 运行npx prisma studio可以打开可视化数据库管理界面，直接查看和编辑数据
• 每次修改schema.prisma后，都需要重新运行npx prisma migrate dev来更新数据库结构

内容的提问来源于stack exchange，提问作者Nileda