Я новичок в React и пытаюсь создать веб-страницу, содержащую следующие страницы: 1. Главная страница 2. Сервисы - сервис 1 - сервис 2 - сервис 3 - сервис 4 3. О программе 4. Контакты Лог сервера c, должен содержать лог c о контакте, который у меня есть на странице контактов (для получения сообщения от кого-то и отправки автоматического сообщения, которое сообщает, что сообщение получено) и лог c для маршрутизации страниц. В основном на главной странице, я рендеринг изображений и текста, и у меня есть несколько кнопок, которые ссылаются на другие страницы. На странице Сервис снова у меня есть несколько кнопок, которые ссылаются на мои сервисы, текст и изображения. Все мои услуги оказывают только текст и изображения. То же самое для О странице. На странице контактов у меня есть контактная форма, для которой я написал логи сервера c. Может кто-нибудь помочь мне и сказать мне, если написано лог лог сервера c и как я могу проверить этот лог c. Я попытался запустить: сервер узла. js, но выдает сообщение «Ошибка: не удается найти модуль» /Users/seldaali/Desktop/my-website/server.js '"
Вот мое приложение . 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;
Тогда мой индекс. js:
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Конец моего сервера. 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);
}
});
}
})
})
Моя посылка. 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"
},