使用 mysql2 和 nextjs13 的 POST 请求给出 HTTP 500

Question

我有一个接受多个输入的表单，我正在尝试将该数据发送到 MySQL 数据库。数据库连接已建立，因为我可以成功执行 GET 部分，但 POST 请求部分不起作用。奇怪的是，当我提交表单时，我在浏览器控制台或终端中没有收到错误。但是当我导航到

api/application

时，它给出了 HTTP 500。对于上下文，我正在使用 nextjs13、MySQL Workbench 和 mysql2 npm 包。

我希望一旦用户单击“保存”，数据就会添加到应用程序表中，并且我应该看到“成功”消息。但什么也没有发生，它根本没有添加。 这是我在 MySQL 工作台中的

application

表。

CREATE TABLE application (
  App_id INT PRIMARY KEY AUTO_INCREMENT, 
  Status VARCHAR(20) DEFAULT "Pending",
  c_id INT DEFAULT NULL,
  Sex CHAR,
  child_age INT,
  p_id VARCHAR(20),
  g_disorder ENUM('Yes', 'No') NOT NULL,
  FOREIGN KEY (c_id) REFERENCES child(Child_id), # Foreign keys 
  FOREIGN KEY (p_id) REFERENCES parents(Parent_id) # Foreign keys
);
ALTER TABLE application AUTO_INCREMENT=1000;

这是我创建 POST 请求处理程序的地方

app/api/application/route.js

:

import mysql from "mysql2/promise";  // this the package i have installed
import { query } from "../../lib/db";  // connection part, has .createConnection() and .execute() methods defined
import { NextResponse } from "next/server";

export async function POST(request) {
    let message;
    const sex = request.body.Sex;
    const childAge = request.body.child_age;
    const parentID = request.body.p_id;
    const geneticDisorder = request.body.g_disorder;
    const addApplicationData = await query({
        query: "INSERT INTO application(Sex, child_age, p_id, g_disorder) VALUES(?, ?, ?, ?)",
        values: [sex, childAge, parentID, geneticDisorder],
    });

    // if insertion was a success, it generates an id
    if (addApplicationData.insertId) {
        message = "success"
    } else {
        message = "error"
    }

    let applicationData = {
        App_id: addApplicationData.insertId,
        Sex: sex,
        child_age: childAge,
        p_id: parentID,
        g_disorder: geneticDisorder
    };

    return NextResponse.json({ response: { message: message, applicationData: applicationData } });
}

这是我的客户端表单：

app/application/page.js

：

"use client"

import React, { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';


const Application = () => {
  const parentIDToAddRef = useRef();
  const sexOfChildToAddRef = useRef();
  const ageOfChildToAddRef = useRef();
  const genDisorderToAddRef = useRef();

  const [created, setCreated] = useState(false);
  async function addData () {
      const sex = sexOfChildToAddRef.current.value.trim();
      const childAge = ageOfChildToAddRef.current.value.trim();
      const parentID = parentIDToAddRef.current.value.trim();
      const geneticDisorder = genDisorderToAddRef.current.value.trim();

      const postData = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          Sex: sex,
          child_age: parseInt(childAge, 10),  // conv to int because MySQL schema has child_age INT
          p_id: parentID, 
          g_disorder: geneticDisorder,
        }),
      };
      if (parentID.length !== 14) {
        return;
      }
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_URL}/api/application`,
      postData
      );
      const response = await res.json();
      console.log(response);
      if (response.response.message !== "success") return;
      setCreated(true);
    }
    
  return (
    <main>
        <form onSubmit={addData}>
            <div>
                <h1>Fill your Application</h1>
                <div>
                    {/* Id of parents */}
                    <div>
                        <label htmlFor="p_id">Enter your ID</label>
                        <p></p>
                        <input 
                        type="text"
                        ref={parentIDToAddRef}
                        placeholder="4222 2224 4222"
                        required
                        />
                    </div>
                    {/* Sex of the child input */}
                    <div>
                        <label htmlFor="Sex">Sex of the child</label>
                        <p></p>
                        <input 
                        type="text"
                        ref={sexOfChildToAddRef}
                        placeholder="M / F" 
                        required
                        />
                    </div>
                    {/* Age of child input */}
                    <div>
                        <label htmlFor="child_age">Age of the child</label>
                        <p></p>
                        <input
                        type="number"
                        ref={ageOfChildToAddRef}
                        placeholder="Enter age of the child"
                        required
                        />
                    </div>
                    {/* Gen disorder radio */}
                    <div>
                        <label htmlFor="g_disorder">Are you okay if the child has a genetic disorder?</label>
                        <p></p>
                        <input 
                        id="yes"
                        type="radio"
                        ref={genDisorderToAddRef}
                        value="Yes"
                        required
                        />
                        <label htmlFor="yes">Yes</label>
                        <p></p>
                        <input  
                        id="no"
                        type="radio"
                        ref={genDisorderToAddRef}
                        value="No"
                        required
                        />
                        <label htmlFor="no">No</label>
                    </div>
                </div>
            </div>
            <div>
            <input
                value="Save"
                type="button"
              />
            </div>
        </form>
        {created && <div>Success!</div>}
    </main>
  );
};

export default Application;

请帮我解决这个问题，谢谢。

Answer 1

使用新的应用程序文件夹后，需要调用您的路由处理程序文件

route.js|ts

。因此，您的文件结构应该是

api/application

，而不是使用

api/application/route.js|ts

。您可以在下一个 js route handlers 部分

中阅读有关路由处理的更多信息