#node.js #reactjs #mongodb #express #mongoose
#node.js #reactjs #mongodb #экспресс #мангуст
Вопрос:
Я запускаю свой сервер с помощью nodemon, который запускает сервер на localhost 8080
Я перехожу на localhost: 8080 / api, который возвращает:
[{"date":"1587946153337","_id":"5ea622b6334c4de9fa307b20","post":"This is the first post!","__v":0},{"date":"1603312852793","_id":"5f909d49d75c9b1ec2e39ee7","post":"this is a test","__v":0},{"date":"1603313042345","_id":"5f909dea89eeee2d40e933c6","post":"this is a second test post","__v":0},{"date":"1603483744050","_id":"5f9338b12e575d3935b0b16b","post":"hiiii","__v":0},{"date":"1603483572093","_id":"5f9338b264236f36c48c3a60","post":"e","__v":0},{"date":"1604349323678","_id":"5fa06dcd59aeeba1e1845c0f","post":"was","__v":0}]
Как я могу получить доступ к возвращаемым свойствам? Например, я хочу отобразить свойство post как HTML.
Объект, который, по-видимому, содержит свойства, находится data
из api.js
const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");
const Post = require('../models/post'); // This is the model to use
// Routes
router.get('/', (req, res) => {
Post.find( { })
.then((data) => {
console.log('Data: ', data);
const log = res.json(data);
//console.log(log);
})
.catch((error) => {
console.log('Error: ', daerrorta);
});
});
Вот мой server.js
const express = require('express');
const mongoose = require('mongoose');
const morgan = require('morgan');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 8080;
const routes = require('./routes/api');
const postString = "test";
const commentString = "test";
const profString = "test";
const univString = "test";
// MONGODB ACCOUNT INFO:
// Usermame: MyCampusAdmin
// Password: AdminForMyCampus
// MongoDB URI
const MONGODB_URI = 'mongodb srv://MyCampusAdmin:AdminForMyCampus@mycampus-whyic.mongodb.net/MyCampus?retryWrites=trueamp;w=majority';
mongoose.connect(MONGODB_URI || 'mongodb://localhost/MyCampus', {
useNewUrlParser: true,
useUnifiedTopology: true
});
mongoose.connection.on('connected', () => {
console.log('Mongoose is connected');
});
// Data parsing
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// HTTP request logger
app.use(morgan('tiny'));
app.use('/api', routes);
//function makePost(p) {
// p = postString;
// postData
// const postData = {
// post: p,
// univID: 1,
// numLikes: 0
// };
// Post Save
// const newPost = new Post(postData); // Instance of the new model
// Post Save
// newPost.save((error) => {
// if (error) {
// console.log('Something went wrong with post save');
// }
// else {
// console.log('Post data has ben saved');
// }
// });
//}
function makeComment(c) {
c = commentString;
// commentData
const commentData = {
comment: c,
postID: 1,
numLikes: 0
};
// Comment Save
const newComment = new Comment(commentData);
// Comment Save
newComment.save((error) => {
if (error) {
console.log('Something went wrong with comment save');
}
else {
console.log('Comment data has ben saved');
}
});
}
function addProf(pr) {
pr = profString;
// profData
const profData = {
name: pr,
univID: 1,
department: "SE",
classes: "Applied Research"
};
// Prof Save
const newProf = new Prof(profData);
// Prof Save
newProf.save((error) => {
if (error) {
console.log('Something went wrong with prof save');
}
else {
console.log('Prof data has ben saved');
}
});
}
function addUniv(u) {
u = univString;
// univData
const univData = {
university: u
};
// University Save
const newUniv = new University(univData);
// Universoty Save
newUniv.save((error) => {
if (error) {
console.log('Something went wrong with university save');
}
else {
console.log('University data has ben saved');
}
});
}
// COMMENT SET UP
// Comment Schema Declaration
const SchemaComment = mongoose.Schema;
// Comment Schema
const CommentSchema = new SchemaComment ({
comment: String,
postID: Number,
date: {
type: String,
default: Date.now()
},
numLikes: Number,
});
// Comment Model
const Comment = mongoose.model('Comment', CommentSchema);
//PROF SET UP
// Prof Schema Declaration
const SchemaProf = mongoose.Schema;
// Professor Schema
const ProfSchema = new SchemaProf ({
name: String,
univID: Number,
department: String,
classes: String
});
// Professor Model
const Prof = mongoose.model('Professor', ProfSchema);
// UNIV SET UP
// University Schema Declaration
const SchemaUniv = mongoose.Schema;
// University Schema
const UnivSchema = new SchemaUniv ({
university: String,
});
// University Model
const University = mongoose.model('University', UnivSchema);
//TESTING FUNCTIONS
// makePost(postString);
// makeComment(commentString);
// addProf(profString);
// addUniv(univString);
app.listen(PORT, console.log(`Server is starting at ${PORT}`));
//app.listen(3000, function(){
// console.log("Server 3000");
//});
/*
app.get("/", function(req, res){
res.sendFile(__dirname "/AccountSetUp.jsx");
});
app.post("/", function(req, res){
res.sendFile(__dirname "/AccountSetUp.jsx");
});
*/
Вот мой api.js
const router = express.Router();
const mongoose = require('mongoose');
const https = require("https");
const Post = require('../models/post'); // This is the model to use
// Routes
router.get('/', (req, res) => {
Post.find( { })
.then((data) => {
console.log('Data: ', data);
const log = res.json(data);
//console.log(log);
})
.catch((error) => {
console.log('Error: ', daerrorta);
});
});
router.get("/", function(req, res){
https.get(Post, function(response){
console.log(response.statusCode);
})
res.send("hello")
})
router.post('/save', (req, res) => {
console.log('Body: ', req.body);
const data = req.body;
const newPost = new Post(data);
newPost.save((error) => {
if (error) {
res.json({ msg: 'Sorry, internal server errors'});
}
else {
// Post
res.json({
msg: 'Your data has been saved!!'
});
}
});
});
router.get('/name', (req, res) => {
const data = {
username: 'name',
age: 20
};
res.json(data);
});
module.exports = router;
Это весь код, который у меня есть для компонента, который должен извлекать и отображать данные. Я не уверен, как получить доступ к данным, возвращенным из router.get
этого компонента.
DisplayPost.tsx
import { router } from "../routes/api";
export const DisplayPost = () => {
return(
<>
<div>Welcome</div>
</>
)
}
Комментарии:
1. Что вы пробовали до сих пор? Похоже, вы возвращаете массив из вызова, поэтому вы можете перебирать этот массив и получать доступ к
post
свойству2. Я пытался использовать любые предложения, которые я могу найти. Например, с помощью
componentDidMount
иJSON.Parse()
. Я не пробовал перебирать массив. Вы предполагаете, что я могу использовать цикл для перебораdata
массива? Я еще не пробовал это, но не уверен, как структурировать это в коде или куда его поместить.3. Возможно, было бы неплохо включить код, который у вас есть для компонента, который извлекает и отображает данные. Ваши данные — это просто массив (список), который вы можете использовать
map
для итерации по нему и отображения определенной его части: reactjs.org/docs/lists-and-keys.html Вы можете прочитать больше здесь4. Я загрузил свой компонент, который будет выполнять рендеринг. Я бы сопоставил его в своем
DisplayPost.tsx
компоненте? Итак, по сути, я пытаюсь отобразить массив следующим образом:data.map(Post)
? Я попытался реализовать его по вашей ссылке, но возникли проблемы с объявлением или импортом этого массива в моем новом компонентеDisplayPost.tsx
5. Итак, где вы извлекаете данные? Это просто пустой компонент, так что вы делаете выборку в родительском компоненте?