代码之家 › 专栏 › 技术社区 › tbsolutions

创建一个立即应用页面,并在尝试在React JS上提交示例应用程序时不断收到此错误

vite reactjs html javascript

tbsolutions · 技术社区 · 2 年前

我对网站项目有问题。我正在尝试创建一个立即申请页面,以便人们可以在我的网站上申请。我正在尝试将前端连接到后端,并不断收到以下错误消息: Failed to load resource: the server responded with a status of 404 (Not Found) 我的项目由如下文件夹结构组成:

- tbs-website
 - client
  - node_modules
  - public
  - src
   - css
    - apply.css
    - FileInput.css
    - home.css
   - js
    - FileInput.jsx
    - submitApplication.jsx
   - pages
    - applynow.jsx
    - home.jsx
    - index.jsx
    - trafficcontrol.jsx
   - App.jsx
   - main.jsx
  - package.json
  - package-lock.json
  - vite.config.js 
 - server
  - node_modules 
  - src
   - server.js
  - package.json
  - package-lock.json

我的“立即应用”页面( applynow.jsx )

// applynow.jsx
import React from 'react';
import '../css/apply.css'
import FileInput from '../js/FileInput';
import { sendFormDataToServer } from '../js/submitApplication'
import { Link } from 'react-router-dom'
const Apply = () => {

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Collect form data
    const formData = {
      email1: '[email protected]',
      email2: '[email protected]',
      email3: '[email protected]'
    };

    // Send form data to server
    const result = await sendFormDataToServer(formData);
    console.log(result); // Log the result
  };
    return (
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
          <link rel="stylesheet" href="/index.css"/>
        </head>
        <body>
          
            <header class="header">
      <a href="#">
        <img class="logo" alt="TBS logo" src="tbs logo.png" />
      </a>

      <nav class="main-nav">
        <Link to="/applynow">Apply Now</Link>
        <ul class="main-nav-list">
          <li><a class="main-nav-link" href="http://www.msn.com">Traffic Control</a></li>
          <li><a class="main-nav-link" href="#how">Clothing and Bags</a></li>
          <li>
            <a class="main-nav-link" href="#how">Banners and Posters</a>
          </li>
          <li><a class="main-nav-link" href="#how">Business Cards</a></li>
          <li><a class="main-nav-link" href="#how">Window Vinyls</a></li>
          <li><a class="main-nav-link" href="#meals">Items</a></li>
          <li>
            <a class="main-nav-link" href="#testimonials">Signs</a>
          </li>
          <li><a class="main-nav-link" href="#pricing">Pricing</a></li>
          <li>
            <a class="main-nav-link nav-cta" href="#cta">Get a free quote</a>
          </li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>
        
        <main>
        <div class="apply-container">
          <h1 class="apply-now">APPLY NOW</h1>
          <h2 class="descript">Discover a career with TBS, 
          a premier leader in traffic control solutions! 
          As a dynamic and rapidly growing company in the traffic management industry, 
          TBS takes pride in revolutionizing how we navigate and manage traffic flow. 
          Join our dedicated team and contribute to creating safer, 
          more efficient roadways.</h2>
        </div>
        <form class="apply-set -- box" id="applicationForm" onSubmit={handleSubmit}>
          <div class="container container--narrow page-section">

          <h1 class="job-app-box">Job Application Form</h1>
          <h2 class="job-fill">Please Fill Out the Form Below to Submit Your Job Application!</h2>
            
            
          <label class="name">Name: </label>
        <div class="first-input">
        
          <div class="first-name">
              <div class="name-input">
                <label class="first-label-name">First Name *</label>
                  <input class="first-name-input"text="first-name--input" placeholder="Enter First Name"></input>
              </div>
              </div>
            <div class="last-name">
              <div class="name-input"> 
            <label class="last-label-name">Last Name *</label>
              <input class="last-name-input"text="last-name--input" placeholder="Enter Last Name"></input>
              </div>
            </div>
            </div>
            <label class="emailphone-label">Email/Phone Number:</label>
            
            <div class="emailphone-input">
            
            <div class="email">
            <div class="name-input">
            <label class="email-name">Email *</label>
              <input class="email-box"text="email--input" placeholder="Enter Email"></input>
              </div> 
              </div>
              
            <div class="phone">
            <div class="name-input">
            <label class="phone">Phone Number *</label>
              <input class="phone-box"text="phone--input" placeholder="Enter Phone Number"></input>
              </div>
              </div>  
              </div>  

            <label class="resume-label">Resume/Cover Letter:</label>
              <h1 class="resume-note">Note: You can only submit .doc, .pdf, .txt, and .pages files</h1>
            <div class="resume-input">
              <div class="resume">
              <div class="name-input">
                <label class="resume-name">Resume *</label>
                <FileInput></FileInput>
                </div>
                </div>   

                <div class="cover-letter">
              <div class="name-input">
                <label class="cover-name">Cover Letter</label>
                <FileInput></FileInput>
                </div>
                </div>    
            </div>
            <label class="message-label">Message: </label>
            <h1 class="message-note">Tell us why you want to work for TBS! </h1>
   
                <textarea class="message-text"
                          name="message"

                          placeholder="Enter Message"></textarea>
<button type="submit" class="btn btn--full submit-app">
            Submit Application
          </button>

          </div>



         </form>
         <footer class="footer">
                  <div class="site-footer__inner container container--narrow">

                        <h1 class="tbs-copy">
                          <a href="index.html">&copy; 2023 Traffic & Barrier Solutions, LLC</a>
                        </h1>
                        <h1 class="footer-number">706-263-0175</h1>
                      </div>

            </footer>
        </main>
        </body>
        </html>
    )

    }
export default Apply;

我所有的css都已成功地从apply.css导出到后端,这也是问题的一部分。然而,我的下一个问题是,当我向我的gmails提交一个伪应用程序时,我会收到错误。我有两个连接到applynw.jsx的JavaScript文件。但是,我不知道是否需要将App.jsx和main.jsx文件包含在客户端文件夹中。这是我的submitApplication.jsx文件:

// submitApplication.jsx
export async function sendFormDataToServer(formData) {
    try {
        const response = await fetch('http://localhost:5173/submit-gmail-addresses', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        });

        if (response.ok) {
            // Handle success
            return 'Success: Form data submitted to server';
        } else {
            // Handle failure
            return 'Error: Failed to submit form data to server';
        }
    } catch (error) {
        // Handle network error
        console.error('Network error:', error);
        return 'Error: Network error';
    }
}

这是server/src文件夹中的server.js:

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const path = require('path')
const app = express();
const port = 5173;

// Middleware to parse JSON bodies
app.use(bodyParser.json());

// Endpoint to handle form submission

app.use(express.static(path.join(__dirname, 'client')));

app.post('/submit-gmail-addresses', async (req, res) => {
    const formData = req.body;

    // Process the form data
    console.log('Received form data:', formData);

    try {
        // Send application to specified Gmail addresses
        const result = await sendApplication(formData);

        // Send success response
        res.status(200).json({ success: true, message: 'Application sent successfully' });
    } catch (error) {
        console.error('Error sending application:', error);
        // Send error response
        res.status(500).json({ success: false, error: 'Failed to send application' });
    }
});

app.get('/', (res) => {
    // Send response for '/applynow' route
    res.sendFile(path.resolve)
    res.send('This is the home page');
});
// Endpoint to handle requests to '/applynow'
app.get('/applynow', (res) => {
    // Send response for '/applynow' route
    res.sendFile(path.resolve)
    res.send('This is the apply now page');
});

// Function to send application
async function sendApplication(formData) {
    // Configure Nodemailer transporter
    const transporter = nodemailer.createTransport({
        // Configure transporter options (e.g., SMTP settings)
    });

    // Construct email message
    const mailOptions = {
        from: '[email protected]', // Sender's email address
        to: [formData.email1, formData.email2, formData.email3], // Array of recipient email addresses
        subject: 'New Job Application',
        text: `\nName: ${formData.firstName} ${formData.lastName}\nEmail: ${formData.email}\nPhone: ${formData.phone}\nResume: ${formData.resumeFile}\nCover Letter: ${formData.coverLetterFile}\nMessage: ${formData.message}`,
    };

    // Send email
    await transporter.sendMail(mailOptions);
}

// Start the server
app.listen(port, () => {
    console.log(`Server is listening at http://localhost:${port}`);
});

所以我希望它将所有的工作申请发送到这三封Gmail,但不幸的是,它在“Inspect”中显示了错误消息。每当我试图通过在终端上启动我的应用程序时 C:\Users\rowel\OneDrive\Desktop\TBSweb\tbs-website\server\src> node server.js ,它显示 服务器正在侦听http://localhost:5173 然而,当我在“立即申请”页面上提交所有内容时,它将不起作用。如果我需要在这里解释更多关于我的代码行或添加更多代码文件,请随时提出更多问题,以便我可以在这个论坛中添加更多代码。否则,我需要帮助让我的VITE/RECT从客户端向服务器端提交申请,然后服务器端将提交的申请的电子邮件发送到列出的电子邮件中。

1 回复 | 直到 2 年前

-2

Habib Yousuf 2 年前

检查React应用程序中的URL路径和API端点的正确性。
确保正确配置服务器以处理API请求。
如果您的React应用程序和服务器位于不同的域,请验证CORS设置。
检查浏览器控制台和网络选项卡是否有详细的错误消息。
重新启动React和后端服务器,并确保后端服务正在运行。