FastAdmin使用——前端篇

我们在使用命令行创建一个crud后（关于如何创建可以看我之前写的博客FastAdmin使用——基本使用篇）会得到一个页面，我们来分析一下这个页面和代码。

首先我们直接操作数据库在对应数据表中添加几个数据看一下页面如何显示。

这里添加了三个数据，我们刷新一下页面看一下效果。

我们可以看到三条数据都已显示，那么我们来分析一下它是如何形成的

找到application\admin\view\student\student\index.html文件，看一下代码

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <!--  这个对应页面刷新的按钮  -->
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('student/student/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <!--  这个对应页面添加的按钮  -->
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('student/student/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <!--  这个对应页面编辑的按钮  -->
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('student/student/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <!--  这个对应页面删除的按钮  -->
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('student/student/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>
                        <!--  这个对应页面导入的按钮  -->
                        <div class="dropdown btn-group {:$auth->check('student/student/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <!--  这个对应页面更多的按钮  -->
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                                <!--  这两个个对应页面更多下面的设为正常或隐藏的子按钮  -->
                            </ul>
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap">
                    <!--  这个对应页面的表格，数据就是这里显示的  -->
                           data-operate-edit="{:$auth->check('student/student/edit')}" <!--  这个对应操作列表的编辑按钮，直接编辑对应这条数据  -->
                           data-operate-del="{:$auth->check('student/student/del')}" <!--  这个对应操作列表的删除按钮，直接删除对应这条数据  -->
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

我添加了注释可以直观的找到页面中对应的按钮，在表格个头的那一排按钮中，直接使用的是框架中的基类函数来添加或删除数据，如果需要自定义可以在对应的controller中重写，我会在后面的博客中写出

另外说一下，我们在生成crud以后会发现前端下面还有edit和add页面，我们点击页面中的添加或者编辑按钮就可以弹出窗口来进行添加和编辑，可以根据业务需要修改页面

下面的table标签就是我们对应的数据了，这里有一个id="table"的属性，这里是对应到它的js页面来对表格个封装数据的，我们找到public\assest\js\backend\student\sutdent.js来看一下代码

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'student/student/index',
                    add_url: 'student/student/add',
                    edit_url: 'student/student/edit',
                    del_url: 'student/student/del',
                    multi_url: 'student/student/multi',
                    table: 'student',
                }//方法url对应到controller的函数，可以根据自己需要去controller里重写，这里默认是使用的基类函数
            });

            var table = $("#table");
            //这个就对应了前端的id="table"
            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'student_id',//这个是主键
                sortName: 'student_id',//这个是根据排序的字段
                columns: [
                    [
                        {checkbox: true}, //这个对应每条数据前面的勾选框
                        {field: 'student_id', title: __('Student_id')}, //这里就是具体的数据，field是字段名，title是标题
                        {field: 'student_name', title: __('Student_name')},
                        {field: 'student_sex', title: __('Student_sex'), visible:false, searchList: {"1":__('Student_sex 1'),"2":__('Student_sex 2')}},
                        {field: 'student_sex_text', title: __('Student_sex'), operate:false},
                        {field: 'student_phone', title: __('Student_phone')},
                        {field: 'student_adress', title: __('Student_adress')},
                        {field: 'create_time', title: __('Create_time'), operate:'RANGE', addclass:'datetimerange'},
                        {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;
});

我添加了相关的注释，说明以下几个重点地方，首先是初始化表格那里，我们可以在初始化表格时修改许多属性，我们在require-table.js里面可以看到相关的属性

我们也可以在官方文档中找到说明

在字段的后面我会发现有operate:false的属性，这个是不让它显示在搜索的字段中，我们点击最右边的普通搜索按钮

可以根据字段来搜索，如果加了这个属性就不会显示对应的字段来让你搜索，下面说明一下性别这个比较特殊的字段，因为我们方便操作在数据库的这中枚举字段类型通常会用数字来代替原本的文字，所以我们需要一些特殊的方法来让他显示成文字，细心的可能会发现性别字段显示的是Student_sex1而不是1，我们找到application\admin\model\student.php，看一下数据层代码

// 追加属性
    protected $append = [
        'student_sex_text'
    ];
    

    
    public function getStudentSexList()
    {
        return ['1' => __('Student_sex 1'),'2' => __('Student_sex 2')];
    }     


    public function getStudentSexTextAttr($value, $data)
    {        
        $value = $value ? $value : $data['student_sex'];
        $list = $this->getStudentSexList();
        return isset($list[$value]) ? $list[$value] : '';
    }

 

看到这里追加了一个student_sex_text的字段，下面两个方法把student的1和2代替成Student_sex 1和Student_sex 2了并且赋值给追加的studet_sex_text字段，至于为什么要加上__()我等会会进行说明。

 

我们回到js代码中

我们发现这里有两条sex的字段，下面那条是我们追加的属性，就是我们显示用的字段

上面那条有一个visible:false的属性，这个属性让这个字段隐藏,也就是说这条字段是搜索用的，后面的searchlist是下拉框搜索，1是搜索时返回的数据，:后面的是定义它显示什么样的文本，这个需要理解一下，我们在做项目时经常会用到这个方法，而关于字段的更多属性可以去官方文档或者百度搜索。

下面说一下页面的中文问题，我们看到html还有js中的所有title都是:__('')这样的形式，而到了页面中却显示成了中文，这是因为框架中使用了中文包的结构，找到application\admin\lang\zh-cn\student\student.php文件，这个文件把对应的英文替换成中文

我们看到已经替换了我们的字段标题，这个是在生成crud时根据我们数据库中写的字段注释自动生成的

而没有定义的那些是使用基类lang\zh-cn.php中文包来替换的，这里替换完我们在前端使用:__('')这样的形式就可以显示替换的中文，而我们前面数据层在追加字段时写成:__('Student_sex 1')的形式就是方便我们进行替换，同时也说明这个也可以用在php文件中，下面我们替换一下看看。

可以看到性别已经替换成对应的中文了。

前端中使用的比较多的地方大概就是这些，更多的可以去官方文档中查看。