前端模块化

基础介绍

FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS
RequireJS 主要是用于JS的模块化加载
Bower 主要用于管理第三方插件
Less 主要是用于我们编写LESS和编译成CSS代码
FastAdmin中前端的最常用的第三方插件有Layer、Toastr 
Layer用于弹窗、Toastr用于提示

目录结构

public
├── assets
│   ├── addons
│   ├── css
│   ├── fonts
│   ├── img
│   ├── js
│   │   ├── backend
│   │   ├── frontend
│   ├── less
│   └── libs

assets主要存在我们框架所需要使用到的静态资源

assets/js/backend主要存在后台控制器所对应的JS模块

assets/libs主要存在第三方的插件

assets/less主要存在Less文件

assets/img主要存在图片相关文件

assets/css主要存在CSS样式相关文件

assets/addons主要存放插件的相关静态资源

标准模块

每个后端控制器都对应一个JS模块，控制器名称和JS中模块名称是一一对应的

比如我们的控制器是 application/admin/controller/Article.php
则我们JS中对应的JS模块是 public/assets/js/backend/article.js

如果我们的控制器是  application/admin/controller/Member/Teacher.php
则我们JS中对应的JS模块是  public/assets/js/backend/member/teacher.js

每一个控制器请求的方法对应JS模块中一个方法
比如控制器Article.php中的index方法
对应的是JS的article模块中的Controller.index方法

如果我们添加了自己的方法detail方法
则对应Controller.detail方法

一个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;
});