Javascript 如何向db.json添加新用户

Javascript 如何向db.json添加新用户,javascript,rest,vue.js,vuejs2,components,Javascript,Rest,Vue.js,Vuejs2,Components,我有db.json,它看起来像: { "users": [ { "id": 0, "isActive": true, "balance": "$2,309.20", "picture": "http://placehold.it/128x128", "age": 26, "accessLevel": "guest", "firstName": "Robin", "lastName": "W

我有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>
在my db.json中,第一个对象被替换为一个新对象:

PUT/users/02001.397 ms-143


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

保存用户/创建用户您应该使用发布请求。你不需要传递id。如果你想更新你的用户,那么你需要用当前的用户id发出请求

听起来你需要确定下一个免费的
id
,或者更改服务器的put代码,以便它捕获
/null
。OMG:)我试着使用
POST请求
,但我不会删除代码中的{$this.id},非常感谢!)您还需要像这样更改url-url(){return
${this.restUrl}
}
id() {
    return 0
}