您现在的位置是：技术博客 > PHPPHP

fastadmin开发记录

Lucas2022-08-16 21:19【代码】45人已围观

简介Fastadmin开发记录

1、在后台中我们的控制器都必须继承自`\app\common\controller\Backend`这个基类，其中控制器的`index/add/edit/del/multi/recyclebin/destroy/restore/import/selectpage`全都是可选的方法，基类的这些方法使用traits进行引入，具体位置在`application/admin/library/traits/Backend.php`。

2、我们可以在视图中使用`{$site.name}、{$config.modulename}、{$auth.id}、{$admin.username}`来获取我们所需要的数据。`$site`所支持的数据对应为`application/extra/site.php`，`$upload`所支持的数据对应为`application/extra/upload.php`，其他类似，具体查看`application/extra`目录下的文件。`$auth`是一个对象，所对应的类是`application/admin/library/Auth.php`，`$admin`是一个当前管理员登录的session数据，存储有管理员的用户名、昵称、ID、头像等信息。

3、如果我们需要自己在控制器中透传数据到JS中去，则可以使用控制器的`assignconfig`方法来透传，使用如下`$this->assignconfig('demo', ['name'=>'名称']);`然后我们就可以在JS中使用`Config.demo.name`。

4、如果我们有特殊的页面不需要采用模板布局，我们可以使用`$this->view->engine->layout(false); `来关闭当前方法的模板布局。

5、基类控制器有启用全局过滤，过滤方法为`trim,strip_tags,htmlspecialchars`，当使用ThinkPHP5的方法获取请求的参数值时，会被过滤HTML和特殊字符，如有特殊情况下需要不过滤(如获取小程序请求的encryptedData)，可以使用`$this->request->post("参数名", "默认值", null);`将第三个参数设置为null即可获取原生请求的数据，当使用原生请求的数据时务必注意服务端的安全处理和安全输出。

6、Controller 对象，它有index/add/edit/api四个方法，这四个方法分别与我们控制器中的方法一一对应
```
Form.api.bindevent($("form[role=form]"), function(data, ret){
    //如果我们需要在提交表单成功后做跳转，可以在此使用location.href="链接";进行跳转
    Toastr.success("成功");
}, function(data, ret){
      Toastr.success("失败");
}, function(success, error){
    //bindevent的第三个参数为提交前的回调
    //如果我们需要在表单提交前做一些数据处理，则可以在此方法处理
    //注意如果我们需要阻止表单，可以在此使用return false;即可
    //如果我们处理完成需要再次提交表单则可以使用submit提交,如下
    //Form.api.submit(this, success, error);
    return false;
});
```

7、标准js案例如下
```
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'category/index',
                    add_url: 'category/add',
                    edit_url: 'category/edit',
                    del_url: 'category/del',
                    multi_url: 'category/multi',
                    dragsort_url: '',
                    table: 'category',
                }
            });

var table = $("#table");

// 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                escape: false,
                pk: 'id',
                sortName: 'weigh',
                pagination: false,
                commonSearch: false,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'type', title: __('Type')},
                        {field: 'name', title: __('Name'), align: 'left'},
                        {field: 'nickname', title: __('Nickname')},
                        {field: 'flag', title: __('Flag'), operate: false, formatter: Table.api.formatter.flag},
                        {field: 'image', title: __('Image'), operate: false, formatter: Table.api.formatter.image},
                        {field: 'weigh', title: __('Weigh')},
                        {field: 'status', title: __('Status'), operate: false, formatter: Table.api.formatter.status},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

// 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
```

### 8、页面中的 <code>btn-append</code> 按钮点击追加行功能，对应的assets/js/require-form.js文件
```
<table class="fieldlist table" data-template="notes_intpl" data-name="row[options]" data-tag="tr">
    <tr>
        <td>{:__('答案内容')}</td>
        <td>{:__('诊断建议')}</td>
        <td>{:__('分数')}</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="3">
            <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a>
        </td>
    </tr>

</table>
<script id="notes_intpl" type="text/html">
    <tr class="form-inline">
        
        <td>
            <input type="text" name="<%=name%>[<%=index%>][options]" class="form-control" value="<%=row.options%>" size="10" placeholder="答案内容"/>
            
        </td>
        <td>
            <input type="text" name="<%=name%>[<%=index%>][advice]" class="form-control" value="<%=row.advice%>" size="10" placeholder="诊断建议"/>
            
        </td>
        <td>
            <input type="text" name="<%=name%>[<%=index%>][rate]" data-rule="integer;range(0~)" class="form-control" value="<%=row.rate%>" size="2" placeholder="分数"/>
        </td>
        <td>
            <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
            <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
        </td>
    </tr>
</script>
```
#### 9、后台页面如何引入外部js文件

a、例如这里有一个demo.js，把这个js文件放在 public/assets/js/目录下，demo.js代码例如如下：
```
console.log('引入/public/assets/js/demo.js文件，成功！');
```

b、在后台某个html页面，例如 application/admin/view/auth/admin/index.html页面底部加入如下代码：
提示：如果要在多个页面都引入这个js，例如可以在 public/assets/js/backend/auth/admin.js中加入下面代码即可。
```
<script>
function zhuruJs(url){
	let temp = document.createElement('script');
	temp.setAttribute('type','text/javascript');
	temp.src = url;
	document.head.appendChild(temp);
}
zhuruJs(location.origin + '/assets/js/demo.js');
</script>
```

c、打开后台 权限管理 > 管理员管理 页面，查看console是否打印出js引入成功的提示；

#### 10、页面上写一个标准的弹出层
```
<a href="javascript:;" data-url="{:url('usercenter/food/market')}" data-area='["90%","90%"]' class="btn btn-info btn-dialog {:$auth->check('food/market')?'':'hide'}" title="{:__('菜谱市场')}" ><i class="fa fa-shopping-cart"></i> {:__('菜谱市场')}</a>
```
#### 10、页面上写一个多选table元素，批量操作，弹出层
```
<a href="javascript:;" class="btn btn-success btn-buy btn-disabled disabled {:$auth->check('usercenter/food/buy')?'':'hide'}" title="{:__('批量购买')}" ><i class="fa fa-shopping-bag"></i> {:__('批量购买')}</a>

$(document).on("click", ".btn-buy", function () {
    var ids = Table.api.selectedids(table);//获取选中列的id
    if(ids.length==0){
        layer.alert("最少选择一条记录操作");
        return false;
    }
    Fast.api.open("usercenter/food/buy?ids="+ids.join(','), '订单详情',{area:['600px', '400px']});
});
```

#### 11、js表格添加一个自增序号列
```
var table = $("#table");
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'id',
    columns: [
        [
            {
                field: '',
                title: __('序号'),
                sortable: true,
                operate:false,
                align: "center",
                width: 40,
                formatter: function (value, row, index) {
                    //获取每页显示的数量
                    var pageSize=table.bootstrapTable('getOptions').pageSize;
                    //获取当前是第几页
                    var pageNumber=table.bootstrapTable('getOptions').pageNumber;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            }
        ]
    ]
});
```

很赞哦！ ( 0 )

上一篇：fastadmin集成socket

下一篇：fastadmin表单之单选切换