堆栈用户注册表不起作用"/>
MERN 堆栈用户注册表不起作用
MERN 堆栈出现 404 错误
描述:
我在尝试访问我的 MERN 堆栈应用程序时收到 404 错误。我已经检查了所有可能的错误原因,但我仍然无法弄清楚是什么原因造成的。
这是我使用的代码: JavaScript
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const passport = require("passport");
const session = require("express-session");
const MongoStore = require("connect-mongo")(session);
const methodOverride = require("method-override");
const flash = require("express-flash");
const logger = require("morgan");
const connectDB = require("./config/database");
const mainRoutes = require("./routes/main");
const postRoutes = require("./routes/posts");
const cors = require('cors')
app.use(cors())
//Use .env file in config folder
require("dotenv").config({ path: "./config/.env" });
// Passport config
require("./config/passport")(passport);
//Connect To Database
connectDB();
//Using EJS for views
app.set("view engine", "ejs");
//Static Folder
app.use(express.static("public"));
//Body Parsing
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
//Logging
app.use(logger("dev"));
//Use forms for put / delete
app.use(methodOverride("_method"));
// Setup Sessions - stored in MongoDB
app.use(
session({
secret: "keyboard cat",
resave: false,
saveUninitialized: false,
store: new MongoStore({ mongooseConnection: mongoose.connection }),
})
);
// Passport middleware
app.use(passport.initialize());
app.use(passport.session());
//Use flash messages for errors, info, ect...
app.use(flash());
//Setup Routes For Which The Server Is Listening
app.use("/", mainRoutes);
app.use("/post", postRoutes);
//Server Running
app.listen(process.env.PORT, () => {
console.log("Server is running, you better catch it!");
});
routes=>main.js
const express = require("express");
const router = express.Router();
const authController = require("../controllers/auth");
const homeController = require("../controllers/home");
const postsController = require("../controllers/posts");
const { ensureAuth } = require("../middleware/auth");
//Main Routes
router.get("/", homeController.getIndex);
router.get("/profile", ensureAuth, postsController.getProfile);
//Routes for user login/signup
router.get("/login", authController.getLogin);
router.post("/login", authController.postLogin);
router.get("/logout", authController.logout);
router.get("/signup", authController.getSignup);
router.post("/signup", authController.postSignup);
module.exports = router;
前端反应 JS 代码:
const RegistrationForm = () => {
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [image, setImage] = useState(null);
const [address, setAddress] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
// Create a FormData object to send the form data
const formData = new FormData();
formData.append('name', name);
formData.append('password', password);
formData.append('image', image);
formData.append('address', address);
// Send the form data to the backend
fetch('/signup', {
method: 'POST',
body: formData,
})
.then((response) => {
if (response.ok) {
console.log('Form submitted successfully');
// Reset the form fields
setName('');
setPassword('');
setImage(null);
setAddress('');
} else {
console.error('Error submitting form');
}
})
.catch((error) => {
console.error('Network error:', error);
});
};
return (
<div>
<h2>User Registration</h2>
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div>
<label>Password:</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
<div>
<label>Image:</label>
<input type="file" onChange={(e) => setImage(e.target.files[0])} />
</div>
<div>
<label>Address:</label>
<textarea value={address} onChange={(e) => setAddress(e.target.value)} />
</div>
<button type="submit">Register</button>
</form>
</div>
);
};
export default RegistrationForm;
我检查了以下内容:
- 确保我输入正确的 URL。
- 我试过刷新页面。
我仍然遇到 404 错误。
任何人都可以帮我找出导致错误的原因吗?
回答如下:更多推荐
MERN 堆栈用户注册表不起作用
发布评论