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

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

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

问题

这是您的代码的翻译：

我正在开发一个个人项目员工管理系统，并在发送POST请求时遇到问题。该项目使用MERN（MongoDB、Node.js和React.js）。以下是项目链接 https://github.com/Mbicha/employee_management_system，以及[显示错误的图片][1]

[1]: https://i.stack.imgur.com/0LT1c.png

代码如下：

Account.jsx
```jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import http from "../http-common";

const Account = () => {
    const [formData, setFormData] = useState({
        first_name: "", last_name: "", email: "", phone: "", password: ""
    });

    const handleFormChange = (event) => {
        setFormData(prev => ({
            ...prev,
            [event.target.name]: event.target.value
        }));
    }

    const handleSubmit = async (event) => {
        event.preventDefault();

        try {
            const options = {
                headers: {
                    'Content-Type': 'application/json',
                },
            };
            await http.post('/user', formData, options);
            console.log("已保存");
            event.target.reset();
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <div>
            <div className="flex flex-col justify-center items-center">
                <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">
                    <h1 className="text-center text-green-700 text-2xl mb-4">账户</h1>

                    <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}/>

                    <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}/>

                    <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}/>

                    <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}/>

                    <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}/>

                    <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>
                    <span>已经有账户？ <Link to='/'>登录</Link></span>
                </form>
            </div>
        </div>
    )
}

export default Account;

http-common.js

import axios from "axios";

export default axios.create({
    baseURL: "http://localhost:5000/api",
    headers: {
        "Content-type": "application/json"
    }
});

server.js

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const cookie = require('cookie-parser');
require('./config/db.config');

const auth = require('./routes/route_auth');

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.json());
app.use(cookie());

// 路由
app.use('/api/user', auth);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log(`服务器正在运行在 ${PORT}`);
});

route_auth.js

const express = require("express");
const router = express.Router();

const user = require("../controllers/auth");

router.post('/', user.register);

module.exports = router;

auth.js（控制器）

const user = require("../models/user");
const utils = require("../utils");

exports.register = async(req, res) => {

    try {
        const hashed = utils.hashPassword(req.body.password, 10);
        const newUser = new user({
            first_name: req.body.first_name,
            last_name: req.body.last_name,
            email: req.body.email,
            phone: req.body.phone,
            password: hashed
        });
        await newUser.save();
        res.status(201).json(newUser);
    } catch (error) {
        res.status(404).send({ error:error });
    }
}

// 所有用户
exports.getUsers = async(req, res) => {
    try {
        const users = await user.find({});
        res.send({ users })
    } catch (err) {
        res.status(400).send({err: err});
    }
};

// 根据id获取用户
module.exports.getUserById = async (req, res) => {
    try {
        const user = await user.findById(req.params.id);
        res.send({ user });
    } catch (error) {
        res.status(404).send({ message: `未找到用户` });
    }
}

user.js（模型）

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const user = new Schema({
    first_name: {type: String, required: true},
    last_name: {type: String, required: true},
    email: {type: String, required: true},
    phone: {type: String, required: true},
    password: {type: String, required: true}
});

module.exports = mongoose.model("user", user);

db.config.js

const mongoose = require("mongoose");

const uri = "mongodb://127.0.0.1:27017/employees_db";

// 允许使用Promise
mongoose.Promise = global.Promise;
// 连接
mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology:true  });
// 验证
mongoose.connection
  .once('open', () => console.log('已连接到数据库!'))
  .on('error', err => console.log('数据库发生错误!', err));

utils.js

const bycrypt = require('bcrypt');

// 哈希方法
const hashPassword = (password, rounds) => {
    const salt = bycrypt.genSaltSync(rounds);
    const hashedPassword = bycrypt.hashSync(password, salt);
    return hashedPassword;
}

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


<details>
<summary>英文:</summary>

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]


  [1]: https://i.stack.imgur.com/0LT1c.png

Codes are as follows:

    Account.jsx
    import React, { useState } from &quot;react&quot;;
    import { Link } from &quot;react-router-dom&quot;;
    import http from &quot;../http-common&quot;;
    
    const Account = () =&gt; {
        const [formData, setFormData] = useState({
            first_name: &quot;&quot;, last_name: &quot;&quot;, email: &quot;&quot;, phone: &quot;&quot;, password: &quot;&quot;
        });
    
        const handleFormChange = (event) =&gt; {
            setFormData(prev =&gt; ({
                ...prev,
                [event.target.name]: event.target.value
            }));
        }
    
        const handleSubmit = async (event) =&gt; {
            event.preventDefault();
    
            try {
                const options = {
                    headers: {
                        &#39;Content-Type&#39;: &#39;application/json&#39;,
                    },
                };
                await http.post(&#39;/user&#39;, formData, options);
                console.log(&quot;Saved&quot;);
                event.target.reset();
            } catch (error) {
                console.log(error);
            }
        }
    
        return (
            &lt;div&gt;
                &lt;div className=&quot;flex flex-col justify-center items-center&quot;&gt;
                    &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;
                        &lt;h1 className=&quot;text-center text-green-700 text-2xl mb-4&quot;&gt;Account&lt;/h1&gt;
    
                        &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;
    
                        &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;
    
                        &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;
    
                        &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;
    
                        &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;
    
                        &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;
                        &lt;span&gt;Already have an account? &lt;Link to=&#39;/&#39;&gt;Login&lt;/Link&gt;&lt;/span&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        )
    }
    
    export default Account;
    
    http-common.js
    
    import axios from &quot;axios&quot;;
    
        export default axios.create({
            baseURL: &quot;http://localhost:5000/api&quot;,
            headers: {
                &quot;Content-type&quot;: &quot;application/json&quot;
            }
        });
    
    server.js
    
    const express = require(&quot;express&quot;);
    const bodyParser = require(&quot;body-parser&quot;);
    const cors = require(&quot;cors&quot;);
    const cookie = require(&#39;cookie-parser&#39;);
    require(&#39;./config/db.config&#39;);
    
    const auth = require(&#39;./routes/route_auth&#39;);
    
    const app = express();
    
    app.use(cors());
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    
    app.use(express.json());
    app.use(cookie());
    
    //routes
    app.use(&#39;/api/user&#39;, auth);
    
    const PORT = process.env.PORT || 5000;
    
    app.listen(PORT, () =&gt; {
        console.log(`Server is running on ${PORT}`);
    });
    
    route_auth.js
    const express = require(&quot;express&quot;);
    const router = express.Router();
    
    const user = require(&quot;../controllers/auth&quot;);
    
    router.post(&#39;/&#39;, user.register);
    
    module.exports = router;
    
    auth.js // controller
    const user = require(&quot;../models/user&quot;);
    const utils = require(&quot;../utils&quot;);
    
    exports.register = async(req, res) =&gt; {
    
        try {
            const hashed = utils.hashPassword(req.body.password, 10);
            const newUser = new user({
                first_name: req.body.first_name,
                last_name: req.body.last_name,
                email: req.body.email,
                phone: req.body.phone,
                password: hashed
            });
            await newUser.save();
            res.status(201).json(newUser);
        } catch (error) {
            res.status(404).send({ error:error });
        }
    }
    
    // All users
    exports.getUsers = async(req, res) =&gt; {
        try {
            const users = await user.find({});
            res.send({ users })
        } catch (err) {
            res.status(400).send({err: err});
        }
    };
    
    // User by id
    module.exports.getUserById = async (req, res) =&gt; {
        try {
            const user = await user.findById(req.params.id);
            res.send({ user });
        } catch (error) {
            res.status(404).send({ message: `User is not found` });
        }
    }
    
    user.js // model
    const mongoose = require(&#39;mongoose&#39;);
    const Schema = mongoose.Schema;
    
    const user = new Schema({
        first_name: {type: String, required: true},
        last_name: {type: String, required: true},
        email: {type: String, required: true},
        phone: {type: String, required: true},
        password: {type: String, required: true}
    });
    
    module.exports = mongoose.model(&quot;user&quot;, user);
    
    db.config.js
    
    const mongoose = require(&quot;mongoose&quot;);
    
    const uri = &quot;mongodb://127.0.0.1:27017/employees_db&quot;
    
    // Allow Promises
    mongoose.Promise = global.Promise;
    // Connection
    mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology:true  });
    // Validation
    mongoose.connection
      .once(&#39;open&#39;, () =&gt; console.log(&#39;Connected to the database!&#39;))
      .on(&#39;error&#39;, err =&gt; console.log(&#39;Error with the database!&#39;, err));
      
    utils.js
    
    const bycrypt = require(&#39;bcrypt&#39;);
    
    // Hash Method
    const hashPassword = (password, rounds) =&gt; {
        const salt = bycrypt.genSaltSync(rounds);
        const hashedPassword = bycrypt.hashSync(password, salt);
        return hashedPassword;
    }


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;
 




</details>


# 答案1
**得分**: 0

404错误代码表示没有与`/api/user`相关的终端点。

```javascript
// 在 server.js 文件中

// 路由

app.use('/api/user', auth);

// 在 routes/route_auth.js 文件中

router.post('/', user.register);

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

英文:

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

// In the server.js

//routes

app.use(&#39;/api/user&#39;, auth);

// routes/route_auth.js

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:

确定