yamecentadmin-基于laravel5.7的后臺管理系統(tǒng)

歡迎使用yamecent-admin后臺管理

LOGO

項目簡介

yamecent-admin是一款基于laravel框架進行封裝的后臺管理系統(tǒng),項目地址https://github.com/woann/yamecent-admin
其中包含：

rbac權(quán)限管理模塊
完整的UI組件
自定義配置管理
圖片上傳,網(wǎng)絡(luò)請求等常用的js公共函數(shù)
項目彈出層引用了layer,可直接使用layer
持續(xù)維護中...

安裝教程

執(zhí)行安裝命令 composer create-project woann/yamecent-admin 或者git clone https://github.com/woann/yamecent-admin.git
配置域名(按laravel項目正常配置即可,解析到public目錄)
如發(fā)現(xiàn)權(quán)限相關(guān)問題執(zhí)行 chown -R 用戶名:用戶組項目目錄
訪問域名,登錄即可進入管理系統(tǒng)
首次訪問域名時會跳轉(zhuǎn)至安裝頁面

安裝頁面.jpg
填寫完數(shù)據(jù)表配置之后埠忘，點擊安裝即可（有點小慢，喝口水）
安裝完之后就可以使用剛剛提交的管理員賬號密碼登錄了（如果您想重新安裝毒嫡，要將/app/install/install.lock 文件刪掉倘零，重新訪問網(wǎng)址即可）

請求(不想用這個請求方法可以自行用ajax)

var data = {id:1};//參數(shù)
myRequest("/admin/config/add","post",data,function(res){
    //請求成功回調(diào)
    layer.msg("提示信息");//彈出提示
    //15秒后刷新父頁面
    setTimeout(function(){
        parent.location.reload();
    },1500)
});

請求失敗回調(diào)默認封裝了取消loading層的操作唱遭，如果想自定義請求失敗的回調(diào)的話，自行修改public/assets/js/common.js文件中的myRequest方法

表單不為空驗證

input添加requireclass

 <div class="form-group" id="string">
    <label >* 測試</label>
    <input type="text" name="test" class="form-control require"  placeholder="">
</div>

check = checkForm();//驗證表單呈驶，如果帶有require的input為空拷泽，則邊框變?yōu)榧t色并彈出提示
if(!check){
    return false;
}

富文本

html

   <div class="form-group ">
       <label >富文本</label>
       <textarea  placeholder="請在此處編輯內(nèi)容"  id="editor" style="height:400px;max-height:400px;overflow: hidden"></textarea >   
   </div>

javascript

   var editor = new wangEditor('editor');
   editor.config.uploadImgUrl = "/admin/wangeditor/upload";
   // 隱藏掉插入網(wǎng)絡(luò)圖片功能。該配置袖瞻，只有在你正確配置了圖片上傳功能之后才可用司致。
   editor.config.hideLinkImg = false;
   //關(guān)閉導(dǎo)航欄浮動
   editor.config.menuFixed = false;
   editor.create();

示例

富文本編輯器

時間選擇器

yamecent-admin的時間選擇器是引入flatpickr插件，支持多語言聋迎，各種格式的時間選擇脂矫。查看文檔
html

   <div class="form-group">
      <label >*生效時間</label>
      <input type="text"  class="form-control required calendar" name="time" placeholder="請選擇時間">
   </div>

javascript

    $(".calendar").flatpickr({
           dateFormat:"Y-m-d H:i:S",
           enableTime:true,
           enableSeconds:true
           //更多配置百度搜索flatpickr即可找到
       });

示例

時間選擇器

列表批量操作

html

   <!--按鈕-->
   <button type="button" class="btn btn-sm btn-gradient-danger btn-icon-text" onclick="batch('/admin/user/del/')">
      <i class="mdi mdi-delete btn-icon-prepend"></i>批量刪除
   </button>

    <!--全選復(fù)選框-->
    <tr>
        <th width="3%">
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input batch-all">
                </label>
            </div>
         </th>
        ...
    </tr>

    <!--列表復(fù)選框-->
    <tr>
        <td>
            <div class="form-check">
               <label class="form-check-label">
                   <input type="checkbox" class="form-check-input td-check" value="{{ $v->id }}">
               </label>
            </div>
        </td>
        ...
    </tr>