Vue数据表中无法连接数据库

分享于2022年07月17日 html php sql vue.js vuetify.js 问答
【问题标题】:Vue数据表中无法连接数据库(Cannot connect to database in Vue data tables)
【发布时间】:2022-02-12 15:32:36
【问题描述】:

我在我的 php 脚本中使用 vuetify 数据,它以前工作正常,现在每个页面都显示该错误为 Your search for "{{ search }}" found no results

似乎这个问题是因为它无法从数据库中获取数据。这是我的数据库类。

class Database
{
    public $id;
    public $user;
    public $user_name;
    public $password;

    public static function db()
    {

      $host = 'localhost';
      $dbName = 'newdata';
      $userName = "root";
      $password = "";


        $db = "mysql:host=$host;dbname=$dbName";

        try {
            $pdo = new PDO($db, $userName, $password);
        } catch (PDOException $e) {
            throw new PDOException($e->getMessage());
        }
        return $pdo;
    }

}

这个用户名和密码可以正常工作,我也可以使用该密码连接到远程服务器中的 sql。

这是导致上述错误的一些代码。


                  

                    
Balance Report Your search for "{{ search }}" found no results.

谁能建议它卡在哪里? 很抱歉没有在这里附上整个 php 代码,因为它工作了很多天,但它突然没有工作。

这是我的 vue 课程。

var UsageReport = new Vue({
  el:'#UsageReport',
  data(){
    return{
      Report:[],
      search: '',
      headers: [
                    { text: 'value1', value: 'col1 ' },
        { text: 'value2', value: 'col2 ' },
        { text: 'value3', value: 'col3 ' },
        { text: 'value4', value: 'col4 ' },
        { text: 'value5', value: 'col5 ' },
      ],
      variabl1:'',
      variabl2:'',
      variabl3:'',
      variabl4:''

    }
  },


【解决方案1】:

您已将(v-alert)的值绑定为 true。

如果您的 XHR 调用没有返回任何内容,则应将其替换为设置为“true”的变量。

例如,如果“报告”是您在调用后端后设置的对象数组,那么您可以改用以下内容:

              
                Your search for "{{ search }}" found no results.
              

注意 v-alert 的值是如何与名为 Report 的变量的长度绑定的。这是您组件中的一个数组。如果我们用数据填充它(见下文),它应该不再向您显示消息。

var UsageReport = new Vue({
  el:'#UsageReport',
  data(){
    return{
      Report:['sample item1','sample item2'],
      search: '',
      headers: [
                    { text: 'value1', value: 'col1 ' },
        { text: 'value2', value: 'col2 ' },
        { text: 'value3', value: 'col3 ' },
        { text: 'value4', value: 'col4 ' },
        { text: 'value5', value: 'col5 ' },
      ],
      variabl1:'',
      variabl2:'',
      variabl3:'',
      variabl4:''

    }
  },

  • 我也添加了我的 vue 类。你能告诉我要包括什么吗?
  • 当然,您不会显示如何调用后端。例如对您的后端的 GET 调用,它可能会返回数据。
  • 我现在没有得到任何结果,只显示错误
  • 您在代码中的哪个位置提出请求?您使用的是 fetch() 还是 AJAX ?