Question

我正在学习JS使用反应。我创建了一个简单的表单，其中react和nodemailer作为测试。

如果我只使用与我的backEnd文件对应的文件email.js，我可以发送电子邮件。

使用我的contact.jsx文件，我可以打印表单并获取输入值。

但是我无法绑定这些文件。

我希望创建简单的联系表单。收集我的email.js中的输入值以及用户提交后发送电子邮件。

这是我的email.js

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: '******@gmail.com',
        pass: '*******'
    }
});

var mailOptions = {
    from: '*****@gmail.com',
    to: '*****@gmail.com',
    subject: 'CRG WEB SITE',
    text: '{input value (Email, message...}'//Collect value of input
};

transporter.sendMail(mailOptions, function(error, info){
    if (error) {
        console.log(error);
    } else {
        console.log('Email sent: ' + info.response);
    }
});

这是contact.jsx with react。

import React from 'react'
import '../css/Contact.css'
import { Link } from 'react-router-dom'
import {  ControlLabel , FormControl, FormGroup,  Button, Grid, Row, Col} from 'react-bootstrap'



export class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);

        event.preventDefault();
    }

    render() {
        return (

            <div className="Contact">
                <Grid>
                <Row className="show-grid">
                    <Col xs={10} xsOffset={1}>
                        <div className="BlockPrincipal">
                            <h2> Contact</h2>

                            <form className="contactForm" onSubmit={this.handleSubmit}> 

                                <FormGroup>
                                    <ControlLabel>Last name</ControlLabel>
                                    <FormControl className="formField" id="Lname"  type="text" value={this.state.value} onChange={this.handleChange} placeholder="Jean-Louis" />
                                </FormGroup>

                                <FormGroup>
                                <ControlLabel>Email</ControlLabel>
                                <FormControl className="formField" id="Fmail"   type="email" placeholder="jean-louis@mail.com" />
                                </FormGroup>

                                <FormGroup>
                                <ControlLabel>Subject</ControlLabel>
                                <FormControl className="formField" componentClass="textarea" placeholder="Write you're message"/>


                                </FormGroup>

                                <Button type="submit" value="Submit"> Submit </Button>
                            </form>
                            </div>
                            <div className="NextPage">   
                            <Link to='/Projects'> {"<"} </Link>  
                        </div>
                    </Col>
                </Row>
                </Grid>
            </div>
            );
    }
};

export default Contact

我试图将我的后端文件与前端链接。我不明白如何链接这些文件。我尝试在我的contact.js中使用require email.js，但它不起作用。

我有这个错误：

./node_modules/nodemailer/lib/mailer/index.js
    Module not found: Can't resolve 'dns' in '/Users/informatique/crg/node_modules/nodemailer/lib/mailer'

我的目标是通过我的联系表单发送电子邮件。

Answer 1

我假设您要保存表单并发送注册电子邮件的用户，说明他/她已成功注册或与用户注册有关。

您需要在后端创建API端点。使用express或express之类的东西来构建API端点，以便您的前端可以与后端进行通信。网上有很多教程。它与localhost:3000/user-registration类似，可以接受name, last name, body, and email等参数。收到电子邮件后，您就可以通过电子邮件收到收到的电子邮件ID。

从前端，您可以使用axios或fetch库之类的内容对后端进行API调用。例如，

Axios.post('localhost:3000/user-registration/', { <send captured form data as params' })

您可以尝试通过这些库搜索API调用。

如果您不想创建自己的服务器，也可以使用一些在线服务。

修改

根据您的评论，我不确定是否可以使用nodemailer将联系人详细信息发送到您的电子邮件，而无需使用任何API。如果你不想依赖任何后端，只是建立一个带有联系表格的静态网站，你就可以使用https://formspree.io/之类的东西来实现。

如何将我的前端与我的后端绑定（表格联系）

1 个答案: