मेरे पास एक साधारण vuetify डेटाटेबल है जो सीआरयूडी संचालन करता है। मैं axios और एक mongo डेटाबेस का उपयोग कर रहा हूँ। जब मैं एक नया आइटम जोड़ता हूं, तो जानकारी क्लाइंट साइड में सही ढंग से प्रदर्शित होती है और मोंगो डेटाबेस में पोस्ट की जाती है। हालांकि, मैं mongo डेटाबेस की अद्यतन जानकारी तक नहीं पहुंच सकता, विशेष रूप से mongo द्वारा बनाई गई आईडी, जब तक कि मैं वेबपेज को पुनः लोड नहीं करता। मैं Vue में नवागंतुक हूं, कृपया धैर्य रखें। समस्या का एक सरलीकृत संस्करण:

 axios
   .post('http://localhost:5000/dessert', {
   name: this.editedItem.name
 })

 console.log(this.editedItem.name) // I CAN ACCES WITHOUT PROBLEM
 console.log(this.editedItem._id) // I NEED TO RELOAD THE WEBPAGE IN ORDER TO ACCES THIS ELEMENT. THE ID THAT MONGO CREATED.

व्यू फ़ाइल:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
              <v-btn color="blue darken-1" text @click="save">Save</v-btn>
            </v-card-actions>

          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>

    <template v-slot:item.action="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        edit
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        delete
      </v-icon>
    </template>

    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
import axios from 'axios'

  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'Dessert (100g serving)',
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        name: '',
        calories: 0,
      },
      defaultItem: {
        name: '',
        calories: 0,
      },
    }),
    mounted() {
       this.fetchItems()
    },

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },
    watch: {
      dialog (val) {
        val || this.close()
      },
    },
    created () {
      this.initialize()
    },

    methods: {
      fetchItems(){
      axios
        .get('http://localhost:5000/dessert')
        .then(response => (this.desserts = response.data.data))
        },

      editItem (item) {
        this.editedIndex = this.desserts.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.editedID = this.editedItem._id
        this.name = this.editedItem.name
        this.calories = this.editedItem.calories
        this.dialog = true
      },

      deleteItem (item) {
        const index = this.desserts.indexOf(item)
        this.deletedItem = Object.assign({}, item)
        console.log(this.deletedItem)
        this.deletedID = this.deletedItem._id
        console.log(this.deletedID)
        if (confirm("Do you really want to delete?")) {
          axios.delete(`http://localhost:5000/dessert/${this.deletedID}`);
          this.desserts.splice(index, 1);
        }
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },
      save () { // Edit Item
        if (this.editedIndex > -1) {
          Object.assign(this.desserts[this.editedIndex], this.editedItem)
          axios.delete(`http://localhost:5000/dessert/${this.editedItem._id}`)
          axios
            .post('http://localhost:5000/dessert', {
            name: this.editedItem.name,
            calories: this.editedItem.calories
            })

          // New Item
        } else {
          this.desserts.push(this.editedItem)

          axios.post('http://localhost:5000/dessert', {
          name: this.editedItem.name,
          calories: this.editedItem.calories
          })
        }

        this.close()
      },
    },
  }
</script>

पायथन फ़ाइल:

from flask import Flask
from flask import jsonify
from flask import request
from flask_pymongo import PyMongo
from flask_cors import CORS
from bson.objectid import ObjectId

app = Flask(__name__)
#CORS(app)

# instantiate 
app.config.from_object(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

app.config['MONGO_DBNAME'] = 'restdb'
app.config['MONGO_URI'] = 'mongodb://localhost:27017/restdb'

mongo = PyMongo(app)

@app.route('/dessert', methods=['POST'])
def add_dessert():
  dessert = mongo.db.desserts
  name = request.json['name']
  calories = request.json['calories']
  dessert_id = dessert.insert({
    'name': name, 
    'calories': calories
})
  new_dessert = dessert.find_one({'_id': dessert_id })
  output = {
    'name' : new_dessert['name'], 
    'calories' : new_dessert['calories']
}
  return jsonify({'result' : output})

@app.route('/dessert', methods=['GET'])
def get_all_desserts():
  dessert = mongo.db.desserts
  output = []
  for s in dessert.find():
    s['_id'] = str(s['_id'])
    output.append({'_id' : s['_id'], 
                   'name' : s['name'], 
                   'calories' : s['calories']
    })
  return jsonify({'data' : output})

@app.route('/dessert/<dessert_id>', methods=['GET'])
def get_one_dessert(dessert_id):
  dessert = mongo.db.desserts
  s = dessert.find_one({"_id" : ObjectId(dessert_id)})
  s['_id'] = str(s['_id']) 
  if s:
    output = {'_id' : s['_id'], 'name' : s['name'], 'calories' : s['calories']}
  else:
    output = "No such name"
  return jsonify({'result' : output})

@app.route('/dessert/<dessert_id>', methods=['DELETE'])
def delete_one_dessert(dessert_id):
  dessert = mongo.db.desserts
  s = dessert.find_one({"_id" : ObjectId(dessert_id)})
  s['_id'] = str(s['_id'])
  dessert.remove({"_id" : ObjectId(dessert_id)}) 
  if s:
    output = {'_id' : s['_id'], 'name' : s['name'], 'calories' : s['calories']}
  else:
    output = "No such name"
  return jsonify({'result' : output})

if __name__ == '__main__':
    app.run(debug=True)
1
Alfredo_MF 13 जिंदा 2020, 22:46

1 उत्तर

सबसे बढ़िया उत्तर

अगर मैं इसे सही ढंग से समझता हूं, तो आप बैकएंड पर पोस्ट करने के बाद, जेनरेट की गई आईडी सहित, नए जोड़े गए आइटम को फ्रंट-एंड में देखना चाहते हैं, है ना?

इसलिए, एक बार जब आप नया आइटम पोस्ट करना समाप्त कर लेंगे तो आप बस fetchItems() को कॉल कर सकते हैं। यह नई जोड़ी गई आईडी सहित दिखाए गए आइटम की सरणी को स्वचालित रूप से अपडेट करेगा।

आईडी गुण तब बनाया जाता है जब आइटम को डेटाबेस में जोड़ा जाता है, इसलिए इसे तब तक प्राप्त करना संभव नहीं है जब तक कि बैक-एंड इसे फ्रंट-एंड पर वापस नहीं देता।

axios.post('http://localhost:5000/dessert', {
    name: this.editedItem.name,
    calories: this.editedItem.calories
}).then(response => {
    this.fetchItems()
})

इसका मतलब है, एक बार POST खत्म करने के बाद, फिर से fetchItems()।

2
LuízaRusso 16 जिंदा 2020, 16:59