## FunAdmin的前端部分使用或涉及到主要是`RequireJS`,`layui`,`Less`,`CSS`， - `RequireJS`主要是用于JS的模块化加载 - `Less`主要是用于我们编写LESS和编译成CSS代码 - r.js 一键打包压缩js css ## 目录结构 ~~~ public ├── static │   ├── addons │   ├── ├──addonsname │   ├── ├── ├── frontend │   ├── ├── ├── ├──js │   ├── ├── ├── ├──css │   ├── ├── ├── ├──images │   ├── frontend │   ├── ├──img │   ├── ├── js │   ├── ├── css │   ├── backend │   ├── ├──img │   ├── ├── js │   ├── ├── css │   └── plugins ~~~ `static/frontend/`主要存在前台控制器所对应的JS模块 `static/plugins`主要存在第三方的插件 `static/addons`主要存放插件的相关静态资源 ## js 模板 - 后台添加一个控制器，就要添加一个js 模板 - 比如我们的控制器是`app/backend/controller/Member.php`，则我们JS中对应的JS模块是`public/static/backend/js/member.js` 注意js名一定要小写 - 下面是一个标准的例子 ~~~ define(['jquery','table','form'], function ($,Table,Form) { let Controller = { index: function () { Table.init = { table_elem: 'list', tableId: 'list', requests: { modify_url: 'member/modify', // 请求地址 index_url: 'member/index', delete_url: 'member/delete', // add_url: 'member/add', // edit_url: 'member/edit', add_full:{ type: 'open', class: 'layui-btn-sm layui-btn-green', url: 'member.member/add', icon: 'layui-icon layui-icon-add', text: __('Add'), title: __('Add'), // full: 1, width:800, height:800 }, edit_full:{ type: 'open', class: 'layui-btn-xs layui-btn-green', url: 'member.member/edit', icon: 'layui-icon layui-icon-edit', text: __('Edit'), title: __('Edit'), // full: 1, width:'1200', height:'800', }, }, }; Table.render({ elem: '#' + Table.init.table_elem, id: Table.init.tableId, url: Fun.url(Table.init.requests.index_url), init: Table.init, toolbar: ['refresh','add_full','delete'], //toolbar 栏 cols: [[ {checkbox: true,}, {field: 'id', title: 'ID', width: 80, sort: true}, {field: 'username', title: __('membername'), width: 120,}, {field: 'email', title: __('Email'), width: 120,}, {field: 'mobile', title: __('mobile'), width: 120,edit: 'text'}, { field: 'sex', title: __('Sex'), filter: 'sex', width: 120, search: 'select', selectList: {0: __('Secret'), 1: __('Male'), 2: __('Female')}, templet: Table.templet.select, tips: __('Female')+'|'+ __('Male') }, { field: 'memberLevel.name', title: __('MemberLevel'), width: 120, templet: Table.templet.resolution }, {field: 'avatar', title: __('Avatar'), width: 120, templet: Table.templet.image}, { field: 'status', title: __('Status'), width: 120, search: 'select', selectList: {0: __('Disabled'), 1: __('Enabled')}, filter: 'status', templet: Table.templet.switch }, {field: 'create_time', title: __('Registertime'), width: 180,search:'range'}, {field: 'last_login', title: __('Lastlogintime'), width: 180,search:'timerange', templet: Table.templet.time}, { minwidth: 250, align: 'center', title: __('Operat'), init: Table.init, templet: Table.templet.operat, operat: ['edit_full', 'delete'] } ]], limits: [10, 15, 20, 25, 50, 100], limit: 15, page: true }); let table = $('#'+Table.init.table_elem); Table.api.bindEvent(table); }, add:function () { Controller.api.bindevent() }, edit:function () { Controller.api.bindevent() }, api: { bindevent: function () { Form.api.bindEvent($('form')) //监听表单事件 } } }; return Controller; }); ~~~ 该会员模块第一行为`RequireJS`标准语法，意思是此模块依赖`'jquery', 'table', 'form', `几个模块，同时将它们加载为`$,Table,Form`这几个对应的组件，这样就可以写自己的业务了。 ## Fun.js 为js总接口 里面有很多接口 例如 ~~~ Fun.toastr() Fun.ajax() Fun.url() Fun.checkAuth() Fun.ajax() ~~~ ## require-form.js 以下事件为第三方插件Layui 等实现的方法，可以在调用`Form.api.bindEvent`之前修改对应的方法来修改相应功能 ~~~ Form.events.submit(form, success, error, submit); //提交表单 Form.events.required(form) //验证 Form.events.verifys(form) //验证 Form.events.uploads() //上传 Form.events.chooseFiles() //选择文件 Form.events.cropper() //上传 Form.events.fu() //qita Form.events.bindevent(form); //监听表单 ~~~ ## 其他