我如何从前端（react）获取信息并在后端（node.js）中使用它来使用twilio发送短信？

Question

我制作了服务网站，我想使用购物车中的信息发送短信，确认他们填写的表格以及他们选择的产品和服务。我也想收到同样的信息。

我只有在端口侦听的服务器：5000

const express = require('express');
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const  client = require('twilio')(accountSid, authToken);
require('dotenv').config();
const app = express();
const port = 5000;

app.get('/', (req, res) => {

  sendTextMessages();
  res.send(`
  <div style='text-align: center; padding-top:40px'>
    <h1>Hello World</h1>
    <p>This is a sample page</p>
  </div>
  `);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

function sendTextMessages() {}

/////////Cart.jsx////////
import React, { useState } from 'react';
import CartItems from '../components/CartItems/CartItems';
import CartForm from '../components/CartForm/CartForm';

const Cart = () => {
  const [formData, setFormData] = useState({});
  const [cartData, setCartData] = useState([]);

  const handleSubmit = () => {
    // Here, you can send the formData and cartData to your server or perform any other action you need.
    // You can access formData and cartData to submit the data.
    console.log('Form Data:', formData);
    console.log('Cart Data:', cartData);
  };

  return (
    <div>
      <CartForm setFormData={setFormData} />
      <CartItems setCartData={setCartData} />
      <button style={{
    backgroundColor: '#ff5a5a',
    color: '#fff',
    border: 'none',
    padding: '20px 60px', // Increase padding for a larger button
    borderRadius: '5px',
    cursor: 'pointer',
    display: 'block',     // Center horizontally
    margin: '0 auto',     // Center horizontally
    fontSize: '18px',
  }} onClick={handleSubmit}>Get Free Estimate</button>
    </div>
  );
}

export default Cart;

Answer 1

为什么在同一个文件中使用前端和后端？ 将前端和后端分开并使用

Axios

与它们进行通信 搜索如何构建 REST API 以及如何使用

Axios

从前端到达端点

• 如果你想让前端和后端在同一个项目中，你可以使用

  ejs

  进行服务器端渲染，使用Express.js和

  .ejs

在node.js中搜索MVC