javascript - 如何使用 ReactJS 创建联系表单并使用 API 发送值 - Express
问题描述
我尝试使用 ReactJS 创建一个联系表单并将详细信息发送到我的电子邮件中。首先,我在 App.js 中创建了一个联系表单
import React, { Component } from 'react';
import axios from 'axios';
class Contact extends Component {
state = {
name: '',
message: '',
email: '',
sent: false,
buttonText: 'Send Message'
}
formSubmit = (e) => {
e.preventDefault()
this.setState({
buttonText: '...sending'
})
let data = {
name: this.state.name,
email: this.state.email,
message: this.state.message
}
axios.post("localhost:4000/api/v1/", data)
.then( res => {
this.setState({ sent: true }, this.resetForm())
})
.catch( () => {
console.log('Message not sent')
})
}
resetForm = () => {
this.setState({
name: '',
message: '',
email: '',
buttonText: 'Message Sent'
})
}
render() {
return(
<form className="contact-form" onSubmit={ (e) => this.formSubmit(e)}>
<label class="message" htmlFor="message-input">Your Message</label>
<textarea onChange={e => this.setState({ message: e.target.value})} name="message" class="message-input" type="text" placeholder="Please write your message here" value={this.state.message} required/>
<label class="message-name" htmlFor="message-name">Your Name</label>
<input onChange={e => this.setState({ name: e.target.value})} name="name" class="message-name" type="text" placeholder="Your Name" value={this.state.name}/>
<label class="message-email" htmlFor="message-email">Your Email</label>
<input onChange={(e) => this.setState({ email: e.target.value})} name="email" class="message-email" type="email" placeholder="your@email.com" required value={this.state.email} />
<div className="button--container">
<button type="submit" className="button button-primary">{ this.state.buttonText }</button>
</div>
</form>
);
}
}
export default Contact;
在我为 API 创建 js 文件之后。文件名是 API.js
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();
const port = 4000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.listen(port, () => {
console.log('We are live on port 4444');
});
app.get('/', (req, res) => {
res.send('Welcome to my api');
})
app.post('/api/v1/:user/:pass', (req,res) => {
const params = req.params;
console.log(params)
var data = req.body;
var smtpTransport = nodemailer.createTransport({
service: 'Gmail',
port: 465,
auth: {
user: 'pizhevsoft@gmail.com',
pass: 'pass123'
}
});
var mailOptions = {
from: data.email,
to: 'pizhevsoft@gmail.com',
subject: 'TEST',
html: `<p>${data.name}</p>
<p>${data.email}</p>
<p>${data.message}</p>`
};
smtpTransport.sendMail(mailOptions,
(error, response) => {
if(error) {
res.send(error)
}else {
res.send('Success')
}
smtpTransport.close();
});
})
当我尝试在节点控制台中启动 App.js 时,我node App.js
在控制台中写入,但收到此错误:
Blagovests-MacBook-Pro:my-app pizhev$ node App.js
internal/modules/cjs/loader.js:979
throw err;
^
Error: Cannot find module '/Users/pizhev/Downloads/my-app/App.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:976:15)
at Function.Module._load (internal/modules/cjs/loader.js:859:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
我可以举一些例子..谢谢.. :)
解决方案
- 对于第一个:
您应该启动app.js
文件并在node.js
控制台中看到类似We are live on port 4000
. 这是你的后端API
工作。然后替换您的axios.post('API_URI', data)
foraxios.post("localhost:4000/api/v1/", data)
或任何其他链接到您的方法,并在您的 Web 服务器的控制台中检查它是否收到POST
来自您的前端的请求。
- 第二件事是:
您没有为您的 api 路由使用参数,它应该类似于(如果我理解正确的话:
app.post('/api/v1/:user/:pass', (req,res) => {
const params = req.params;
console.log(params) //will give you access to user and password.
所以当你去:localhost:4000/api/v1/test/pass123
。您将可以访问 中的用户和密码数据var smtpTransport
,但如上所述,最好将敏感数据存储在.env
文件中。
推荐阅读
- arrays - 用vba中其他数组的内容过滤二维数组的最快方法
- c++ - 给定整数 n,d,i [ n*d + (id) ]%n 等价于 [n + (id)]%n?(% c++ 取模)
- flutter - TextField & BLoC : 预填充字段
- scala - 如何在 Actor 的同一线程内获取 http.singleRequest(httpRequest) 的 Httpresponse?
- r - 导入文本文件时出现不需要的字符“â^”
- exception - SwiftUI - 领域:无法从中删除关键路径的观察者,因为它没有注册为观察者
- postgis - Geotools StreamingRenderer 点问题时使用 Simplefeaturecollection 而不是 Simplefeaturesource 使用 postgis 数据库
- mysql - MYSQL如何生成序列和使用distinct
- css - 我的网站在任何地方都能响应,但是在调整浏览器窗口大小时
- python - 返回响应后继续执行