У меня проблема с объединением внешнего интерфейса и внутреннего интерфейса в React framework. Я открыл 3 терминала с: 1. клиентской стороной, 2. стороной базы данных и третьим - с запущенным mongodb (sudo mongod --dbpath /System/Volumes/Data/data/db вместо mongod из-за обновления Catalina). Я не могу изменить localhost: 3000 на localhost: 8000, не знаю почему. Есть предложения?
Вот коды от клиента и сервера:
Клиент:
const name = match.params.name;
const article = articleContent.find(article => article.name === name);
const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: [] });
useEffect(() => {
const fetchData = async () => {
const result = await fetch(`/api/article/${name}`);
const body = await result.json();
console.log(body);
setArticleInfo(body);
}
fetchData();
}, [name]);
пакет. json:
"proxy": "http://localhost:8000/",
Сервер:
app.post('/api/articles/:name/upvote', async (req, res) => {
withDB(async (db) => {
const articleName = req.params.name;
const articleInfo = await db.collection('articles').findOne({ name: articleName });
await db.collection('articles').updateOne({ name: articleName }, {
'$set': {
upvotes: articleInfo.upvotes + 1,
},
});
const updatedArticleInfo = await db.collection('articles').findOne({ name: articleName });
res.status(200).json(updatedArticleInfo);
}, res);
});
app.post('/api/articles/:name/add-comment', (req, res) => {
const { username, text } = req.body;
const articleName = req.params.name;
withDB(async (db) => {
const articleInfo = await db.collection('articles').findOne({ name: articleName });
await db.collection('articles').updateOne({ name: articleName }, {
'$set': {
comments: articleInfo.comments.concat({ username, text }),
},
});
const updatedArticleInfo = await db.collection('articles').findOne({ name: articleName });
res.status(200).json(updatedArticleInfo);
}, res);
});
app.listen(8000, () => console.log('Listening on port 8000'));
Клиент запускается по команде basi c: npm запуск, Запуск сервера командой: npx nodemon --exe c npx babel-node src / server. js
Используя программу Postman, сервер работает правильно, получая +1 каждый раз для функции app.post, а также добавляя комментарии и т. Д. c.