Question

我有db.json，看起来像是：

{
  "users": [
    {
      "id": 0,
      "isActive": true,
      "balance": "$2,309.20",
      "picture": "http://placehold.it/128x128",
      "age": 26,
      "accessLevel": "guest",
      "firstName": "Robin",
      "lastName": "Whitaker",
      "company": "REMOTION",
      "email": "robin.whitaker@remotion.com",
      "phone": "+7 (845) 419-3899",
      "address": "442 Hanson Place, Tonopah, Washington, 5118",
      "about": "Ut occaecat cillum esse eu Lorem sit dolore. Fugiat cillum occaecat ad consequat ex irure velit ullamco occaecat Lorem fugiat qui consectetur do. Proident sunt eu sint cupidatat quis. Fugiat ad sunt eu sint velit anim eiusmod commodo incididunt excepteur deserunt ex exercitation. Mollit sunt incididunt sint ut et.",
      "registered": "21.03.2016"
    },
    {
      "id": 1,
      "isActive": true,
      "balance": "$2,746.85",
      "picture": "http://placehold.it/128x128",
      "age": 22,
      "accessLevel": "guest",
      "firstName": "Richardson",
      "lastName": "Adkins",
      "company": "OCEANICA",
      "email": "richardson.adkins@oceanica.me",
      "phone": "+7 (902) 517-3328",
      "address": "117 Beverley Road, Maxville, South Dakota, 6701",
      "about": "Nulla nulla do cillum dolore commodo incididunt laborum labore laboris nisi cillum cillum do. Lorem exercitation nisi proident est adipisicing adipisicing eiusmod labore velit pariatur id enim. Aliquip fugiat adipisicing et dolor eu minim irure anim ea cupidatat. Pariatur magna duis ullamco anim culpa nisi nostrud.",
      "registered": "12.04.2014"
    }
   ]
}

另外，我有一个表单，我可以添加一个用户，它看起来像

我正在尝试将新用户添加到db.json中：

<template>
    <div>
        <h3>Add user</h3>
        <hr>
        <template>
            <user-form-add v-model="user" /> // userForm on the PICTURE!
            <button type="button" class="btn btn-success" @click="save">Save</button>
            <button type="button" class="btn btn-danger" @click="cancel">Cancel</button>
        </template>

    </div>
</template>
<script>
    import axios from '@/axios.js'
    export default {
        name: 'AddUserPage',
        components: {
            UserFormAdd: () => import('@/components/UserFormAdd.vue')
        },
        data:() => ({
            user: {
            },
            restUrl: '/users'
        }),
        computed: {
            id() {
                return null
            },
            url() {
                return `${this.restUrl}/${this.id}`
            }
        },
        methods: {
            redirectToList () {
                this.$router.push('/users')
            },
            save() {
                axios
                    .put(this.url, this.user)
                    .then(() => this.redirectToList())
                    .catch(error => `Error: ${error}`)
            },
            cancel() {
                this.redirectToList()
            }
        }
    }
</script>

所以，当我试图保存时，控制台告诉我：

PUT / users / null 404 1.492 ms - 2

并且，例如，如果我将id设置为

id() {
    return 0
}

在我的db.json中，第一个对象被替换为新对象：

PUT / users / 0 200 1.397 ms - 143

我做错了什么？非常感谢。

Answer 1

要保存用户/创建用户，您应使用发布请求。你不需要传递id。如果您想更新您的用户，则需要发出请求以及当前的用户ID 。

如何将新用户添加到db.json

1 个答案: