在 React 项目上编写 Express 服务器

Question

我是 React 新手，我正在尝试创建一个包含 以下页面： 1.首页 2. 服务 - 服务 1 - 服务 2 - 服务 3 - 服务 4 3. 关于 4. 联系方式 服务器逻辑必须包含关于我在联系页面上的联系的逻辑（用于接收来自某人的消息并发送一条自动消息，说明已收到该消息）和页面路由的逻辑。 基本上在主页上，我正在渲染图像和文本，并且我有一些链接到其他页面的按钮。 再次在服务页面上，我有一些链接到我的服务、文本和图像的按钮。 我所有的服务都只呈现文本和图像。关于页面也是如此。 在联系页面上，我有一个联系表单，我已经为其编写了服务器逻辑。 谁能帮助我并告诉我编写的服务器逻辑是否正确以及如何测试此逻辑。我试图运行：node server.js，但给了我“错误：找不到模块'/Users/seldaali/Desktop/my-website/server.js'”

这是我的 App.js：

function App() {
  return (
    <>

    <Navbar />
   

      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/services" component={Services} />
        <Route exact path="/about-us" component={AboutUs} />
        <Route exact path="/contact" component={Contact} />

        <Route exact path="/services/service 1" component={service-1} />
        <Route exact path="/services/service 2" component={service-2} />
        <Route exact path="/services/service 3" component={service-3} />
        <Route exact path="/services/service 4" component={service-4}/>

        <Route component={Error} />
      </Switch>

    </>

  );
}

export default App;

然后是我的 index.js：

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

结束我的 server.js：

var express = require('express');
var router = express.Router();
var nodemailer = require('nodemailer');
var cors = require('cors');
var helmet = require('helmet');
const creds = require('./config');

var path = require('path');
var app = express();

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

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);

app.use(cors())
app.use(helmet());
app.use(express.json())
app.use('/', router)

/* Pages routing */

app.get('/', function (req, res) {
  res.send('Home')
})

app.get('/services', function (req, res) {
  res.send('Services')
  console.log('services')
})
app.get('/services/service 1', function (req, res) {
  res.send('service 1')
})
app.get('/services/service 2', function (req, res) {
  res.send('service 2')
})
app.get('/services/service 3', function (req, res) {
  res.send('service 3')
})
app.get('/services/service 4', function (req, res) {
  res.send('service 4')
})
app.get('/about-us', function(req, res) {
  res.send('About us')
})
app.get('/contact', function(req, res) {
  res.send('Contact us')
})

app.use(express.static('images'));



var transport = {
    host: '', // replace with the SMTP host of your provider
    port: 25,
    auth: {
    user: creds.USER,
    pass: creds.PASS
  }
}

var transporter = nodemailer.createTransport(transport)

transporter.verify((error, success) => {
  if (error) {
    console.log(error);
  } else {
    console.log('Server is ready to take messages');
  }
});

router.post('/send', (req, res, next) => {
  var name = req.body.name
  var email = req.body.email
  var phone = req.body.phone
  var message = req.body.message
  var content = `name: ${name} \n email: ${email} \n phone: ${phone} \n message: ${message} `

  var mail = {
    from: name,
    to: 'my email',  // Change to email address that you want to receive messages on
    subject: 'New Message from Contact Form',
    text: content
  }

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      res.json({
        status: 'fail'
      })
    } else {
      res.json({
       status: 'success'
      })
      transporter.sendMail({
    	from: "my email",
    	to: email,
    	subject: "Submission was successful",
    	text: `Thank you for contacting us!\n\nForm details\nName: ${name}\n Email: ${email}\n Phone: ${phone}\n Message: ${message}`
  	}, function(error, info){
    	if(error) {
      	console.log(error);
    	} else{
      	console.log('Message sent: ' + info.response);
    	}
  	});
    }
  })
})

我的 package.json：

{
  "name": "my-website",
  "version": "0.1.0",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "helmet": "^3.22.0",
    "nodemailer": "^6.4.6",
    "random-unicode-emoji": "^1.0.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-icons": "^3.9.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-spring": "^8.0.27",
    "react-sticky-header": "^0.2.0",
    "reactstrap": "^8.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "react-scripts server"
  },

Answer 1

您正在混合两种不同的东西，即server（表达）和client（反应）。服务器返回数据，客户端使用该数据，但在您的服务器中，即

app.get('/services', function (req, res) {
  res.send('Services')
  console.log('services')
})

您没有返回数据，而只是发送了一个页面。因此，要么使用从服务器发送的页面，要么因为您正在为客户端使用 react，所以只需返回如下数据：

app.get('/services', function (req, res) {
  console.log('services')
  return ['service data 1', 'service data 2', ...]
})

然后在您的一个组件（即Services）中，使用fetch 或axios 等http 库向您定义的路由（即/services）发出get 请求，该路由现在返回您可以循环的数组通过并在客户端渲染。

我不是反应人，所以我无法帮助你。