我想使用 Vue.js 进行实时加载

Posted 2023-02-22

【中文标题】我想使用 Vue.js 进行实时加载

【英文标题】：I want make real time load using Vue.js

【发布时间】：2020-08-15 05:10:49

【问题描述】：

我想在不需要重新加载页面的情况下检索我添加的新报价。现在我必须刷新页面，然后我才能看到数据。我正在使用restdb.io作为数据库，所以在发出post请求后，如何在不重新加载页面的情况下检索所有数据，请您给点建议，也许尝试其他方法

发射方法

methods: 
     addQuote(e) 
        e.preventDefault();
        if (this.text.length === 0) 
            alert("Поле пустое. Пожалуйста введите цитату");
            return;
        
        const newQuote = this.text;
        this.$emit("add-quote", newQuote);
        this.text = "";
    

POST 请求

addQuote(quote) 
    if (this.quotes.length === 10) 
        alert("Для добавления новых цитат удалите одну из добавленных");
        return;
    
    axios
        .post(
            "https://beeline-3fee.restdb.io/rest/db?apikey=<api_key>",
             text: quote 
        )
        .then(response => response.data)
        .then(quote => 
            console.log("Success:", quote);
        )
        .catch(error => 
            console.error("Error:", error);
        );
    

GET 请求

mounted() 
    axios
    .get(
        "https://beeline-3fee.restdb.io/rest/db?apikey=<api_key>"
    )
    .then(response => (this.quotes = response.data))
    .catch(err => console.log(err));

【问题讨论】：

尽量避免在公开发布时显示您的 apiKey。你可以使用apikey=<api_key>，人们会明白这是一个真正的apiKey的占位符

你的意思是，像这个例子：codepen.io/balexandre/pen/XWmeJvm?editors=1010

@balexandre 是的，非常感谢你，它的工作原理，但我知道如何制作即时，因为它可能需要 1-2 秒

@SimoD'loMafuxwana 请注意谢谢，我只是初学者，很好的建议！

你想要即时，是的，这很容易......而不是一次又一次地获取报价，只需添加它......就像this.quotes.unshift(text: this.quote)......我现在已经在示例，以便您查看。

【参考方案1】：

您必须添加一个getQuotes 方法并使用它来加载mounted 中的引号并获取所有引号添加新引号后

  mounted() 
    this.getQuotes();
  ,
  methods: 
    getQuotes() 
      axios.get("https://beeline-3fee.restdb.io/rest/db?apikey=5eaaf516161b39295cdee783")
        .then((response) => (this.quotes = response.data))
        .catch((err) => console.log(err));
    ,
    addQuote(quote) 
      if (this.quotes.length === 10) 
        alert("Для добавления новых цитат удалите одну из добавленных");
        return;
      
      axios
        .post("https://beeline-3fee.restdb.io/rest/db?apikey=5eaaf516161b39295cdee783",
          
            text: quote,
          
        )
        .then((quote) => 
          console.log("Success:", quote);

          // this will fetch the quotes again
          this.getQuotes();
        )
        .catch((error) => 
          console.error("Error:", error);
        );
    
  

【讨论】：

感谢您的帮助，它正在工作，我会将您标记为解决方案，请提供一些建议，我怎样才能使这个过程即时，重新加载数据需要 2-3 秒

您可以在 if 语句之后和 axios 行之前添加 this.quotes.push(quote)，但是您可能必须添加更多逻辑来删除新引号 if i> add api 调用失败。