javascript - 如何在 Vue.js Express MongoDB 应用程序中传递 props

Question

我正在尝试使用 Vue.js Node、Express 和 MongoDB 构建一个基本的聊天应用程序。我的聊天应用程序有一个欢迎页面，用户可以在欢迎屏幕中输入他/她的名字。 (请参阅:Welcome.vue)。然后，用户名被重新路由到 Posts.vue，并且用户名作为 prop 传递给该组件。在 Posts.vue 上，用户可以创建一条消息，然后将其添加到按名称和消息排列的聊天消息日志中。到目前为止，我已经成功在 app 中通过 Express 将名称 (this.name) 和消息 (this.description) 发布到 mongoDB。 js。但是，只有消息 (post.description) 返回到屏幕。给定消息的用户名 (post.name) 根本不会返回到屏幕上。这是否与将名称从 Welcome.vue 作为 prop 传递给 Posts.vue 有关？关于如何解决这个问题有什么建议吗？我的代码如下。谢谢!

欢迎.vue

<template>
  <div class="welcome container">
    <div class="card">
      <div class="card-content center-align">
        <h2 class="teal-text">Welcome</h2>
        <form @submit.prevent="enterChat">
          <label for="name">Enter your name:</label>
          <input type="text" name="name" v-model="name">
          <p v-if="feedback" class="red-text">{{ feedback }}</p>
          <button class="btn teal">Enter Chat</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data () {
    return {
      name: null,
      feedback: null
    }
  },
  methods: {
    enterChat(){
      if(this.name){
        this.$router.push({ name: 'Posts', params: { name: this.name } })
      } else {
        this.feedback = 'You must enter a name to join'
      }
    }
  }
}
</script>

Posts.vue

<template>
  <div class="posts">
    <h2>{{ name }}'s Chat Feed</h2>
    <div class="table-wrap">
      <div class="form">
        <div>
          <textarea rows="15" cols="15" placeholder="DESCRIPTION" v-model="description"></textarea>
        </div>
        <div>
          <button class="app_post_btn" @click="addPost">Add</button>
        </div>
      </div>
      <table>
        <tr>
          <td>name</td>
          <td width="550">Message</td>
          <td width="100" align="center">Action</td>
        </tr>
        <tr v-for="post in posts" :key="post._id">
          <td>{{ post.name }}</td>
          <td>{{ post.description }}</td>
          <td align="center">
            <a href="#" @click="deletePost(post._id)">Delete</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import PostsService from '@/services/PostsService'
export default {
  name: 'posts',
  props: ['name'],
  data () {
    return {
      posts: [],
      description: ''
    }
  },
  mounted () {
    this.getPosts()
  },
  methods: {
    async getPosts () {
      const response = await PostsService.fetchPosts()
      this.posts = response.data.posts
      console.log(this.posts)
    },
    async addPost () {
      await PostsService.addPost({
        name: this.name,
        description: this.description
      })
      this.getPosts()
    },
    async deletePost (id) {
      await PostsService.deletePost(id)
      this.getPosts()
    }
  }
}
</script>

app.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
var Post = require("../models/post");

var mongoose = require('mongoose');
mongoose.connect('CONNECTION STRING');
var db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error"));
db.once("open", function(callback){
  console.log("Connection Succeeded");
});

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

app.get('/posts', (req, res) => {
  Post.find({}, 'title description', function (error, posts) {
    if (error) { console.error(error); }
    res.send({
      posts: posts
    })
  }).sort({_id: -1})
})

app.post('/posts', (req, res) => {
  var db = req.db
  var name = req.body.name
  var description = req.body.description
  var new_post = new Post({
    name: name,
    description: description
  })

  new_post.save(function (error) {
    if (error) {
      console.log(error)
    }
    res.send({
      success: true,
      message: 'Post saved successfully'
    })
  })
})

app.delete('/posts/:id', (req,res) => {
  var db = req.db;
  Post.remove({
    _id: req.params.id
  }, function(err, post){
    if (err)
      res.send(err)
    res.send({
      success: true
    })
  })
})

app.listen(process.env.PORT || 8081)

post.js( Mongoose 模式)

var mongoose = require("mongoose");
var Schema = mongoose.Schema;

var PostSchema = new Schema({
  name: String,
  title: String,
  description: String
});

var Post = mongoose.model("Post", PostSchema);
module.exports = Post;

Answer 1

实际上，您根本没有从数据库返回name，请参阅Post.find的第二个参数。

只需添加一个名称:

  Post.find({}, 'title description name', function (error, posts) {
    if (error) { console.error(error); }
    res.send({
      posts: posts
    })
  }).sort({_id: -1})