javascript - 如何将我的前端与后端绑定(bind)(形成接触)

Question

我正在使用react学习JS。我使用 React 和 Nodemailer 创建了一个简单的表单作为测试。

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

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

但我无法绑定(bind)这些文件。

我希望创建简单的联系表格。收集我的 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);
    }
});

这是带有 React 的 contact.jsx。

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 调用。

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

编辑

根据您的评论，我不确定是否可以在不使用任何 API 的情况下使用 nodemailer 将联系方式发送到您的电子邮件。如果您不想依赖任何后端而只想构建带有联系表单的静态站点，则可以使用类似 https://formspree.io/ 的内容。实现起来非常简单。