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

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提出请求。