## 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); //監聽表單 ~~~ ## 其他