祝福祖国永远繁荣昌盛!
糊涂粥 于 2024-10-01 00:30:25

/images/20241001/172255ad50c9f587eb90c7f1160c423c.jpg?w=1080&h=1080&fit=max

FastAdmin 自定义表格按钮
糊涂粥 于 2024-09-17 02:07:50

FastAdmin的自由度还是很高的,只是文档太生涩、语焉不详。

网上很多关于表格的自定义按钮都是要去改框架的JS,这样的操作总归不是最完美的办法,最好的办法是不修改框架的文件,全部在自己的文件里来定义。

本文提供一个思路,与大家共勉。

在实际的使用中,我需要建立一个关于附件的表格,需要添加一个“预览”按钮,并提供“编辑”和“删除”的操作。

其中“预览”按钮是自定义添加的,“编辑”按钮是对原框架编辑按钮的重写,“删除”按钮使用原生的功能。

先上代码:

var custom_button_attachment = {
    buttons: [{
        name: 'attachment-view', icon: 'fa fa-eye', title: '查看/下载', text: '查看/下载',
        extend: 'data-toggle="tooltip" data-container="body"', classname: 'btn btn-info btn-xs attachment-view'
    }, {
        name: 'attachment-edit', icon: 'fa fa-pencil',
        title: '编辑', extend: 'data-toggle="tooltip" data-container="body"', classname: 'btn btn-xs btn-success attachment-edit'
    }, {
        name: 'attachment-delete', icon: 'fa fa-trash',
        title: '删除', extend: 'data-toggle="tooltip" data-container="body" data-url="' + this.initOptions.extend.attachment_del_url + '"', classname: 'btn btn-xs btn-danger attachment-delete'
    },],
    api: {
        getBlog: function (url, data, callback) {
            var aurl = url;
            var httpRequest = new XMLHttpRequest();
            httpRequest.open('POST', aurl, true);
            httpRequest.setRequestHeader("Content-type", "application/json");
            httpRequest.responseType = "arraybuffer";
            var obj = data;
            httpRequest.onload = function () {
                callback(httpRequest);
            };
            httpRequest.send(JSON.stringify(obj));
        }
    },
    formatter: {
        operate: function (value, row, index) {
            return Table.api.buttonlink(this, this.buttons, value, row, index, 'operate');
        },
        size: function (value, row, index) {
            if (value < 1024) {
                return `${value}B`;
            } else if (value < 1024 * 1024) {
                return (value / 1024).toFixed(2).concat('KB');
            } else if (value < 1024 * 1024 * 1024) {
                return (value / 1024 / 1024).toFixed(2).concat('MB');
            } else {
                return (value / 1024 / 1024 / 1024).toFixed(2).concat('GB');
            }
        },
        filename: function (value, row, index) {
            return '<img src="' + Fast.api.fixurl("ajax/icon") + "?suffix=" + row.imagetype + '" alt="' + row.name + '" class="attachment-view">' + '<button class="btn btn-link attachment-view">' + value + '</button>';
        },
    },
    events: {
        operate: {
            'click .attachment-view': function (e, value, row, index) {
                var table = $(this).closest('table');
                var options = table.bootstrapTable('getOptions');
                var ids = row[options.id];
                row = $.extend({}, row ? row : {}, {});
                var url = options.extend.attachment_view_url;
                custom_button_attachment.api.getBlog(Table.api.replaceurl(Fast.api.fixurl(options.extend.attachment_data_url), row, table), {'url': row.url}, function (res) {
                    var blob = new Blob([res.response], {type: row.mime});
                    let bloburl = URL.createObjectURL(blob);
                    Fast.api.open(Table.api.replaceurl(url, row, table), $(this).data("original-title") || $(this).attr("title") || __('Edit'), {
                        area: area, shade: shade, success: function (e) {
                            $(window.frames[0].document, e).find('#view-container').attr('src', bloburl);
                            $(window.frames[0].document, e).find('#download-container').attr('href', bloburl);
                        }
                    });
                });
            },
            'click .attachment-edit': function (e, value, row, index) {
                e.stopPropagation();
                e.preventDefault();
                var table = $(this).closest('table');
                var options = table.bootstrapTable('getOptions');
                var ids = row[options.pk];
                row = $.extend({}, row ? row : {}, {ids: ids});
                var url = options.extend.attachment_edit_url;
                Fast.api.open(Table.api.replaceurl(url, row, table), $(this).data("original-title") || $(this).attr("title") || __('Edit'), $(this).data() || {});
            },
            'click .attachment-delete': Table.api.events.operate['click .btn-delone'],
        }
    },
};

说明一下:

定义一个自定义的按钮对象,包括buttons, api, formatter, events,其中

buttons定义三个按钮,就是表格中要显示的;

api里面写一些自己的方法,我这里是从服务器拉取文件内容;

formatter是对表格列的显示输出方法;

events是按钮的执行过程。

表格的初始化大概是这个样子的:

Table.api.init({
    search: true,
    advancedSearch: true,
    pagination: true,
    extend: {
        attachment_url: "attachment" + location.search,
        attachment_view_url: "attachment/action/view" + location.search,
        attachment_data_url: "attachment/action/data" + location.search,
        attachment_edit_url: "attachment/action/edit" + location.search,
        attachment_del_url: "attachment/action/del" + location.search,
        table: 'table-attachment',
    }
});

这里没有“edit_url”和“del_url”,而这两个url的定义恰恰是框架识别用于显示 编辑 和 删除 按钮的关键,没有这两个定义,按钮就不显示。但实际使用中,可能需要使用不同的名称来定义,本例就是如此。

表格的列定义大概是这样的:

var tableAttachment = $("#table-attachment");
tableAttachment.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.attachment_url,
    pk: 'hash', toolbar: "#toolbar-attachment", sortName: 'date', fixedColumns: true, fixedRightNumber: 1,
    search: false, showExport: false, commonSearch: false, showColumns: false,
    columns: [
        {
            align: 'left', field: 'name',
            title: '文件名',
            table: tableAttachment,
            events: custom_button_attachment.events.operate,
            formatter: custom_button_attachment.formatter.filename,
            buttons: custom_button_attachment.buttons,
            extend: 'data-toggle="tooltip" data-container="body"',
        },
        {
            field: 'size',
            title: '大小',
            table: tableAttachment,
            formatter: custom_button_attachment.formatter.size,
        },
        {
            field: 'date',
            title: '日期',
            table: tableAttachment,
            class: 'autocontent',
        },
        {
            field: 'operate',
            title: __('Operate'),
            table: tableAttachment,
            buttons: custom_button_attachment.buttons,
            events: custom_button_attachment.events.operate,
            formatter: custom_button_attachment.formatter.operate,
            extend: 'data-toggle="tooltip" data-container="body"',
        },
    ],
});

这样就是完整的自定义表格按钮的方法,上述代码都是在自己的js文件中,不需要去修改框架的js文件(require-table.js)。


FastAdmin 时间戳
糊涂粥 于 2024-09-04 18:19:42

通过CRUD生成的模型,如果数据库字段设置为DateTime格式,会报数据格式不一致的错误。

需要在 模型文件 中手动再设置一下:

    // 字段类型或者格式转换
    protected $type = [
        'createtime'=>'datetime:Y-m-d H:i:s',
        'updatetime'=>'datetime:Y-m-d H:i:s',
        'deletetime'=>'datetime:Y-m-d H:i:s'
    ];


在Ubuntu上安装vsftpd
糊涂粥 于 2024-06-12 18:14:00

vsftpd是“very secure TTP daemon”的缩写,是一款在Linux发行版中最受推崇的ftp服务器程序,小巧轻快,安全易用,支持虚拟用户,支持带宽限制等功能,是一个完全免费的、开放源代码的ftp服务器软件。

一、在安装之前,请先对 Ubuntu 系统进行更新

sudo apt update && sudo apt upgrade

二、使用Ubuntu 官方源进行安装

sudo apt install vsftpd -y

安装完成后启动vsftpd

sudo systemctl start vsftpd

将vsftpd设置为开机自启动

sudo systemctl enable vsftpd

查看vsftpd的状态

sudo service --status-all

打印出来的列表中有vsftpd,并且前面是[+]说明安装成功并已启动服务

三、配置vsftpd

创建一个ftp根目录

sudo mkdir /ftphome

创建一个新用户并设置密码

sudo useradd -d /ftphome ftpuser
sudo passwd ftpuser

修改ftp根目录的所有者

sudo chown ftpuser:ftpuser /ftphome -R

创建一个用户列表文件

sudo vi /etc/vsftpd.chroot_list

按 i 进入编辑模式,按一个用户名占据一行的方式把刚才创建的用户名填入,按 Esc 并输入 :wq 保存退出

编辑VSFTPD的配置文件

sudo vi /etc/vsftpd.conf
listen=YES
#listen_ipv6=YES
write_enable=YES
chroot_local_user=YES
chroot_list_enable=YES
chroot_list_file=/etc/vsftpd.chroot_list

主要设置内容按上面的设置,然后:wq保存并退出,重启vsftpd服务

sudo systemctl restart vsftpd

四、测试

ftp localhost
Connected to localhost.
220 Welcome to blah FTP service.
Name (localhost:lighthouse): ftpa
331 Please specify the password.
Password:
230 Login successful.
Remote system type is UNIX.
Using binary mode to transfer files.
ftp> bye
221 Goodbye.

看到Login successful.就说明登录成功了,bye退出ftp命令。

至此vsftpd就安装成功了,想要添加用户可以按上面相应的步骤添加。

在Ubuntu上安装MySQL 8
糊涂粥 于 2024-06-12 16:36:51

服务器使用的是 腾讯云 的 轻量服务器,Ubuntu Server 20.04 LTS 64bit,2核4GB,60GBSSD,5Mbps。

一、在安装之前,请先对 Ubuntu 系统进行更新

sudo apt update && sudo apt upgrade

二、使用Ubuntu 官方源进行安装

sudo apt install mysql-server -y

三、安装成功后进入mysql控制台,使用系统root权限进入控制台不需要密码

lighthouse@VM-24-15-ubuntu:~$ sudo mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.37-0ubuntu0.20.04.3 (Ubuntu)

Copyright (c) 2000, 2024, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 

四、添加一个新的管理员用户

1、创建用户

mysql> create user 'manager'@'localhost' identified with mysql_native_password by '12345678';

2、赋予权限

mysql> grant all on *.* to 'manager'@'localhost' with grant option;

3、刷新权限

mysql> flush privileges;

4、退出mysql

mysql> quit
Bye

至此安装完成,可以使用phpMyAdmin等mysql管理软件使用新创建的用户登录进行管理操作了。

enjoy