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)。
通过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'
];
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 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