如何连接表单提交NextJS到MongoDB？
如何连接表单提交NextJS到MongoDB？
提问于 2022-10-26 16:34:58
我正在学习NextJS，不知道我需要什么样的解决方案来链接表单和数据库？在这个任务中，与next一起使用哪些钩子更好？
数据是通过邮递员添加的，但我不知道如何与表单连接
我的模型
import { model, models, Schema } from "mongoose";
const productModel = new Schema({
id: Number,
wallet: String,
cover: String,
title: String,
description: String,
url: String,
price: String,
});
const Products = models.Products || model("Products", productModel);
export default Products;我的连接
import mongoose from "mongoose";
const connectMongo = async () => {
try {
const { connection } = await mongoose.connect(process.env.MONGODB_URI);
if (connection.readyState === 1) {
console.log("MongoDB is connected");
}
} catch (errors) {
return Promise.reject(errors);
}
};
export default connectMongo;我的控制器
import Products from "../models/productModel";
//POST .../api/product
async function postProduct(req, res) {
try {
const formData = req.body;
if (!formData)
return res.status(404).json({ error: "Form data isn't provided" });
Products.create(formData, function (err, data) {
return res.status(200).json(data);
});
} catch (error) {
return res.status(404).json({ error: "Error while post product" });
}
}
export {postProduct}我的助手
const BASE_URL = "http://localhost:3000";
//Add new product
export async function postProduct(formData) {
try {
const Options = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
};
const response = await fetch(`${BASE_URL}/api/products`, Options);
const json = response.json();
return json;
} catch (error) {
return error;
}
}My API
import connectMongo from "../../../database/connection/connectMongo";
import {
deleteProduct,
getProducts,
postProduct,
putProduct,
} from "../../../database/controllers";
export default function handler(req, res) {
connectMongo().catch(() =>
res.status(405).json({ error: "Connection error" })
);
//type of request
const { method } = req;
switch (method) {
case "GET":
getProducts(req, res);
break;
case "POST":
postProduct(req, res);
break;
case "PUT":
putProduct(req, res);
break;
case "DELETE":
deleteProduct(req, res);
break;
default:
res.setHeader("Allow", ["GET", "POST", "PUT", "DELETE"]);
res.status(405).end(`Method ${method} not allowed `);
break;
}
}My Form
import NewProductTabs from "./NewProductTabs";
import React from "react";
import { editProduct, postProduct } from "../../../database/helpers/helpers";
export default function NewProductForm() {
return (
<div className="flex-col gap-4">
<NewProductTabs />
<form
onSubmit={postProduct}
action="/api/form"
method="post"
className="flex flex-col gap-3 border border-black p-6 pb-10"
>
<div className="input-type gap-2">
<label className="flex px-5 py-2 text-sm font-semibold">
Cover image
</label>
<input
type="text"
name="image"
className="w-full rounded-md border border-black px-5 py-5 text-sm shadow-brutal-sm focus:outline-none"
placeholder="Image link"
/>
</div>
<div className="input-type gap-2">
<label className="flex px-5 py-2 text-sm font-semibold">Title</label>
<input
type="text"
name="title"
className="w-full rounded-md border border-black px-5 py-5 text-sm shadow-brutal-sm focus:outline-none"
placeholder="Title"
/>
</div>
<div className="input-type">
<label className="flex px-5 py-2 text-sm font-semibold">
About Product
</label>
<textarea
rows="6"
name="description"
className="w-full rounded-md border border-black px-5 py-5 text-sm shadow-brutal-sm focus:outline-none"
placeholder="Description"
/>
</div>
<div className="input-type">
<label className="flex px-5 py-2 text-sm font-semibold">Url</label>
<input
type="url"
name="url"
className="w-full rounded-md border border-black px-5 py-5 text-sm shadow-brutal-sm focus:outline-none"
placeholder="/url"
/>
</div>
<div className="input-type">
<label className="flex px-5 py-2 text-sm font-semibold">Price</label>
<input
type="number"
name="price"
className="w-full rounded-md border border-black px-5 py-5 text-sm shadow-brutal-sm focus:outline-none"
placeholder="Price, USDT"
/>
</div>
</form>
<footer className="flex h-20">
<button
type="submit"
className="flex w-full place-content-center bg-black p-2 text-sm font-bold"
>
<span className="flex items-center text-center text-white">
{" "}
Add product{" "}
</span>
</button>
</footer>
</div>
);
}我看过视频，读过文章，但还没有弄清楚该做些什么。
回答 1
Stack Overflow用户
发布于 2022-10-26 18:06:24
这里可能有几个问题，我建议您在前端从提取调用(而不是仅仅返回)中出现console.log错误，以帮助缩小范围。
我注意到的第一件事是与API路由不一致：
- 在控制器中，将
/api/product列为路由 - 您要发布到
/api/products的助手函数(请注意末尾的‘’)。 - 表单组件使用
/api/form作为操作路由。在这种情况下，不应该有方法或操作，因为onSubmit()方法已经在处理逻辑了。如果您确实希望使用本机表单方法，请确保您的路线是正确的。
我注意到的另一件大事是，您没有为任何输入分配值。最好创建“受控组件”，以跟踪DOM中的输入值更改。看看这些文档。
在您的示例中，一个基本示例可能如下所示：
class NewProductForm extends React.Component {
constructor(props) {
super(props);
this.state = { imageValue: '', titleValue: '', descriptionValue: '' };
this.handleTitleChange = this.handleTitleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleTitleChange(event) {
this.setState({ titleValue: event.target.value });
}
async handleSubmit(event) {
event.preventDefault();
const response = await postProduct(this.state)
console.log(response)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="...">
<label className="...">Title</label>
<input
type="text"
name="title"
className="..."
placeholder="Title"
value={this.state.titleValue}
onChange={this.handleTitleChange}
/>
</div>
</form>
);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74211287
复制相关文章
相似问题
腾讯云开发者
