时间戳

首页 > 解决方案 > 条件 SQL 查询 [VueJS]

php - 条件 SQL 查询 [VueJS]

问题描述

我正在学习 VueJS，但我无法围绕选择部分进行思考（在我的例子中，我使用了教程页面中的单选。

直到现在，我让“用户”填写唯一的搜索框，我的查询（位于 data.php 中）是这个：

    case 'list':
    $b      = new book;
    $req    = "SELECT id, isbn, ddc, title FROM book WHERE 1=1 ";
    if(strlen($search)>0) {
        $req .= "AND isbn LIKE '%$search%' OR ddc LIKE '%$search%' ";
    }

    $req.= "ORDER BY title LIMIT 0,50";

    $fields = array("id","isbn","ddc", "title");
    $res    = $c->StructList($req,$fields,"json");
    echo $res;
    break;

在 index.php 中呈现，这个视图：

直到现在只有一个搜索框的旧版本 - 工作

现在，我尝试在搜索框之前先一步。

带有选择选项的新版本 - 不工作

我想不让一个搜索框和任何（ISBN 或杜威十进制分类）可以填写看起来很愚蠢，但这是我为这次培训而进行的个人培训。

我的示例中的这两个分类都来自我数据库的 2 个不同的其他表（ISBN_code 和 DDC_code）。

在我的 index.php 文件中，我遵循了 Vue.js 教程中的选择选项。

<select v-model="selected">
    <option disabled value="">Choose</option>
    <option>Through the ISBN</option>
    <option>Through the Dewey Decimal Classification</option>
</select>

<span>Selected : {{ selected }}</span><br><br>

在我的 data.php 上，现在我写道：

        $b      = new book;
    $req    = "SELECT id, isbn, ddc, title FROM book WHERE 1=1 ";
    if(strlen($search)>0) {
        $req .= "AND {{selected}} LIKE '%$search%' ";
    }

    $req.= "ORDER BY title LIMIT 0,50";

    $fields = array("id","isbn","ddc", "title");
    $res    = $c->StructList($req,$fields,"json");
    echo $res;

=> 我写了一个 1=1 以避免让查询工作，即使搜索栏的条件（下面一行）不是全字段。

最后在 app.js 文件中，我写道：

var vm = new Vue({
el:"#app",
data:{
    list:[],
    search:"",
    selected:''
},
mounted:function(){
    this.GetList();
},
methods:{

    GetListe:_.debounce(function(search = ""){
        var scope = this;
        $.ajax({
            url:"data.php?case=list",
            type:"POST",
            data:{search},
            success:function(res){
                scope.list = JSON.parse(res);
            },
            error:function(){
            }
        });
    },500),

},

});

我不知道如何使用这种方法使查询工作，用户必须首先选择一个分类代码。

我应该修改我的查询还是 v-bind 一些东西？就像在https://vuejs.org/v2/guide/forms.html的例子中一样？

多谢你们

标签： phpsqlvue.jsvuejs2

解决方案

TL;DR：查看有关 Vue 中事件处理的链接：https ://vuejs.org/v2/guide/events.html

现在，您的 ajax 请求不会传递selected给您的 php 代码，只能搜索，因为data选项只有{search}. 我不确切知道 php 需要采用什么格式，但它可能类似于以下内容

{search: [searchValue], selected: [selectedValue]}

要真正触发 ajax 调用，您需要将 GetList 方法连接到 Vue 控制的元素。根据您共享的代码，您似乎只是在使用 Vue 来控制下拉菜单，因此您可以触发这样的请求：

<select v-model="selected" v-on:change="GetList()">

就目前而言，这将触发 GetList，但不会使用您的下拉列表。如果您修改 GetList 以获取下拉列表的值，它也会包含它：

GetList: _.debounce(function(search = ""){
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},500),

请注意，在该data行中，它指的是this.searchand this.selected。这就是您可以访问存储在data对象中的值的方式。通过v-model="selected"模板中的下拉菜单，它绑定到对象selected中的属性data，因此可以在方法中使用this.selected.

另请注意，该方法的名称是GetList. 您粘贴的代码是GetListe，但您尝试在mounted()生命周期挂钩上将其调用为GetList()，所以我假设方法声明GetListe是一个错字。

我会尝试将您的GetList方法连接到元素change上的事件select，也许添加一些控制台日志以更好地了解发生了什么，并更改下拉列表中的值几次，看看会发生什么。我也会摆脱去抖动，只是为了简化你试图理解它。

GetList: function(search = "") {
    console.log("GetList()");
    console.log("search: " + this.search);
    console.log("selected: " + this.selected);
    var scope = this;
    $.ajax({
        url:"data.php?case=list",
        type:"POST",
        data:{search: scope.search, selected: scope.selected},
        success:function(res){
            scope.list = JSON.parse(res);
        },
        error:function(){
        }
    });
},

这应该让你朝着正确的方向前进。

下一步是将您的搜索栏也带入 vue 模板，将您的search数据属性绑定为搜索栏上的 a ，并在值更改时v-model触发GetList事件。search像这样的东西：

<input v-model="search" v-on:change="GetList()">

同样，在 GetList 方法中有控制台日志，尝试一下它以了解它在做什么。

推荐阅读