#node.js #reactjs #express #frontend #backend
Вопрос:
Это дает мне пустую страницу на главном экране.Как я могу это решить ? Я хочу визуализировать свой интерфейс и хочу видеть свой веб-сайт на экране, но он дает мне «Не могу получить/». Мой интерфейс, в который он встроен React.js как я могу связать это с node.js и выразить, чтобы просмотреть его на экране?
Вот мой код-
require('dotenv').config({ path: 'env' }); const dotenv = require("dotenv"); dotenv.config(); const express = require('express'); const mongoose = require('mongoose'); const cors = require('cors'); const cookieParser = require('cookie-parser'); const SocketServer = require('./socketServer'); const corsOptions = { Credential: 'true', }; const app = express(); app.use(express.static("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/" '/public')); app.get('/', (req,res,next) =gt; { res.sendfile("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/" "/public/index.html"); }) app.use(express.json()) app.options("*" , cors(corsOptions)); app.use(cors(corsOptions)); app.use(cookieParser()) //#region // !Socket const http = require('http').createServer(app); const io = require('socket.io')(http); io.on('connection', socket =gt; { SocketServer(socket); }) //#endregion //#region // !Routes app.use('/api', require('./routes/authRouter')); app.use('/api', require('./routes/userRouter')); app.use('/api', require('./routes/postRouter')); app.use('/api', require('./routes/commentRouter')); app.use('/api', require('./routes/adminRouter')); app.use('/api', require('./routes/notifyRouter')); app.use('/api', require('./routes/messageRouter')); //#endregion const URI = process.env.MONGODB_URL; mongoose.connect(URI, { useCreateIndex:true, useFindAndModify:false, useNewUrlParser:true, useUnifiedTopology:true }, err =gt; { if(err) throw err; console.log("Database Connected!!") }) const port = process.env.PORT || 8080; http.listen(port, () =gt; { console.log("Listening on ", port); });
HTML-код —
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="utf-8" /gt; lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt; lt;meta name="theme-color" content="#000000" /gt; lt;script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'gt;lt;/scriptgt; lt;titlegt;Web Applt;/titlegt; lt;/headgt; lt;bodygt; lt;script type="text/javascript" src='C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js'gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;
Я пробовал несколько способов, но не смог решить эту проблему. Связано ли это с базой данных cloudinary или MongoDB?
Я добавил некоторый код и изменил несколько его частей, но ошибка не может быть исправлена.
Как я могу решить эту проблему?
Ответ №1:
get/
здесь указывается конечная точка по умолчанию, которая имеет тип get
и содержится только /
в URL. Здесь, в вашем коде, все ваши конечные точки начинаются с /api
, чтобы вы могли добавить новую конечную точку/маршрут по умолчанию, например:
app.get('/',(req, res) =gt; { res.send("Hello World") })
Он отобразит Hello World в вашем браузере, когда вы перейдете на главный экран.
Комментарии:
1. Как я могу перенаправить его на файл, подобный моей домашней странице ?
Ответ №2:
Потому что у вас нет никакого домашнего маршрута. Добавьте сверху домашний маршрут, как показано ниже.
app.use('/', (req,res,next) =gt; { return res.json('this is home route') });
Комментарии:
1. Как я могу перенаправить его на файл, подобный моей домашней странице ?
2. это вы можете сделать на своем интерфейсе, если express-это просто серверная часть api.
3. Я не могу понять, как? У меня есть свой интерфейс в react.js но я не могу связать это с этим.
4. пожалуйста, поделитесь своим кодом интерфейса и измените свой вопрос как с внутренним, так и с внешним кодом, а также опишите, чего вы хотите достичь и какие ошибки вы получаете, если вы реализовали то же самое.
5. Я отредактировал его. Пожалуйста, прочтите вопрос еще раз и, пожалуйста, постарайтесь помочь мне с ним.
Ответ №3:
создайте index.html с помощью index.js файл, включенный в него, и сервер, который index.html для вашего домашнего маршрута. Сделайте так, как указано в вашем бэкэнде
// add following app.use(express.static(__dirname '/public')); // Remove Following app.get('C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js',(req, res) =gt; { res.send("C:UserschiragDownloadsmern-social-media-mastermern-social-media-masterclientsrcindex.js") }) // Add Following app.get('/', (req,res,next) =gt; { res.sendfile(__dirname '/public/index.html'); })
Комментарии:
1. Появляется какая-то пустая страница. Там не отображаются мои страницы интерфейса.
2. вы создали index.html с твоей index.js в вашем публичном режиссуре ? если да, поделитесь своим репозиторием github, если вам нужна дополнительная помощь
3. Я добавил приведенный выше HTML-код, а также обновленный экспресс-код.