Discussion :

[Mickk_dev]

Bonjour,

Je m'arrache les cheveux depuis 3 jours maintenant .. J'ai chercher partout et impossible de résoudre mon problème.

J'ai mon application monter sur VueJs, une APIRest en NodeJs et une base de donnée MongoDB.

J'ai réussi a implémenter mes requête GET et POST pour créer des produits (site de E-commerce), mais mes requête PUT et DELETE ne fonctionne pas.
Je pense connaitre le problème, cela viens du faire que pour les requête PUT et DELETE il faut faire référence a l'id du produit mais je ne sais pas comment écrire le code pour cela..

Voila mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template lang="">
    <div class="item-list-template">
      <div class="items-list mb-2" v-for="(item, id) in items" :key="id">
    {{ item.nom }}
        <div class="button">
            <button @click="showModifyForm(id)" class="btn btn-success">Modifier</button>
            <button @click="deleteItem(id)" class=" ms-2 btn btn-danger">Supprimer</button>
        </div>
    </div>  
    <form v-if="modifyForm" action="">
        <div class="name-item mb-3">
            <label for="name-label">Nom</label>
            <input v-model="nameItem" class="form-control" type="text" id="name">
        </div>
        <div class="description-item mb-3">
            <label for="description-label">Description</label>
            <textarea v-model="descriptionItem" class="form-control" name="" id="" cols="30" rows="5"></textarea>
        </div>
        <div class="image-item mb-3">
            <label for="image-labal">URL image</label>
            <input v-model="imageItem" class="form-control" type="url" name="" id="">
        </div>
        <div class="category-item mb-3">
            <label for="category-label">Catégorie</label>
            <select v-model="categoryItem" class="form-control" name="category" id="">
                <option value="none">Catégorie...</option>
                <option value="baume">Baume</option>
                <option value="huile">Huile</option>
                <option value="accessoire">Accessoire</option>
            </select>
        </div>
        <div class="price-item mb-3">
            <label for="price-label">Prix</label>
            <input v-model="priceItem" class="form-control" type="number" name="price" id="">
        </div>
        <div class="en-stock-item mb-3">
            <label for="en-stock-label">En stock</label>
            <select v-model="enStockItem" class="form-control" name="en-stock" id="">
                <option value="true">Oui</option>
                <option value="false">Non</option>
            </select>
        </div>
        <div class="submit-item text-center">
            <button @click.prevent="modifyItem(id)" class="btn btn-primary" type="submit">Modifier l'item</button>
        </div>
    </form>        
    </div>
 
</template>
 
<script>
 
import axios from 'axios';
 
 
export default {
 
    data() {
        return {
            items: null,
            modifyForm: false,
            nameItem: "",
            descriptionItem: "",
            imageItem: "",
            categoryItem: "none",
            priceItem: 0,
            enStockItem : true, 
        }
    },
    methods: {
        showModifyForm() {
            if(this.modifyForm === false) {
                this.modifyForm = true
            } else {
                this.modifyForm = false
            }
        },
        modifyItem(id) {
            axios.put ({
                method: "put",
                url: `http://localhost:3000/api/items/:${id}/`,
                data : {
                    nom : this.nameItem,    
                    image : this.imageItem,
                    description : this.descriptionItem,
                    categorie : this.categoryItem,  
                    prix : this.priceItem,  
                    enStock: this.enStockItem
                }
            })
                .then(res => console.log(res))
                .catch(err => console.log(err))
                this.getItems()
        },
        getItems() {
            axios.get("http://localhost:3000/api/items/")
                .then(res => this.items = res.data)
                .catch(err => console.log(err))
        },
        deleteItem(id) {
            axios.delete(`http://http://localhost:3000/api/items/:`+id)
            .then(res => console.log(res))
            .catch(err => console.log(err))
            this.getItems()
        }
    },
    mounted() { 
        this.getItems()
    }  
 
}
 
 
</script>
 
 
 
<style>
    .items-list {
        display: flex;
        justify-content: space-between;
    }
</style>

Et la route de mon backend :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
app.delete("/api/items/:id", (req, res, next) => {
  Thing.deleteOne({ _id: req.params.id })
    .then(res => res.status(200).json({ message : "Objet supprimé "}))
    .catch(err => res.status(400).json({ err }))
    next();
})

MongoDB crée un id automatiquement pour chaque objet "_id" et c'est cet id que j'aimerai utiliser pour faire référence a l'item a supprimé.
Merci pour l'aide que vous m'apporterez car je ne sais vraiment pas quoi faire.

[amoiraud]

Salut, je pense qu'il faut juste que tu enlève les ":" devant le ${id} dans l'URL appelée par tes méthodes modifyItem et deleteItem.