我有一个nodejs expressjs api服务器和一个前端服务器与reactjs。我有不同的路线来创建和发布不同的东西，但我正在努力理解它是如何工作的。我怎么能发送的数据，用户输入在我的前端形式我的API和存储在我的mongodb数据库?
这是我在react中的Register.js组件:
import React, { useState } from 'react'
const Register = () => {
const [ formData, setFormData ] = useState({
name: '',
email: '',
password: '',
password2: ''
});
const { name, email, password, password2 } = formData;
const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });
return (
<section className="container">
<h1 className="large text-primary">Sign Up</h1>
<p className="lead">
<i className="fas fa-user" /> Create Your Account
</p>
<form className="form" >
<div className="form-group">
<input
type="text"
placeholder="Name"
name="name"
value={name}
onChange={onChange}
/>
</div>
<div className="form-group">
<input
type="email"
placeholder="Email Address"
name="email"
value={email}
onChange={onChange}
/>
<small className="form-text">
</small>
</div>
<div className="form-group">
<input
type="password"
placeholder="Password"
name="password"
value={password}
onChange={onChange}
/>
</div>
<div className="form-group">
<input
type="password"
placeholder="Confirm Password"
name="password2"
value={password2}
onChange={onChange}
/>
</div>
<input type="submit" className="btn btn-primary" value="Register" />
</form>
<p className="my-1">
</p>
</section>
)
}
export default Register
这是我注册用户的API:
//@route POST api/users
//@desc Register user
//@access public
router.post('/', [
check('name', 'Name is required')
.not()
.isEmpty(),
check('email', 'Plese include a valid email').isEmail(),
check('password', 'Please enter a password with 6 or more characters').isLength({min:6})
],
async (req, res)=> {
const errors = validationResult(req);
if(!errors.isEmpty()){
return res.status(400).json({ errors:errors.array()}); //400 is for bad requests
}
const { name, email, password } = req.body;
try{
//See if user exists
let user = await User.findOne({ email });
if(user){
return res.status(400).json({ errors: [{ msg:'User already exists' }] });
}
//Get users gravatar
const avatar = gravatar.url(email,{
s:'200',
r:'pg',
d:'mm'
})
user = new User({
name,
email,
avatar,
password
});
//Encrypt password
const salt = await bcrypt.genSalt(10);
user.password = await bcrypt.hash(password, salt);
await user.save();
//Return jsonwebtoken -> this for users to be logged in right after registration
const payload = {
user:{
id: user.id
}
}
jwt.sign(
payload,
config.get('jwtSecret'),
{expiresIn: 360000}, //change to 3600 for production
(err, token)=>{
if(err) throw err;
res.json({ token });
}
)
}catch(err){
console.error('err.message');
res.status(500).send('Server Error');
}
});
module.exports = router;
如何和在哪里我必须消费我的API发送数据?
客户端
添加一个函数来捕获表单的submit事件并将数据(作为JSON)发送到您的API
const onChange = (e) => {
// Use the functional update form.
// See https://reactjs.org/docs/hooks-reference.html#functional-updates
setFormData((fd) => ({
...fd,
[e.target.name]: e.target.value,
}));
};
const onSubmit = async (e) => {
e.preventDefault();
const res = await fetch("/api/users", {
method: "POST",
body: JSON.stringify(formData),
headers: { "content-type": "application/json" },
});
if (!res.ok) {
throw new Error(`${res.status}: ${await res.text()}`);
}
const { token } = await res.json();
// do something with token
};
<form className="form" onSubmit={onSubmit}>
您可能还需要在package.json文件中配置开发服务器代理，以避免CORS问题。
"proxy": "http://localhost:5000",
为您的快递服务调整正确的端口。
服务器端在路由之前添加JSON体解析中间件来处理JSON请求的有效负载
app.use(express.json());
你应该能够发送一个获取post请求与您的formData:
fetch("[PROTOCOL]://[HOST]/api/users/", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((data) => {
const { token } = data;
/* ... */
})
.catch((error) => {
console.error("Error:", error);
});
你可以在传递到你的表单的onSubmit属性的函数中做到这一点:
<form className="form" onSubmit={handleSubmit}>
handleSubmit(event) {
event.preventDefault();
/* fetch post here */
}
查看Fetch API和React forms文档获取更多信息。
另外，我会将JWT发送回cookie，因为替代localStorage不是那么好。