如何将我的前端与后端绑定（形成联系）

Question

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

如果我只使用与我的后端文件相对应的文件 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 反应。

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

我已经尝试 link 我的后端文件与前端。我不明白如何 link 这些文件。我试过在我的 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

我假设您想保存表格并向注册用户发送一封电子邮件，说明 he/she 已成功注册或与用户注册相关的内容。

您需要在 back-end 中创建一个 API 端点。使用 express 或类似 express 的东西构建一个 API 端点，以便您的 front-end 可以与 back-end 通信。网上有很多教程。它类似于 localhost:3000/user-registration，它会接受像 name, last name, body, and email 这样的参数。收到电子邮件后，您可以向收到的电子邮件 ID 发送电子邮件。

从 front-end，您可以使用 axios 或 fetch 库之类的东西对 back-end 进行 API 调用。例如，

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

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

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

编辑

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

如何将我的前端与后端绑定（形成联系）

how bind my front with my back end (form contact)

javascript

sendmail

node.js

nodemailer

reactjs