在React项目中编写Express服务器

Question

我是新的反应，我正在尝试创建一个包含以下页面的网站: 1.主页2.服务-服务1-服务2-服务3-服务4 3.大约4.联系服务器逻辑，必须包含从我在联系页面上的联系人的逻辑(用于从某人接收消息，并发送一个自动消息，说该消息已收到)和页面路由的逻辑。基本上在主页上，我正在渲染图像和文本，我有一些链接到其他页面的按钮。在Service页面上，我又有一些链接到我的服务、文本和图像的按钮。我的所有服务都只渲染文本和图像。About页面也是如此。在联系人页面上，我有一个联系人表单，我已经为其编写了服务器逻辑。有没有人可以帮助我，告诉我写的服务器逻辑是否正确，以及如何测试这个逻辑。我尝试运行：'/Users/seldaali/Desktop/my-website/server.js‘server.js，但出现“错误:找不到模块node”

这是我的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 (express)和client (react)。服务器返回数据&客户端使用该数据，但在您的服务器中，即

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库向您定义的路由发出get请求，该路由现在返回数组，您可以遍历该数组，并在客户机上呈现该数组。

我不是react家伙，所以我不能帮你。