Vue + jQuery 实现后台用户列表的加载,查询和修改

Posted 2021-04-08 Ado的日记本

需求

1. 页面加载时发AJAX请求, 加载到页面 (jQuery发请求, 用Vue渲染出页面)

2. 点击用户信息后面的"查询" "编辑"按钮 可以查询详细信息和编辑 (GET和POST请求用jQuery做)

做的时候遇到的几个问题:

一,点击事件如何绑定?

直接在html里面写onclick=" "是不符合规范的.

这里就用到了.on方法的派生事件
公司规范是要求在按钮上面加class="yy_btn" <button class="yy_btn"></button>
那么, 绑定事件就可以这样写 $(div).on('click', 'yy_btn', function(){执行函数})

二,点击按钮后, 怎么才能知道这条数据在数据库里面对应哪一条呢 ?

解决方案: 
在每次创建按钮的同时, 动态创建一个属性, 把这条数据对应的id存起来, 那么点击后, 只要拿到这个属性的值, 就可以知道这条数据在数据库里面对应的id了.
这里创建了一个person_id属性用来存数据库里对应的那个id.

HTML部分:

<tr v-for="person in people">
    <td>{{ person.name  }}</td>
    <td>{{ person.nickName  }}</td>
    <td>{{ person.sex  }}</td>
    <td>{{ person.address  }}</td>

    <td class="text-nowrap" >
        <button class="yy_btn1" v-bind:person_id="person.id"> </button>
    </td>
</tr>

JS部分:

$("#app1 tbody").on("click", ".yy_btn1", function(){
    var cur = $(this);
    var personId = cur.attr("person_id");
    //拿到id  console.log(personId); 
    $.ajax({
        type: 'GET',
        url: baseURL + '/user/get',
        dataType: 'json',
        data : {
            "userId" : personId,
        },
    }).done(function (res) {
        //拿到数据后展示出来
    }).fail(function () {
        alert('查询失败,请重试!');
    });
});

三, GET到数据后Vue如何展示?

首先先声明一个空数组, GET得到数据后, 用for循环将数据push到这个数组中, 构造出符合Vue语法的数组.

HTML部分:

<tr v-for="person in people">
    <td>{{ person.name  }}</td>
    <td>{{ person.nickName  }}</td>
    <td>{{ person.sex  }}</td>
    <td>{{ person.address  }}</td>

    <td class="text-nowrap" >
        <button class="yy_btn1" v-bind:person_id="person.id"> </button>
    </td>
</tr>

JS部分:

var baseURL = 'http://192.168.1.204:8090/manager';
var arr = [];

$(function () {
    init()
});

//初始化
function init(){
    $.ajax({
        url: baseURL + '/user/list',
        type: 'GET',
        dataType: 'json',
    }).done(function (res) {
        for(let i=0; i<res.data.length; i++){
            arr.push(res.data[i]);
            //构造出Vue需要的数据
        }
    }).fail(function () {
        alert('初始化失败!')
    })
}

//VUE展示数据
var vm = new Vue({
    el: '#app1',
    data: {
        people: arr
    },
});

完整代码是套在一个后台里面的, 太长, 就不贴出了.