EasyWeb 前端開(kāi)發(fā)文檔

1.簡(jiǎn)介

基于jquery裙椭、layui的管理系統(tǒng)模板躏哩，單頁(yè)面、響應(yīng)式揉燃、支持mvvm扫尺、極易上手！

• 演示地址：https://whvse.gitee.io/easywebpage/
• 演示賬號(hào)：隨便輸 ?? 密碼：隨便輸

?EasyWeb包含前后臺(tái)炊汤，
前臺(tái)地址正驻，
分離版后臺(tái)地址弊攘，
不分離版后臺(tái)地址，
后臺(tái)基于springboot拨拓、mybatis肴颊、mybatis-plus氓栈、Security渣磷、OAuth2等，不分離版權(quán)限使用shiro授瘦。

?此文檔包含分離和不分離版本的前端開(kāi)發(fā)指南醋界，兩者的使用是有些區(qū)別的，
不同的地方在文檔中都著重指明了提完，參考文檔使用即可形纺。

1.1.使用框架

1.2.項(xiàng)目結(jié)構(gòu)

|-assets
|     |-css                     // 樣式
|     |-images                  // 圖片
|     |-libs                    // 第三方庫(kù)
|
|-pages            // html組件
|     |-system                  // 系統(tǒng)管理頁(yè)面
|     |-xxxxxx                  // 其他業(yè)務(wù)頁(yè)面
|     |-tpl                     // 公用組件
|     |     |-message.html                 // 消息
|     |-console.html            // 主頁(yè)一
|     |-header.html             // 頭部
|     |-side.html               // 側(cè)導(dǎo)航
|
|-module                // js模塊 (使用layui的模塊開(kāi)發(fā)方式)
|     |-admin.js                // admin模塊
|     |-config.js                // config模塊
|     |-index.js                // index模塊
|
|-index.html            // 主界面
|-login.html            // 登陸界面

不分離版沒(méi)有pages目錄徒欣，不分離版的頁(yè)面由后臺(tái)輸出逐样，前端只有assets和module

2.快速開(kāi)始

??快速開(kāi)始之前請(qǐng)確保你已經(jīng)接觸過(guò)layui并了解layui的使用，
尤其是layui模塊的使用打肝。否則看本文檔會(huì)比較吃力脂新。

2.1.導(dǎo)入項(xiàng)目

1. 直接下載項(xiàng)目，或使用git下載粗梭；

2. 使用IDEA（WebStorm）或者HBuilder等前端開(kāi)發(fā)工具進(jìn)行開(kāi)發(fā)争便；

3. 運(yùn)行l(wèi)ogin.html或者index.html啟動(dòng)：

   [圖片上傳失敗...(image-8cb507-1639444934181)]

2.2.添加一個(gè)業(yè)務(wù)界面

注意：以下操作針對(duì)于分離版本，不分離版本菜單維護(hù)在數(shù)據(jù)庫(kù)断医，頁(yè)面由后臺(tái)渲染滞乙，不需要前端有復(fù)雜的操作。

比如你要做一個(gè)CMS系統(tǒng)鉴嗤，添加一個(gè)文章管理界面：

• 第一步：
  
  在pages文件夾下面建一個(gè)目錄cms斩启，然后新建一個(gè)頁(yè)面article.html

  [圖片上傳失敗...(image-f424e7-1639444934181)]

  article.html完整代碼：

   <div class="layui-card">
       <div class="layui-card-header">
           <h2 class="header-title">文章管理</h2>
           <span class="layui-breadcrumb pull-right">
             <a href="#!console">首頁(yè)</a>
             <a><cite>文章管理</cite></a>
           </span>
       </div>
       <div class="layui-card-body">
           <div class="layui-form toolbar">
               搜索：<input id="art-edit-search" class="layui-input search-input" type="text" placeholder="輸入關(guān)鍵字"/>&emsp;
               <button id="art-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
           </div>
   
           <!-- 數(shù)據(jù)表格 -->
           <table class="layui-table" id="art-table" lay-filter="art-table"></table>
       </div>
   </div>
   
   <!-- 表格操作列 -->
   <script type="text/html" id="art-table-bar">
       <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
   </script>
   
   <script>
       layui.use(['table', 'util', 'config'], function () {
           var table = layui.table;
           var config = layui.config;
           var util = layui.util;
   
           //渲染表格
           table.render({
               elem: '#art-table',
               url: config.base_server + 'article.json',
               where: {
                   access_token: config.getToken().access_token
               },
               page: false,
               cols: [[
                   {type: 'numbers'},
                   {field: 'id', sort: true, title: '文章ID'},
                   {field: 'label', sort: true, title: '文章標(biāo)簽'},
                   {field: 'title', sort: true, title: '文章標(biāo)題'},
                   {field: 'author', sort: true, title: '作者'},
                   {
                       field: 'uploadtime', sort: true, templet: function (d) {
                           return util.toDateString(d.createTime);
                       }, title: '發(fā)布時(shí)間'
                   },
                   {align: 'center', toolbar: '#art-table-bar', title: '操作'}
               ]]
           });
       });
   
   </script>
  

• 第二步：
  
  在module/config.js里面找到menus變量，添加如下所示：

  [圖片上傳失敗...(image-89d3c3-1639444934181)]

• 第三步：
  
  運(yùn)行項(xiàng)目醉锅，查看效果

  [圖片上傳失敗...(image-36214a-1639444934181)]

2.3.添加第三方layui擴(kuò)展模塊

分離版本和不分離版本添加layui擴(kuò)展模塊都按如下方式來(lái)浇垦。

請(qǐng)參考項(xiàng)目里面formSelects的添加方法。

• 第一步： 把下載的模塊放在module文件夾下面

• 第二步： 打開(kāi)index.html
  

   layui.config({
       base: 'module/'
   }).extend({
       formSelects: 'formSelects/formSelects-v4'
   }).use(['config', 'admin', 'formSelects'], function () {
       var config = layui.config;
       var admin = layui.admin;
       var formSelects = layui.formSelects;
  
   });
  

??如果你的模塊沒(méi)有文件夾直接在module里面就不需要寫(xiě)extend了荣挨，如果你的模塊有獨(dú)立的文件夾男韧，像formSelects一樣，
就需要在extend里面明確指出模塊的位置默垄。

[圖片上傳失敗...(image-c70190-1639444934181)]

3.開(kāi)發(fā)指南

3.1.開(kāi)發(fā)規(guī)范

閱讀開(kāi)發(fā)規(guī)范之前請(qǐng)先了解前面“項(xiàng)目結(jié)構(gòu)”的介紹此虑。

1. css、圖片口锭、第三方lib（layui擴(kuò)展模塊除外）全部放在“/assets/”下面朦前；
2. layui擴(kuò)展模塊放在“module”下面介杆，例如項(xiàng)目里面“formSelects”模塊；
3. 頁(yè)面html放在“pages”下面韭寸。

注意：不分離版本html不需要放在“pages”下面春哨，隨便放，因?yàn)槭呛蠖虽秩径魉牛岸酥恍枰L問(wèn)后端的url赴背。
比如我這里不分離版本是放在templates目錄下面，templates是SpringBoot默認(rèn)的視圖目錄晶渠。

3.2.入口index.html

index.html是項(xiàng)目的主入口凰荚，打開(kāi)index.html你會(huì)看到如下代碼:

layui.config({
    base: 'module/'
}).extend({
    formSelects: 'formSelects/formSelects-v4'
}).use(['config', 'admin','index'], function () {
    var config = layui.config;
    var admin = layui.admin;
    var index = layui.admin;
    
});

??這段代碼首先告訴了lauyui擴(kuò)展模塊都位于“module/”下面，然后擴(kuò)展模塊因?yàn)閒ormSelects使用了文件夾
存放褒脯，所以需要在“extend”中明確指出formSelects模塊js的位置便瑟。 ?為什么admin.js、config.js不需要寫(xiě)extend番川，
因?yàn)閍dmin和config是直接放在module里面到涂。

??接著index.html里面使用了“config”、“admin”等模塊颁督，所以admin模塊里面的一些方法也就即刻執(zhí)行了践啄。
admin提供的默認(rèn)事件也就生效了。

注意：不分離版本去除了config.js适篙，所以index.html不需要加載config往核。

3.3.“config”模塊介紹

注意：不分離版本去除了config.js，不分離的項(xiàng)目也不需要前端做任何配置和緩存嚷节。

“config”模塊主要是配置項(xiàng)目的一些基本參數(shù)聂儒。

注意：因?yàn)槲疫@邊的后臺(tái)返回的token是這樣的

{
    "access_token": "950a7cc9-5a8a-42c9-a693-40e817b1a4b0",
    "token_type": "bearer",
    "refresh_token": "773a0fcd-6023-45f8-8848-e141296cb3cb",
    "expires_in": 27036,
    "scope": "select"
}

??所以我這邊的token不是一個(gè)字符串存儲(chǔ)的硫痰，是用json存儲(chǔ)的衩婚，getToken返回的是一個(gè)json對(duì)象，
如果你的token只是一個(gè)字符串效斑，請(qǐng)修改getToken方法和admin里面的req方法非春，當(dāng)然我建議最好
命令你的后臺(tái)人員按這個(gè)json格式返回?cái)?shù)據(jù)，這個(gè)是一個(gè)標(biāo)準(zhǔn)的格式缓屠。

3.3.1.“config”使用示例

layui.use(['config'], function () {
    var config = layui.config;

    var token = config.getToken();  // 獲取token
    var access_token = token.access_token;  //獲取access_token
    
    config.putToken(xxx);
});

3.3.2.“menus”數(shù)組介紹

config.js里面的menus格式如下：

menus: [{
    name: '主頁(yè)',
    url: 'javascript:;',
    icon: 'layui-icon-home',
    subMenus: [{
        name: '主頁(yè)一',
        url: '#!console',
        path: 'console.html'
    }]
}, {
    name: '系統(tǒng)管理',
    icon: 'layui-icon-set',
    url: 'javascript:;',
    subMenus: [{
        name: '用戶管理',
        url: '#!user',  // 這里url不能帶斜杠
        path: 'system/user.html',
        auth: 'post:/user/query'
    }, {
        name: '角色管理',
        url: '#!role',
        path: 'system/role.html',
        auth: 'get:/role'
    }]
}, {
    name: '多級(jí)菜單',
    url: 'javascript:;',
    icon: 'layui-icon-unlink',
    subMenus: [{
        name: '二級(jí)菜單',
        url: 'javascript:;',
        subMenus: [{
            name: '三級(jí)菜單',
            url: 'javascript:;'
        }]
    }]
}, {
    name: '一級(jí)菜單',
    url: 'javascript:;',
    icon: 'layui-icon-unlink'
},{
    name: '我是隱藏菜單',
    url: '#!userDetail',
    path: 'system/user_detail.html',
    hidden: true
}]

??index.js里面會(huì)自動(dòng)使用menus數(shù)組渲染左側(cè)導(dǎo)航欄奇昙，并且會(huì)使用url作為關(guān)鍵字自動(dòng)注冊(cè)路由監(jiān)聽(tīng)。
目前只設(shè)定了最多支持三菜單敌完，原因是因?yàn)槟０逡驿秩緹o(wú)法使用遞歸储耐，所以寫(xiě)了三層循環(huán)，如果你需要更多級(jí)的菜單滨溉，
繼續(xù)加循環(huán)就可以了什湘，主要是因?yàn)闊o(wú)法遞歸长赞，并不是無(wú)法做到無(wú)限級(jí)。

• path 表示html所在的路徑闽撤，會(huì)在pages目錄下面尋找得哆。
• url 是路由的關(guān)鍵字，也就是說(shuō)點(diǎn)擊這個(gè)菜單哟旗，瀏覽器地址欄的url會(huì)變成/#!xxx贩据。
• auth 表示這個(gè)菜單需要什么權(quán)限，index.js渲染的時(shí)候會(huì)自動(dòng)判斷權(quán)限热幔，沒(méi)有權(quán)限不會(huì)渲染出來(lái)乐设，不寫(xiě)auth不會(huì)進(jìn)行判斷讼庇。
• hidden 表示菜單是否渲染到左側(cè)導(dǎo)航欄绎巨，比如用戶詳情界面，不需要渲染到左側(cè)導(dǎo)航蠕啄，name最好也填寫(xiě)场勤，因?yàn)樵诙鄻?biāo)簽功能中，
  name是作為選項(xiàng)卡的標(biāo)題歼跟。建議隱藏的菜單都寫(xiě)在最后面和媳，不要寫(xiě)在subMenus里面，當(dāng)然寫(xiě)在哪都可以實(shí)現(xiàn)哈街。
  如何打開(kāi)隱藏的菜單留瞳，直接使用<a href="#!userDetail"></a>即可，或者Q.go('userDetail')骚秦。

?上面的menus數(shù)組已經(jīng)展示了各種不同的寫(xiě)法她倘，根部不同場(chǎng)景決定某些參數(shù)是否填寫(xiě)。

注意：

??路由關(guān)鍵字url不能帶/作箍，在EasyWeb1.0版本中硬梁，url是以#!system/xxx這種格式作為關(guān)鍵字的，這種注冊(cè)方法
是把system/開(kāi)頭的所有url一起注冊(cè)胞得，但是在2.0版本中使用的是循環(huán)menus數(shù)組一個(gè)一個(gè)注冊(cè)荧止，所以u(píng)rl有/就會(huì)變成第一種格式，是不正確的阶剑。

3.4.admin模塊介紹

admin模塊做了很多的操作跃巡，這里只重點(diǎn)介紹admin對(duì)外封裝的一些操作方法。

不分離版本admin.js去掉了hasPerm方法牧愁，其他方法可以放心使用素邪。

3.4.1.admin提供的默認(rèn)事件

使用示例：

<a ew-event="fullScreen">全屏</a>
<a ew-event="flexible">折疊導(dǎo)航</a>

??只需要在DOM節(jié)點(diǎn)上面添加ew-event="xx"即可，此時(shí)這個(gè)DOM節(jié)點(diǎn)就會(huì)自動(dòng)加入相關(guān)的點(diǎn)擊事件了递宅。全部事件如下表：

3.4.2.admin提供的方法

使用示例：

layui.use(['admin'], function () {
    var admin = layui.admin;

    admin.flexible(true);    // 折疊側(cè)導(dǎo)航
});

全部方法：

首先說(shuō)明一下admin為什么要封裝那么多l(xiāng)ayer的彈窗，因?yàn)閍dmin封裝的彈窗都是支持彈窗的內(nèi)容是一個(gè)單獨(dú)的頁(yè)面烘绽，
并且不是以iframe的方式嵌入頁(yè)面淋昭，也就是單頁(yè)面的形式。

3.4.2.1.右側(cè)彈出彈窗popupRight

使用示例：

admin.popupRight('pages/tpl/message.html');

分離版本填寫(xiě)?yīng)毩⒌膆tml頁(yè)面即可安接，不分離版本填寫(xiě)后臺(tái)的url(Controller)

“message.html”里面也可以有js代碼翔忽，如下所示：

<div>
    <ul>
        <li class="layui-this">通知</li>
        <li>私信</li>
        <li>待辦</li>
    </ul>
</div>

<script>
    layui.use('element', function () {
        var element = layui.element;

    });
</script>

注意：因?yàn)槭菃雾?yè)面，不是iframe盏檐，所以頁(yè)面里面請(qǐng)不要寫(xiě)<html> <head> <title>之類的東西歇式。

效果圖：

[圖片上傳失敗...(image-1717f7-1639444934181)]

3.4.2.2.中間彈出彈窗popupCenter

??admin封裝的popupCenter雖然沒(méi)有什么特別的樣式，但是帶有回調(diào)的功能胡野。

使用示例（一般用在表單彈窗材失，如添加、修改用戶等）：

admin.popupCenter({
    title: '添加用戶',
    path: 'pages/system/user_form.html',
    finish: function () {
        
        // 這個(gè)方法就是回調(diào)的功能硫豆，用戶添加成功之后讓表格reload
        table.reload('user-table', {});  
        
    }
});

參數(shù)說(shuō)明：

請(qǐng)注意，除了path和finish是popupCenter新增的參數(shù)熊响，其他參數(shù)均與layer的open參數(shù)一樣旨别，但是type和content參數(shù)無(wú)效，
type固定是1（頁(yè)面層）汗茄，content會(huì)被path的內(nèi)容覆蓋秸弛。

“user_form.html”內(nèi)容如下：

<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <!-- ...省略表單內(nèi)容 -->
</form>

<script>
    layui.use(['admin', 'form'], function () {
        var admin = layui.admin;
        var form = layui.form;

        // 表單提交事件
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            // 這里是用admin封裝的ajax請(qǐng)求
            admin.req('user', data.field, function (data) {
                layer.closeAll('loading');
                if (data.code == 200) {
                    layer.msg('添加成功', {icon: 1});
                    
                    // 這里是關(guān)鍵，調(diào)用這個(gè)方法就觸發(fā)finish回調(diào)并且關(guān)閉彈窗
                    admin.finishPopupCenter();
                    
                } else {
                    layer.msg('添加失敗', {icon: 2});
                }
            }, 'POST');
            return false;
        });
    });
</script>

示例圖：

[圖片上傳失敗...(image-e1f1ee-1639444934181)]

完整示例代碼：

// 全部參數(shù)都寫(xiě)
admin.popupCenter({
    title: '添加用戶',
    path: 'pages/system/user_form.html',
    finish: function () {
        // finish回調(diào)
    },
    success: function() {
      // user_form.html成功渲染到彈窗中
    },
    end: function() {
      // 彈窗關(guān)閉
    }
});

// 只寫(xiě)必須參數(shù)
admin.popupCenter({path: 'pages/system/user_form.html'});

3.4.2.3.封裝的layer彈窗open

??前面講了admin所封裝的彈窗目的是在不使用iframe的前提下支持使用獨(dú)立的頁(yè)面洪碳，這樣便于我們維護(hù)代碼递览，減少一個(gè)頁(yè)面里面的代碼量。

使用方法：

admin.open({
    title: 'xxx',
    path: 'system/user_form.html',
    success: function(){
        
    }
});

參數(shù)說(shuō)明：

??path是新增的參數(shù)偶宫，其他參數(shù)均為layer.open的參數(shù)非迹，但是type和content參數(shù)無(wú)效，type固定是1（頁(yè)面層）纯趋，
content會(huì)被path的內(nèi)容覆蓋憎兽，open沒(méi)有finish方法，popupCenter才有吵冒。

如何讓彈窗出現(xiàn)滾動(dòng)條纯命？

??彈窗的默認(rèn)高度是自適應(yīng)的，設(shè)置了寬高后內(nèi)容超出是無(wú)法出現(xiàn)滾動(dòng)條的痹栖，因?yàn)槌霈F(xiàn)彈窗里面的下拉框select下拉會(huì)出現(xiàn)滾動(dòng)條亿汞，所以amdin.css里面
禁止了彈窗的滾動(dòng)條，如果你需要彈窗出現(xiàn)滾動(dòng)條揪阿，請(qǐng)使用如下的方式：

admin.open({
    title: 'xxxxx',
    area: ['500px','300px'],
    path: 'system/user/editForm',
    success: function (layero, index) {
        // 關(guān)鍵代碼疗我，   ↑↑↑↑↑↑↑↑↑↑↑↑↑（上面的兩個(gè)參數(shù)不要忘了）
        $(layero).children('.layui-layer-content').css('overflow-y', 'scroll');
    }
});

只需要在success回調(diào)方法里面手動(dòng)加上樣式就可以了咆畏。

// 寫(xiě)scroll可以防止彈窗內(nèi)表格出現(xiàn)滾動(dòng)條
$(layero).children('.layui-layer-content').css('overflow-y', 'scroll');

// 彈窗內(nèi)沒(méi)有表格使用auto即可
$(layero).children('.layui-layer-content').css('overflow-y', 'auto');

// 水平垂直都有滾動(dòng)條使用overflow
$(layero).children('.layui-layer-content').css('overflow', 'auto');

admin.popupCenter也同樣支持此使用方法

3.4.2.4.封裝的ajax請(qǐng)求req

注意：req不支持指定返回的數(shù)據(jù)類型（json、html吴裤、text等）旧找，只會(huì)返回json的數(shù)據(jù)。

??admin模塊封裝的ajax請(qǐng)求會(huì)自動(dòng)傳遞token（access_token）麦牺，并且會(huì)自動(dòng)把PUT钮蛛、DELETE請(qǐng)求轉(zhuǎn)成POST、GET請(qǐng)求
然后加參數(shù)_method剖膳，因?yàn)闉g覽器不支持PUT魏颓、DELETE請(qǐng)求的參數(shù)傳遞，具體原因請(qǐng)百度一下吱晒，不分離版本不會(huì)進(jìn)行此操作甸饱。

??另外分離版本和不分離版本封裝的ajax和req都會(huì)檢驗(yàn)狀態(tài)碼（401登錄過(guò)期，403沒(méi)有權(quán)限）枕荞，登錄過(guò)期會(huì)自動(dòng)跳轉(zhuǎn)到登錄界面柜候。

使用示例：

// 不傳遞參數(shù)的寫(xiě)法
admin.req('user', {}, function (data) {
    console.log(JSON.stringify(data));
}, 'GET');

// 傳遞參數(shù)的寫(xiě)法
admin.req('user', {
    userId: 'xxx',
    userName: '張三'
}, function (data) {
    console.log(JSON.stringify(data));
}, 'POST');

方法參數(shù)說(shuō)明：

• 第一個(gè)參數(shù)： 接口地址搞动，會(huì)自動(dòng)在前面加入config.base_server
• 第二個(gè)參數(shù)： 傳給服務(wù)器的參數(shù)
• 第三個(gè)參數(shù)： 請(qǐng)求成功的回調(diào)（如果出現(xiàn)http錯(cuò)誤404,401等，也會(huì)進(jìn)入這個(gè)回調(diào)，并且data里面會(huì)有code苗桂、msg兩個(gè)參數(shù)玫镐，
  code是http的錯(cuò)誤碼，msg是錯(cuò)誤信息）
• 第四個(gè)參數(shù)： 請(qǐng)求的方法（GET箩溃、POST瞭吃、PUT、DELETE）

?req還會(huì)自動(dòng)判斷token是否過(guò)期涣旨，如果token過(guò)期會(huì)自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面歪架，不分離版本是根據(jù)code判斷401為登錄過(guò)期。

3.4.2.5.封裝的ajax請(qǐng)求ajax

使用方法：

admin.ajax({
   url: 'xxxx',
   data: {
       aa:''
   },
   dataType: 'json',
   type: 'POST',
   success: function(result,status,xhr) {
     
   } 
});

?使用方法跟$.ajax一模一樣霹陡，admin封裝只是在success之后先判斷是否為登錄過(guò)期和沒(méi)有權(quán)限和蚪，然后再執(zhí)行你的success方法。

?使用參數(shù)也跟$.ajax一樣烹棉，請(qǐng)到http://www.runoob.com/jquery/ajax-ajax.html文檔中查看$.ajax的參數(shù)說(shuō)明攒霹。

3.4.2.6.判斷是否有權(quán)限hasPerm

注意：不分離版本沒(méi)有此方法。

??這個(gè)方法是用來(lái)判斷當(dāng)前登錄的用戶是否有某一權(quán)限的操作浆洗，使用這個(gè)方法的前提是在index.js里面有一個(gè)獲取
服務(wù)器的user信息并使用config.putUser方法緩存催束，并且user里面包含了權(quán)限列表，因?yàn)閍dmin會(huì)調(diào)用config.getUser獲取
用戶信息從而獲取用戶的權(quán)限列表伏社。

??我這里面服務(wù)器返回的用戶json信息如下所示抠刺，如果你的服務(wù)器返回的信息跟下面不一樣塔淤，請(qǐng)修改hasPerm方法：

{
    "userId": "admin",
    "username": "admin",
    "nickName": "管理員",
    "authorities": [{
        "authority": "get:/role"
    }, {
        "authority": "put:/role"
    }]
}

authorities就是用戶的權(quán)限集合，authority是權(quán)限標(biāo)識(shí)速妖。

使用示例凯沪，下面的示例是演示沒(méi)有刪除用戶的權(quán)限隱藏刪除按鈕：

<div>
    <button id="btn-delete">刪除</button>
</div>

<script>
    layui.use(['admin'], function () {
        var admin = layui.admin;
        
        if(!admin.hasPerm('delete:user')) {
            $('#btn-delete').hide();  // remove()也可以
        }
    });
</script>

如果你擔(dān)心把按鈕隱藏了沒(méi)有什么卵用，會(huì)點(diǎn)技術(shù)就可以把按鈕在弄出來(lái)了买优，這個(gè)擔(dān)心完全是多余的妨马。
因?yàn)楹笈_(tái)的接口也會(huì)有權(quán)限驗(yàn)證的，如果沒(méi)有權(quán)限接口會(huì)返回{ code: 401, msg: "沒(méi)有訪問(wèn)權(quán)限" }杀赢，
既然后臺(tái)限制了烘跺，界面為什么還要限制，因?yàn)檫@是需求脂崔，如你項(xiàng)目沒(méi)有隱藏按鈕的需求可以不用隱藏滤淳。

3.4.2.7.緩存臨時(shí)數(shù)據(jù)putTempData

??這個(gè)方法是用來(lái)把一些臨時(shí)數(shù)據(jù)放在session中，頁(yè)面關(guān)閉數(shù)據(jù)就會(huì)失效砌左。 適當(dāng)使用緩存可以
減少接口請(qǐng)求次數(shù)脖咐，提升用戶體驗(yàn)。

使用示例：

admin.putTempData('t_name', '張三');    // 緩存數(shù)據(jù)

var tName = admin.getTempData('t_name');    // 獲取緩存數(shù)據(jù)

console.log(tName);

使用場(chǎng)景：

??前面講了popupCenter彈出添加用戶的界面汇歹，如果是修改用戶屁擅，是不是應(yīng)該傳遞user的信息呢，
因?yàn)樾薷慕缑嫘枰仫@user的信息产弹，這時(shí)就可以用putTempData了派歌，當(dāng)然也有別的辦法傳遞，這里就不一一演示了痰哨。

修改用戶按鈕的界面（user.html）：

<button id="btn-update">修改用戶</button>

<script>
    layui.use(['admin'], function () {
        var admin = layui.admin;
        
        admin.putTempData('t_user', {name: 'xx', sex: 'male'});  // 關(guān)鍵代碼
        
        admin.popupCenter({
            title: '修改用戶',
            path: 'pages/system/user_form.html',
            finish: function () {
                
            }
        });
    });
</script>

修改用戶彈窗的界面（user_form.html）：

<form id="user-form" lay-filter="user-form" class="layui-form model-form">
    <!-- ...省略表單內(nèi)容 -->
</form>

<script>
    layui.use(['admin', 'form'], function () {
        var admin = layui.admin;
        var form = layui.form;

        var user = admin.getTempData('t_user');  // 關(guān)鍵代碼
        
        form.val('user-form', user);  //回顯數(shù)據(jù)
    });
</script>

3.4.2.8 滾動(dòng)選項(xiàng)卡 rollPage

使用示例：

// 向左滾動(dòng)
admin.rollPage('left');

// 滾動(dòng)到當(dāng)前選中的選項(xiàng)卡
admin.rollPage('auto');

// 向右滾動(dòng)
admin.rollPage();

參數(shù)說(shuō)明：

• left - 向左滾動(dòng)
• auto - 滾動(dòng)到當(dāng)前選項(xiàng)卡
• 其他 - 向右滾動(dòng)胶果，不寫(xiě)參數(shù)就是向右滾動(dòng)

3.5.index模塊介紹

??index模塊主要是用于加載index.html的
header、side等斤斧，獲取用戶的信息早抠，判斷是否開(kāi)啟選項(xiàng)卡改變頁(yè)面局部等操作，說(shuō)白了就是用來(lái)初始化后臺(tái)布局的撬讽，用于給主體部分的界面
做準(zhǔn)備蕊连，雖然index.js里面代碼行數(shù)也不少，但是仔細(xì)看就能看懂锐秦，注釋也都寫(xiě)了咪奖，如果你需要
微微修改閱讀幾遍就可以上手修改了，下面只介紹兩個(gè)其他頁(yè)面會(huì)用到的封裝方法酱床。

需要注意的是：分離和不分離版本的index.js和index.html里面的一些寫(xiě)法有很些不同羊赵，請(qǐng)注意不要用混淆了。

3.5.1.打開(kāi)新頁(yè)面或選項(xiàng)卡Tab

layui.use(['index'], function () {
    var index = layui.index;
    
    // 不分離用后臺(tái)地址
    index.openNewTab({
        title:'個(gè)人信息', 
        url:'system/user/myInfo?userId=1',
        menuId: 'myInfo'
    });
    
    // 分離用html頁(yè)面
    index.openNewTab({
        title: '個(gè)人信息', 
        url: 'pages/system/myInfo.html',
        menuId: 'myInfo'
    });
    
    // 當(dāng)然這行代碼一般會(huì)寫(xiě)在按鈕點(diǎn)擊事件里面，直接寫(xiě)在這里就立即打開(kāi)新頁(yè)面了
});

• title 如果開(kāi)啟了多標(biāo)簽昧捷，title是選項(xiàng)卡的標(biāo)題
• url 打開(kāi)的頁(yè)面地址
• menuId 這個(gè)參數(shù)是一個(gè)id標(biāo)識(shí)闲昭，瀏覽器地址欄會(huì)變成#!menuId。

這個(gè)功能的使用場(chǎng)景請(qǐng)見(jiàn)3.8.1章節(jié)

3.5.2.關(guān)閉選項(xiàng)卡

layui.use(['index'], function () {
    var index = layui.index;
    
    var menuId = 'myInfo';
    index.closeTab(menuId);
});

3.6.admin提供的css公共類

分離和不分離版本css都是一樣的靡挥，這部分文檔就不需要注意什么了序矩，哈哈??~

3.6.1.輔助類

[圖片上傳失敗...(image-d2b892-1639444934181)]

[圖片上傳失敗...(image-59c488-1639444934181)]

[圖片上傳失敗...(image-c2d39e-1639444934181)]

[圖片上傳失敗...(image-434d3b-1639444934181)]

<!-- 日期圖標(biāo) -->
<input class="layui-input date-icon" type="text" placeholder="請(qǐng)選擇日期范圍"/>

<!-- 圖標(biāo)按鈕 -->
<button class="layui-btn icon-btn"><i class="layui-icon layui-icon-search"></i>搜索</button>
<button class="layui-btn icon-btn"><i class="layui-icon layui-icon-add-1"></i>添加</button>

<!-- 綠色超鏈接 -->
<a href="javascript:;" class="layui-link">帳號(hào)注冊(cè)</a>
<a href="javascript:;" class="layui-link pull-right">忘記密碼？</a>

<!-- 藍(lán)色超鏈接 -->
<div class="layui-text">
    <a >layui-v2.3.0</a>
    <a >q.js</a>
    <a >pandyle.js</a>
</div>

3.6.2.表格上方的工具欄

<div class="layui-card-body">

    <div class="layui-form toolbar"> <!-- 關(guān)鍵代碼toolbar -->
        搜索：
        <select>
            <option value="">-請(qǐng)選擇-</option>
            <option value="user_id">ID</option>
            <option value="username">賬號(hào)</option>
        </select>&emsp;
        
         <!-- 關(guān)鍵代碼search-input -->
        <input class="layui-input search-input" type="text" placeholder="輸入關(guān)鍵字"/>&emsp;
        
        <button class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        <button class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
    </div>

    <table class="layui-table" id="user-table" lay-filter="user-table"></table>
</div>

[圖片上傳失敗...(image-b849dc-1639444934181)]

3.6.3.彈窗里面的表單

<form class="layui-form model-form"> <!-- 關(guān)鍵代碼model-form -->

    <div class="layui-form-item">
        <label class="layui-form-label">賬號(hào)</label>
        <div class="layui-input-block">
            <input name="username" placeholder="請(qǐng)輸入賬號(hào)" type="text" class="layui-input"/>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">性別</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked/>
            <input type="radio" name="sex" value="女" title="女"/>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="roleId" xm-select="roleId" lay-verify="required">
            </select>
        </div>
    </div>
    
     <!-- 關(guān)鍵代碼model-form-footer -->
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary close" type="button">取消</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
    
</form>

[圖片上傳失敗...(image-22463-1639444934181)]

3.6.4.完全基于layui后臺(tái)大布局

??EasyWeb完全基于layui的后臺(tái)大布局進(jìn)行樣式修改毒返，html結(jié)構(gòu)是完全基于layui的后臺(tái)大布局的租幕，所以項(xiàng)目里面的
admin.css你可以用于任何layui后臺(tái)大布局的頁(yè)面，加入之后你的頁(yè)面就得到EasyWeb的樣式了拧簸， 但是側(cè)導(dǎo)航欄
的折疊事件劲绪、全屏等事件是寫(xiě)在admin.js里面的，所以建議你直接使用EasyWeb的框架盆赤，當(dāng)然如果你有自己的基于layui后臺(tái)
大布局的框架贾富，完全可以使用我的admin.css。

3.7.鼠標(biāo)經(jīng)過(guò)自動(dòng)彈出tips層

使用示例：

<button class="layui-btn" lay-tips="大家好牺六！">按鈕</button>

??只需要在你的DOM節(jié)點(diǎn)上面添加lay-tips="xxx"颤枪，然后這個(gè)節(jié)點(diǎn)在鼠標(biāo)滑過(guò)的時(shí)候就會(huì)自動(dòng)顯示tips層了，簡(jiǎn)單吧兔乞！

默認(rèn)提示位置在元素的上面汇鞭，修改位置可以這樣做：

<button class="layui-btn" lay-tips="大家好！" lay-direction="2">按鈕</button>

再加一個(gè)lay-direction屬性就可以了庸追，參數(shù)如下：

• 1 - 上面，默認(rèn)台囱，可以不寫(xiě)
• 2 - 右邊
• 3 - 下面
• 4 - 左邊

效果圖：

[圖片上傳失敗...(image-250a03-1639444934181)]

3.8.路由的使用

??路由這里使用的是Q.js框架淡溯，如果你的左側(cè)菜單是配置在config.menus里面的話，不需要自己注冊(cè)路由監(jiān)聽(tīng)簿训，
index.js里面會(huì)自動(dòng)幫你注冊(cè)咱娶。

??如果你需要自己添加路由注冊(cè)監(jiān)聽(tīng)的話，請(qǐng)參考q.js的開(kāi)發(fā)文檔：Q.js强品。

注意：

??EasyWeb里面使用的q.js進(jìn)行過(guò)修改膘侮，我在里面加了一個(gè)刷新的方法，所以請(qǐng)不要擅自替換q.js文件的榛，如果你發(fā)現(xiàn)
q.js框架出來(lái)新版本了琼了，請(qǐng)聯(lián)系我進(jìn)行替換，請(qǐng)多多包含，不要嫌麻煩雕薪，以免出問(wèn)題昧诱。

3.8.1.打開(kāi)不在導(dǎo)航欄中的頁(yè)面

??比如用戶詳情、個(gè)人信息這些頁(yè)面所袁，它們不在左側(cè)導(dǎo)航中盏档，但是想打開(kāi)新頁(yè)面或者選項(xiàng)卡，
又比如添加用戶燥爷、修改用戶這個(gè)頁(yè)面現(xiàn)在是用彈窗的形式蜈亩，如果想用新頁(yè)面的形式該怎么實(shí)現(xiàn)：

第一種實(shí)現(xiàn)方式：

?在分離版本中，你只需要在config.js的menus數(shù)組中添加一個(gè)隱藏的菜單：

menus: [{
    name: '個(gè)人信息',
    url: '#!myInfo',
    path: 'system/my_info.html',
    hidden: true
}]

html中跳轉(zhuǎn)：

<a href="#!myInfo">個(gè)人信息</a>

js中跳轉(zhuǎn)：

Q.go('myInfo');

或許你已經(jīng)注意到了前翎，這種方式跳轉(zhuǎn)的界面是一個(gè)固定頁(yè)面勺拣，如果我們想要傳遞一些參數(shù)，
它就無(wú)法滿足鱼填，所以有了第二種實(shí)現(xiàn)方式药有。

第二種實(shí)現(xiàn)方式：

layui.use(['index'], function () {
    var index = layui.index;
    
    // 不分離用后臺(tái)地址
    index.openNewTab({
        title:'個(gè)人信息', 
        url:'system/user/myInfo?userId=1',
        menuId: 'myInfo'
    });
    
    // 分離用html頁(yè)面
    index.openNewTab({
        title: '個(gè)人信息', 
        url: 'pages/system/myInfo.html',
        menuId: 'myInfo'
    });
    
    // 當(dāng)然這行代碼一般會(huì)寫(xiě)在按鈕點(diǎn)擊事件里面，直接寫(xiě)在這里就立即打開(kāi)新頁(yè)面了
});

• title 如果開(kāi)啟了多標(biāo)簽苹丸，title是選項(xiàng)卡的標(biāo)題
• url 打開(kāi)的頁(yè)面地址
• menuId 這個(gè)參數(shù)是一個(gè)id標(biāo)識(shí)愤惰，如果id一樣就只會(huì)存在一個(gè)tab，也就是說(shuō)打開(kāi)一次沒(méi)有關(guān)閉就不會(huì)再打開(kāi)新的頁(yè)面赘理，
  比如用戶詳情頁(yè)面宦言，如果你想userA的詳情和userB的詳情是兩個(gè)頁(yè)面，可以同時(shí)存在選項(xiàng)卡中商模，menuId就不要寫(xiě)一樣的奠旺。

注意：

分離版本兩種方式都可以用，不分離版本只能用第二種方式施流，再分離版本中不能使用?問(wèn)號(hào)傳遞參數(shù)响疚，建議使用
臨時(shí)緩存的方式傳遞參數(shù)。

請(qǐng)到3.5.1和3.5.2章節(jié)查看跟這個(gè)使用場(chǎng)景相關(guān)的其他功能方法瞪醋。

3.9.mvvm數(shù)據(jù)綁定忿晕、組件等

??雖然現(xiàn)在vue很流行，但是jquery的許多方法仍然很好用银受，所以現(xiàn)在很多項(xiàng)目里面既有vue践盼，又有jquery，
然而對(duì)于開(kāi)發(fā)一個(gè)后臺(tái)管理系統(tǒng)來(lái)說(shuō)宾巍，我們僅僅用了vue的數(shù)據(jù)渲染功能咕幻，大部分還是用的jquery的代碼，這樣一來(lái)項(xiàng)目
就顯得有點(diǎn)不倫不類了顶霞。

??但是對(duì)于前后端分離來(lái)說(shuō)肄程，mvvm的框架渲染數(shù)據(jù)確實(shí)很方便，很強(qiáng)大，layui雖然提供了模板引擎绷耍，
但是寫(xiě)法別扭吐限，還麻煩，pandyle.js是一個(gè)為jquery打造的mvvm框架褂始，還提供了類似vue組件的寫(xiě)法诸典。

??EasyWeb里面的頭部header、side等都是使用的它的組件的寫(xiě)法崎苗，還有一些下拉框select的渲染也是用的它提供的mvvm的寫(xiě)法狐粱。

??我這里就不提供pandyle.js的用法了，以免跟不上pandyle作者的更新腳步胆数，
大家可以到這里pandyle.js查看pandyle的開(kāi)發(fā)文檔肌蜻。

注意：

??不分離版本沒(méi)有引入pandyle.js，不分離版本的header和side是使用beetl的布局功能實(shí)現(xiàn)的必尼，如果你需要在
不分離版本中使用mvvm蒋搜，請(qǐng)自行在idnex.html中引入pandyle.js。

3.10.主題功能

??EasyWeb包含前后臺(tái)判莉，所以開(kāi)發(fā)時(shí)間比較緊張豆挽，暫時(shí)只提供了兩套主題，但是提供了一個(gè)主題生成器券盅，
請(qǐng)使用主題生成器定制化你的樣式：EasyWeb主題生成器帮哈。

?EasyWeb的主題生成器可以深度定制主題，樣式深度到按鈕锰镀、單選框娘侍、下拉框、選項(xiàng)卡等樣式泳炉。

3.11.不分離版本

注意：

??你從EasyWebPage這個(gè)地址下載下來(lái)的項(xiàng)目是前后端分離版本的憾筏，如果你需要前后端不分離版本的頁(yè)面和后臺(tái)，
請(qǐng)從easyweb-shiro下載胡桃。 easyweb-shiro是Java語(yǔ)言開(kāi)發(fā)的踩叭，如果你是
php或其他后臺(tái)語(yǔ)言，想要使用不分離版的頁(yè)面翠胰，請(qǐng)聯(lián)系作者輔助你結(jié)合到你的項(xiàng)目中，因?yàn)椴环蛛x版本頁(yè)面跟后臺(tái)耦合比較大自脯，
分離出靜態(tài)頁(yè)面意義不大之景，所以不分離版本作者就沒(méi)有獨(dú)立再維護(hù)成純靜態(tài)頁(yè)面了。

3.12.樹(shù)形表格treeTable

在layui的數(shù)據(jù)表格上進(jìn)行擴(kuò)展實(shí)現(xiàn)的膏潮。

treeTable項(xiàng)目地址：https://gitee.com/whvse/treetable-lay锻狗。

• 演示地址： https://whvse.gitee.io/treetable-lay/

截圖：

樹(shù)形表格1：

[圖片上傳失敗...(image-e9353f-1639444934181)]

樹(shù)形表格2：

[圖片上傳失敗...(image-3697b1-1639444934181)]

4.項(xiàng)目截圖

[圖片上傳失敗...(image-72245d-1639444934181)]

[圖片上傳失敗...(image-4cb828-1639444934181)]

[圖片上傳失敗...(image-7e6670-1639444934181)]

[圖片上傳失敗...(image-d7568b-1639444934181)]

5.更新日志

• 2018-07-22 - 增加樹(shù)形表格的功能

- 增加樹(shù)形表格的功能 [treeTable] (#_312樹(shù)形表格treeTable)

• 2018-07-20 - 發(fā)布不分離版的easyweb-shiro穩(wěn)定版本

  • 不分離版沒(méi)有config.js，但是同樣支持分離版的所有功能
  • 改進(jìn)路由的注冊(cè)方法，全部由框架自動(dòng)完成轻纪，開(kāi)發(fā)方式與傳統(tǒng)一樣油额，但是可以輕松的使用路由功能提升操作體驗(yàn)

• 2018-07-12 - 增加主題、多標(biāo)簽

  • 增加多標(biāo)簽tab功能刻帚，并且增加自由切換是否開(kāi)啟多標(biāo)簽功能

- 增加主題切換功能潦嘶，上線 主題生成器 ，自由生成主題樣式

• 2018-06-28 - 發(fā)布全新2.0版本

  • 引入pandyle.js（mvvm框架）崇众，填補(bǔ)layui模板引擎的短板
  • 采用模塊化開(kāi)發(fā)方式掂僵，定義admin、config等公用模塊顷歌，封裝ajax請(qǐng)求
  • 界面優(yōu)化锰蓬，借鑒layadmin的設(shè)計(jì)風(fēng)格，改版登錄頁(yè)面

• 2018-02-11 - 發(fā)布EasyWeb1.0版本

  • 基于layui后臺(tái)大布局眯漩、q.js路由框架搭建出第一個(gè)版本
  • 1.0 版本在easyweb的gitee附件中下載

6.聯(lián)系方式

6.1.歡迎加入“前后端分離技術(shù)交流群”

[圖片上傳失敗...(image-541317-1639444934181)]

6.2.我要打賞

??都是猿友芹扭，擼碼不易，如果這個(gè)輪子對(duì)你有用赦抖，不妨打賞一下舱卡！
碼云已開(kāi)啟捐贈(zèng)功能，謝謝支持摹芙！

??EasyWeb目前提供了“路由+mvvm分離版”灼狰、“基于oauth2的后臺(tái)”、“基于shiro的不分離版”浮禾、“不分離版的頁(yè)面”交胚、
“EasyWeb主題生成器”、“前端開(kāi)發(fā)文檔”等項(xiàng)目盈电，并且全部開(kāi)源蝴簇，歡迎加入一起開(kāi)發(fā)，或者提交pull requests匆帚。