如何修改 Account.jsx 文件中的 POST 请求？

huangapple
go评论92阅读模式
英文:

How do I modify POST request in Account.jsx file?

问题

这是您的代码的翻译：

  1. 我正在开发一个个人项目员工管理系统，并在发送POST请求时遇到问题。该项目使用MERN（MongoDB、Node.js和React.js）。以下是项目链接 https://github.com/Mbicha/employee_management_system，以及[显示错误的图片][1]
  3. [1]: https://i.stack.imgur.com/0LT1c.png
  5. 代码如下：
  7. Account.jsx
  8. ```jsx
  9. import React, { useState } from "react";
  10. import { Link } from "react-router-dom";
  11. import http from "../http-common";
  13. const Account = () => {
  14.     const [formData, setFormData] = useState({
  15.         first_name: "", last_name: "", email: "", phone: "", password: ""
  16.     });
  18.     const handleFormChange = (event) => {
  19.         setFormData(prev => ({
  20.             ...prev,
  21.             [event.target.name]: event.target.value
  22.         }));
  23.     }
  25.     const handleSubmit = async (event) => {
  26.         event.preventDefault();
  28.         try {
  29.             const options = {
  30.                 headers: {
  31.                     'Content-Type': 'application/json',
  32.                 },
  33.             };
  34.             await http.post('/user', formData, options);
  35.             console.log("已保存");
  36.             event.target.reset();
  37.         } catch (error) {
  38.             console.log(error);
  39.         }
  40.     }
  42.     return (
  43.         <div>
  44.             <div className="flex flex-col justify-center items-center">
  45.                 <form className="flex flex-col items-center rounded-lg shadow-md p-2 w-full sm:w-2/3 md:w-1/3 lg:w-1/3">
  46.                     <h1 className="text-center text-green-700 text-2xl mb-4">账户</h1>
  48.                     <input className="border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700" type="text" placeholder="名字" name='first_name' onChange={handleFormChange}/>
  50.                     <input className="border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700" type="text" placeholder="姓氏" name='last_name' onChange={handleFormChange}/>
  52.                     <input className="border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700" type="email" placeholder="电子邮件" name='email' onChange={handleFormChange}/>
  54.                     <input className="border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700" type="text" placeholder="电话" name='phone' onChange={handleFormChange}/>
  56.                     <input className="border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700" type="password" placeholder="密码" name='password' onChange={handleFormChange}/>
  58.                     <button className="bg-green-700 hover:bg-green-600 text-white font-bold p-2 rounded focus:outline-none focus:shadow-outline w-4/5 mb-4" type="button" onClick={handleSubmit}>注册</button>
  59.                     <span>已经有账户？ <Link to='/'>登录</Link></span>
  60.                 </form>
  61.             </div>
  62.         </div>
  63.     )
  64. }
  66. export default Account;

http-common.js

  1. import axios from "axios";
  3. export default axios.create({
  4.     baseURL: "http://localhost:5000/api",
  5.     headers: {
  6.         "Content-type": "application/json"
  7.     }
  8. });

server.js

  1. const express = require("express");
  2. const bodyParser = require("body-parser");
  3. const cors = require("cors");
  4. const cookie = require('cookie-parser');
  5. require('./config/db.config');
  7. const auth = require('./routes/route_auth');
  9. const app = express();
  11. app.use(cors());
  12. app.use(bodyParser.json());
  13. app.use(bodyParser.urlencoded({ extended: true }));
  15. app.use(express.json());
  16. app.use(cookie());
  18. // 路由
  19. app.use('/api/user', auth);
  21. const PORT = process.env.PORT || 5000;
  23. app.listen(PORT, () => {
  24.     console.log(`服务器正在运行在 ${PORT}`);
  25. });

route_auth.js

  1. const express = require("express");
  2. const router = express.Router();
  4. const user = require("../controllers/auth");
  6. router.post('/', user.register);
  8. module.exports = router;

auth.js（控制器）

  1. const user = require("../models/user");
  2. const utils = require("../utils");
  4. exports.register = async(req, res) => {
  6.     try {
  7.         const hashed = utils.hashPassword(req.body.password, 10);
  8.         const newUser = new user({
  9.             first_name: req.body.first_name,
  10.             last_name: req.body.last_name,
  11.             email: req.body.email,
  12.             phone: req.body.phone,
  13.             password: hashed
  14.         });
  15.         await newUser.save();
  16.         res.status(201).json(newUser);
  17.     } catch (error) {
  18.         res.status(404).send({ error:error });
  19.     }
  20. }
  22. // 所有用户
  23. exports.getUsers = async(req, res) => {
  24.     try {
  25.         const users = await user.find({});
  26.         res.send({ users })
  27.     } catch (err) {
  28.         res.status(400).send({err: err});
  29.     }
  30. };
  32. // 根据id获取用户
  33. module.exports.getUserById = async (req, res) => {
  34.     try {
  35.         const user = await user.findById(req.params.id);
  36.         res.send({ user });
  37.     } catch (error) {
  38.         res.status(404).send({ message: `未找到用户` });
  39.     }
  40. }

user.js（模型）

  1. const mongoose = require('mongoose');
  2. const Schema = mongoose.Schema;
  4. const user = new Schema({
  5.     first_name: {type: String, required: true},
  6.     last_name: {type: String, required: true},
  7.     email: {type: String, required: true},
  8.     phone: {type: String, required: true},
  9.     password: {type: String, required: true}
  10. });
  12. module.exports = mongoose.model("user", user);

db.config.js

  1. const mongoose = require("mongoose");
  3. const uri = "mongodb://127.0.0.1:27017/employees_db";
  5. // 允许使用Promise
  6. mongoose.Promise = global.Promise;
  7. // 连接
  8. mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology:true  });
  9. // 验证
  10. mongoose.connection
  11.   .once('open', () => console.log('已连接到数据库!'))
  12.   .on('error', err => console.log('数据库发生错误!', err));

utils.js

  1. const bycrypt = require('bcrypt');
  3. // 哈希方法
  4. const hashPassword = (password, rounds) => {
  5.     const salt = bycrypt.genSaltSync(rounds);
  6.     const hashedPassword = bycrypt.hashSync(password, salt);
  7.     return hashedPassword;
  8. }

错误发生在Account.jsx，当我向数据库发送数据时出现“http://localhost:5000/api/user 404 (未找到)”错误。

  2. <details>
  3. <summary>英文:</summary>
  4. I am working on a personal project Employee Management System and am stuck on sending POST request. The project is using MERN (MongoDB, nodejs, and reactjs). The following is the project link https://github.com/Mbicha/employee_management_system, and [Image showing error][1]
  5. [1]: https://i.stack.imgur.com/0LT1c.png
  6. Codes are as follows:
  7. Account.jsx
  8. import React, { useState } from &quot;react&quot;;
  9. import { Link } from &quot;react-router-dom&quot;;
  10. import http from &quot;../http-common&quot;;
  11. const Account = () =&gt; {
  12. const [formData, setFormData] = useState({
  13. first_name: &quot;&quot;, last_name: &quot;&quot;, email: &quot;&quot;, phone: &quot;&quot;, password: &quot;&quot;
  14. });
  15. const handleFormChange = (event) =&gt; {
  16. setFormData(prev =&gt; ({
  17. ...prev,
  18. [event.target.name]: event.target.value
  19. }));
  20. }
  21. const handleSubmit = async (event) =&gt; {
  22. event.preventDefault();
  23. try {
  24. const options = {
  25. headers: {
  26. &#39;Content-Type&#39;: &#39;application/json&#39;,
  27. },
  28. };
  29. await http.post(&#39;/user&#39;, formData, options);
  30. console.log(&quot;Saved&quot;);
  31. event.target.reset();
  32. } catch (error) {
  33. console.log(error);
  34. }
  35. }
  36. return (
  37. &lt;div&gt;
  38. &lt;div className=&quot;flex flex-col justify-center items-center&quot;&gt;
  39. &lt;form className=&quot;flex flex-col items-center rounded-lg shadow-md p-2 w-full sm:w-2/3 md:w-1/3 lg:w-1/3&quot;&gt;
  40. &lt;h1 className=&quot;text-center text-green-700 text-2xl mb-4&quot;&gt;Account&lt;/h1&gt;
  41. &lt;input className=&quot;border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; name=&#39;first_name&#39; onChange={handleFormChange}/&gt;
  42. &lt;input className=&quot;border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700&quot; type=&quot;text&quot; placeholder=&quot;Last Name&quot; name=&#39;last_name&#39; onChange={handleFormChange}/&gt;
  43. &lt;input className=&quot;border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; name=&#39;email&#39; onChange={handleFormChange}/&gt;
  44. &lt;input className=&quot;border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700&quot; type=&quot;text&quot; placeholder=&quot;Phone&quot; name=&#39;phone&#39; onChange={handleFormChange}/&gt;
  45. &lt;input className=&quot;border-b-2 border-gray-400 w-4/5 p-2 mb-4 focus:outline-none focus:border-green-700&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; name=&#39;password&#39; onChange={handleFormChange}/&gt;
  46. &lt;button className=&quot;bg-green-700 hover:bg-green-600 text-white font-bold p-2 rounded focus:outline-none focus:shadow-outline w-4/5 mb-4&quot; type=&quot;button&quot; onClick={handleSubmit}&gt;Register&lt;/button&gt;
  47. &lt;span&gt;Already have an account? &lt;Link to=&#39;/&#39;&gt;Login&lt;/Link&gt;&lt;/span&gt;
  48. &lt;/form&gt;
  49. &lt;/div&gt;
  50. &lt;/div&gt;
  51. )
  52. }
  53. export default Account;
  54. http-common.js
  55. import axios from &quot;axios&quot;;
  56. export default axios.create({
  57. baseURL: &quot;http://localhost:5000/api&quot;,
  58. headers: {
  59. &quot;Content-type&quot;: &quot;application/json&quot;
  60. }
  61. });
  62. server.js
  63. const express = require(&quot;express&quot;);
  64. const bodyParser = require(&quot;body-parser&quot;);
  65. const cors = require(&quot;cors&quot;);
  66. const cookie = require(&#39;cookie-parser&#39;);
  67. require(&#39;./config/db.config&#39;);
  68. const auth = require(&#39;./routes/route_auth&#39;);
  69. const app = express();
  70. app.use(cors());
  71. app.use(bodyParser.json());
  72. app.use(bodyParser.urlencoded({ extended: true }));
  73. app.use(express.json());
  74. app.use(cookie());
  75. //routes
  76. app.use(&#39;/api/user&#39;, auth);
  77. const PORT = process.env.PORT || 5000;
  78. app.listen(PORT, () =&gt; {
  79. console.log(`Server is running on ${PORT}`);
  80. });
  81. route_auth.js
  82. const express = require(&quot;express&quot;);
  83. const router = express.Router();
  84. const user = require(&quot;../controllers/auth&quot;);
  85. router.post(&#39;/&#39;, user.register);
  86. module.exports = router;
  87. auth.js // controller
  88. const user = require(&quot;../models/user&quot;);
  89. const utils = require(&quot;../utils&quot;);
  90. exports.register = async(req, res) =&gt; {
  91. try {
  92. const hashed = utils.hashPassword(req.body.password, 10);
  93. const newUser = new user({
  94. first_name: req.body.first_name,
  95. last_name: req.body.last_name,
  96. email: req.body.email,
  97. phone: req.body.phone,
  98. password: hashed
  99. });
  100. await newUser.save();
  101. res.status(201).json(newUser);
  102. } catch (error) {
  103. res.status(404).send({ error:error });
  104. }
  105. }
  106. // All users
  107. exports.getUsers = async(req, res) =&gt; {
  108. try {
  109. const users = await user.find({});
  110. res.send({ users })
  111. } catch (err) {
  112. res.status(400).send({err: err});
  113. }
  114. };
  115. // User by id
  116. module.exports.getUserById = async (req, res) =&gt; {
  117. try {
  118. const user = await user.findById(req.params.id);
  119. res.send({ user });
  120. } catch (error) {
  121. res.status(404).send({ message: `User is not found` });
  122. }
  123. }
  124. user.js // model
  125. const mongoose = require(&#39;mongoose&#39;);
  126. const Schema = mongoose.Schema;
  127. const user = new Schema({
  128. first_name: {type: String, required: true},
  129. last_name: {type: String, required: true},
  130. email: {type: String, required: true},
  131. phone: {type: String, required: true},
  132. password: {type: String, required: true}
  133. });
  134. module.exports = mongoose.model(&quot;user&quot;, user);
  135. db.config.js
  136. const mongoose = require(&quot;mongoose&quot;);
  137. const uri = &quot;mongodb://127.0.0.1:27017/employees_db&quot;
  138. // Allow Promises
  139. mongoose.Promise = global.Promise;
  140. // Connection
  141. mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology:true  });
  142. // Validation
  143. mongoose.connection
  144. .once(&#39;open&#39;, () =&gt; console.log(&#39;Connected to the database!&#39;))
  145. .on(&#39;error&#39;, err =&gt; console.log(&#39;Error with the database!&#39;, err));
  146. utils.js
  147. const bycrypt = require(&#39;bcrypt&#39;);
  148. // Hash Method
  149. const hashPassword = (password, rounds) =&gt; {
  150. const salt = bycrypt.genSaltSync(rounds);
  151. const hashedPassword = bycrypt.hashSync(password, salt);
  152. return hashedPassword;
  153. }
  154. Error is in occurring in Account.jsx when I send a data to the database &quot;http://localhost:5000/api/user 404 (Not Found)&quot;
  155. </details>
  156. # 答案1
  157. **得分**: 0
  158. 404错误代码表示没有与`/api/user`相关的终端点。
  159. ```javascript
  160. // 在 server.js 文件中
  161. // 路由
  162. app.use('/api/user', auth);
  163. // 在 routes/route_auth.js 文件中
  164. router.post('/', user.register);

我认为你的正确终端点路径是 /api/user/，需要添加斜杠。

英文:

404 Error code means that there is no endpoint which is related to /api/user.

  1. // In the server.js
  2. //routes
  3. app.use(&#39;/api/user&#39;, auth);
  4. // routes/route_auth.js
  5. router.post(&#39;/&#39;, user.register);

I think your correct endpoint path is /api/user/ <- add trailing slash

huangapple
  • 本文由 发表于 2023年6月12日 08:24:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76453023.html
  • mongodb
  • node.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定