来自表单的用户输入未发布到数据库？ （axios，mongodb，vue）

Question

我是 vue 新手，我正在尝试将用户输入的数据发布到我的 mongodb。我正在使用 axios 来检索和发布数据。 虽然来自 db 的数据确实显示在我的页面上，但我无法获取要发布的表单输入。我什至没有收到任何错误消息，只是没有发布。我期待您的回复，让我知道我做错了什么。 这是我的 AddUser.vue 页面，来自客户端

    <template>
<div>
    <h1>Registration</h1>
    <p>First name: </p>
    <b-form-input v-model="firstname">
    </b-form-input>
    <p>Last name: </p>
    <b-form-input v-model="lastname">
    </b-form-input>
    <p>Email: </p>
    <b-form-input v-model="email">
    </b-form-input>
    <p>Password: </p>
    <b-form-input v-model="password">
    </b-form-input>
    <br>
    <button v-on:click="submitNew">Submit</button>
</div>
</template>

<script>
import UserService from "../UserService";

export default {
    name: "UserEdit",
    data(){
        return {
            editUsers: this.$route.query.user,
            editStatus: "",
            user: {}
        }
    },
    methods: {
        submitNew(){
            try{
                this.user = UserService.addUsers;
            } catch (err) {
                this.error = err.message;
            }
            this.cancel();
        }
    },
    watch :{
        $route: "updateRouter"
    }
}
</script>

这是我的 UserService.vue，来自客户端

import axios from "axios";
const mongoURL = "http://localhost:5000/api/posts";

class UserService{
    static getUsers(){
        return new Promise(async (resolve,reject)=> {
            try{
                const res = await axios.get(mongoURL);
                const users = res.data;
                resolve(
                    users.map((users) =>({
                        ...users,
                    }))
                );
            } catch (err) {
                reject (err);
            }

    });
    }

    static addUsers(user){
        return axios.post(mongoURL, {
            user
        })
    }

export default UserService;

这是我的 Users.js 模型，来自服务器

const mongoose = require('mongoose');

const User = mongoose.model("User",{
    firstname: {
        type: String,
        required: true,
        trim: true
    },
    lastname: {
        type: String,
        required: true,
        trim: true
    },
    email: {
        type: String,
        required: true,
        trim: true
    },
    password: {
        type: String,
        required: true
    }
})

module.exports = User;

这是我的posts.js，来自服务器

const express = require("express"),
      mongoose = require("mongoose"),
      User = require("../models/Users.js"),
      router = express.Router();

      router.get("/", async (req,res)=>{
          try {
              const user = await User.find({});
              res.send(user);
          } catch (error){
              res.status(500).send(error);
          }
      });

      router.post("/", async(req,res)=>{
          console.log(req.body["user"]);
          const user = new User(req.body["user"])
          console.log(user);
          try{
              await user.save
              console.log(user)
          } catch(err){
              res.status(550).send(err);
          }
      })

      module.exports = router;

Answer 1

<template>
    <div>

        <h1>Registration</h1>

        <p>First name: </p>

        <b-form-input v-model="user.firstname">

        </b-form-input>

        <p>Last name: </p>

        <b-form-input v-model="user.lastname">

        </b-form-input>

        <p>Email: </p>

        <b-form-input v-model="user.email">

        </b-form-input>

        <p>Password: </p>

        <b-form-input v-model="user.password">

        </b-form-input>

        <br>

        <button v-on:click="submitNew">Submit</button>

    </div>
</template>

<script>
import UserService from "../UserService";

export default {
    name: "UserEdit",
    data() {
        return {
            editUsers: this.$route.query.user,
            editStatus: "",
            user: {}
        }
    },
    methods: {
        submitNew() {
            try {
                this.user = UserService.addUsers(this.user);
            } catch (err) {
                this.error = err.message;
            }
            this.cancel();
        }
    },
    watch: {
        $route: "updateRouter"
    }
}
</script>