如何修改EYOUCMS 后台页面的购买授权按钮

Posted 2023-04-17

如何修改EYOUCMS 后台页面的购买授权按钮

参考技术A /application/admin/template/index/index.htm 参考技术B 修改帝国默认的列表分页样式和伪静态页面留言版的分页样式。本来想在默认的模板标签上修改，看了看代码，<b>和<a>标签前后都多了 空格，如果在现在的基础上改，简单改改也行，不过实在是受不了那么多空格符，而且如果用display:block的话，会出现一个阶梯状的样式，所以修改分页的样式势在必行。
1）列表分页位置：e/class/t_functions.php 删掉空格字符
2）伪静态留言版分页位置：e/class/connect.php （同样删掉空格字符，这个文件找了很久，以为缓存没更新，结果伪静态放在另外一个页面）
留言版的分页默认是12页，实在是有点儿多，更改 e/data/template/gbooktemp.txt 参数，把12修改成8就行了
3）修改语言包文件e/data/language/gb/pub/fun.php 把上一页、下一页、首页、尾页替换成符号
修改前：
修改后：
CSS代码：
.page padding:20px 0 0 0; text-align:center; width:100%;overflow: hidden;
.page a b color: #999;
.page>b,.page a margin: 0 2px;height: 26px;line-height:
26px;border-radius: 50%;width: 26px;text-align: center;display:
block;float: left;
.page>b,.page a:hoverbackground: #333;color: #FFF;
.page a color: #F33;border: #999 1px solid;

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

需求

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
    },
});

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