Question

我正在使用Express，VueJS和mongoose构建一个全栈应用程序，它基本上是一个新闻源应用程序。在两天前，我遇到了另一个错误，但是你们帮助我解决了这个问题，但是现在我又遇到了另一个错误，基本上它还是一样。我的后端正在处理所有HTTP请求，并且正在前端渲染数据（在本例中为帖子）。我的主页成功加载了所有帖子，但是我还有一个名为经济的页面，该页面仅显示属于经济类别的帖子，但是当我尝试以与所有帖子相同的方式呈现数据时，会说“无法读取属性”映射“未定义”。

我将为您提供代码，以免您感到困惑

app.js类：

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const morgan = require("morgan");
const bodyparser = require("body-parser");
const cors = require("cors");

mongoose.connect(
  `mongodb+srv://rronjakupi:` +
    process.env.MONGO_ATLASS_PW +
    `@news-feed-jmtwq.mongodb.net/test?retryWrites=true&w=majority`,
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true
  }
);

app.use(morgan("dev"));

const postRoutes = require("./api/routes/post");
const userRoutes = require("./api/routes/user");
const categoryRoutes = require("./api/routes/category");
const teknologjiRoutes = require("./api/routes/postsByCategories/teknologji");
const ekonomiRoutes = require("./api/routes/postsByCategories/ekonomi");

app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.use(cors());

app.use("/uploads", express.static("uploads"));

app.use("/posts", postRoutes);
app.use("/user", userRoutes);
app.use("/category", categoryRoutes);
app.use("/teknologji", teknologjiRoutes);
app.use("/ekonomi", ekonomiRoutes);

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use((req, res, next) => {
  const error = new Error("Not found");
  error.status = 404;
  next(error);
});

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message
    }
  });
});

module.exports = app;

ekonomi.js类：

const express = require("express");
const router = express.Router();

const Post = require("../../models/post");

router.get("/", (req, res, next) => {
  Post.find()
    .where("category")
    .equals("5e0295317e7b5c07d8f359a4")
    .select("_id name content category")
    .exec()
    .then(doc => {
      console.log(doc);
      res.status(200).json({
        count: doc.length,
        ekonomiPosts: doc
      });
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({
        error: err
      });
    });
});

module.exports = router;

EkonomiService.js类，它位于前端并具有getEconomyPosts（）方法：


const url = "http://localhost:9000/ekonomi/";

class EkonomiService {
  static getEconomyPosts() {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await axios.get(url);
        const data = res.data;
        resolve(
          data.posts.map(post => ({
            ...post
          }))
        );
      } catch (err) {
        reject(err);
      }
    });
  }
}

export default EkonomiService;

EkonomiComponent.vue类

  <div class="container">
    <h1 class="introTitle">Ekonomi</h1>
    <hr />
    <p class="error" v-if="error">{{ error }}</p>
    <div class="posts-container">
      <div
        class="post"
        v-for="(post, index) in posts"
        v-bind:item="post"
        v-bind:index="index"
        v-bind:key="post._id"
      >
        <img :src="post.postImage" class="postImage" />
        <p class="category">{{ post.category.name }}</p>
        <p class="title">{{ post.name }}</p>
        <p class="content">{{ post.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import EkonomiService from "../services/EkonomiService";

export default {
  name: "EkonomiComponent",
  data() {
    return {
      posts: [],
      error: "",
      text: ""
    };
  },
  async created() {
    try {
      this.posts = await EkonomiService.getEconomyPosts();
    } catch (err) {
      this.error = err.message;
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 80%;
  margin: 0 auto;
}

.introTitle {
  margin-top: 5%;
}

.error {
  border: 1px solid red;
  background-color: #ffc5c1;
  padding: 10px;
  margin-bottom: 15px;
}

.post {
  position: relative;
  display: inline-flex;
  margin: 2.5% 2.5% 0 0;
  border: 1px solid #e6e6e6;
  background-color: #f7f7f7;
  width: 15vw;
  height: 35vh;
  margin-bottom: 15px;
  cursor: pointer;
}

.post:hover {
  background-color: #f1f1f1;
}

.postImage {
  width: 15vw;
  height: 23vh;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  bottom: 17%;
}

.category {
  position: absolute;
  font-size: 0.7rem;
  color: #a0a0a0;
  font-weight: 500;
  margin-bottom: 10%;
  bottom: 0;
}

.content {
  position: absolute;
  font-size: 0.9rem;
  color: #313131;
  font-weight: 500;
  margin-bottom: 0;
  bottom: 0;
}
</style>

当我尝试从URL http://localhost:9000/posts/中获取数据时，就像我在返回所有帖子的主页中所做的一样，它不会引发任何错误，因此我不完全知道问题出在哪里

谢谢您能帮我。

无法读取Express，VueJS中未定义的属性“地图”

0 个答案: