EasyWeb 前端开发文档

EasyWeb 前端开发文档

1.简介

基于jquery、layui的管理系统模板，单页面、响应式、支持mvvm、极易上手！

• 演示地址：https://whvse.gitee.io/easywebpage/
• 演示账号：随便输    密码：随便输

 EasyWeb包含前后台，
前台地址，
分离版后台地址，
不分离版后台地址，
后台基于springboot、mybatis、mybatis-plus、Security、OAuth2等，不分离版权限使用shiro。

 此文档包含分离和不分离版本的前端开发指南，两者的使用是有些区别的，
不同的地方在文档中都着重指明了，参考文档使用即可。

1.1.使用框架

描述	框架
核心框架	Layui、jQuery
路由框架	Q.js (纯js轻量级路由框架)
mvvm框架	pandyle.js (专为jquery编写的mvvm)
主要特色	单页面 / 响应式 / 简约 / 极易上手

1.2.项目结构

|-assets
|     |-css                     // 样式
|     |-images                  // 图片
|     |-libs                    // 第三方库
|
|-pages            // html组件
|     |-system                  // 系统管理页面
|     |-xxxxxx                  // 其他业务页面
|     |-tpl                     // 公用组件
|     |     |-message.html                 // 消息
|     |-console.html            // 主页一
|     |-header.html             // 头部
|     |-side.html               // 侧导航
|
|-module                // js模块 (使用layui的模块开发方式)
|     |-admin.js                // admin模块
|     |-config.js                // config模块
|     |-index.js                // index模块
|
|-index.html            // 主界面
|-login.html            // 登陆界面

不分离版没有pages目录，不分离版的页面由后台输出，前端只有assets和module

2.快速开始

  快速开始之前请确保你已经接触过layui并了解layui的使用，
尤其是layui模块的使用。否则看本文档会比较吃力。

2.1.导入项目

1. 直接下载项目，或使用git下载；

2. 使用IDEA（WebStorm）或者HBuilder等前端开发工具进行开发；

3. 运行login.html或者index.html启动：

   [图片上传失败...(image-8cb507-1639444934181)]

2.2.添加一个业务界面

注意：以下操作针对于分离版本，不分离版本菜单维护在数据库，页面由后台渲染，不需要前端有复杂的操作。

比如你要做一个CMS系统，添加一个文章管理界面：

• 第一步：
  
  在pages文件夹下面建一个目录cms，然后新建一个页面article.html

  [图片上传失败...(image-f424e7-1639444934181)]

  article.html完整代码：

   
  
       
  
           
  文章管理
           
             首页
             文章管理
           
       
       
  
           
  
               搜索： 
               搜索
           
   
           
           
       
   
   
   
   
   
   
  

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

  [图片上传失败...(image-89d3c3-1639444934181)]

• 第三步：
  
  运行项目，查看效果

  [图片上传失败...(image-36214a-1639444934181)]

2.3.添加第三方layui扩展模块

分离版本和不分离版本添加layui扩展模块都按如下方式来。

请参考项目里面formSelects的添加方法。

• 第一步： 把下载的模块放在module文件夹下面

• 第二步： 打开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;
  
   });
  

  如果你的模块没有文件夹直接在module里面就不需要写extend了，如果你的模块有独立的文件夹，像formSelects一样，
就需要在extend里面明确指出模块的位置。

[图片上传失败...(image-c70190-1639444934181)]

---

3.开发指南

3.1.开发规范

阅读开发规范之前请先了解前面“项目结构”的介绍。

1. css、图片、第三方lib（layui扩展模块除外）全部放在“/assets/”下面；
2. layui扩展模块放在“module”下面，例如项目里面“formSelects”模块；
3. 页面html放在“pages”下面。

注意：不分离版本html不需要放在“pages”下面，随便放，因为是后端渲染，前端只需要访问后端的url。
比如我这里不分离版本是放在templates目录下面，templates是SpringBoot默认的视图目录。

3.2.入口index.html

index.html是项目的主入口，打开index.html你会看到如下代码:

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扩展模块都位于“module/”下面，然后扩展模块因为formSelects使用了文件夹
存放，所以需要在“extend”中明确指出formSelects模块js的位置。  为什么admin.js、config.js不需要写extend，
因为admin和config是直接放在module里面。

  接着index.html里面使用了“config”、“admin”等模块，所以admin模块里面的一些方法也就即刻执行了。
admin提供的默认事件也就生效了。

注意：不分离版本去除了config.js，所以index.html不需要加载config。

3.3.“config”模块介绍

注意：不分离版本去除了config.js，不分离的项目也不需要前端做任何配置和缓存。

“config”模块主要是配置项目的一些基本参数。

名称	类型	描述
base_server	变量	服务器接口地址
tableName	变量	本地存储表名（token等都会存储在本地中）
pageTabs	变量	是否开启多标签模式，(不分离版本在index.js中配置)
getToken	方法	获取缓存的token
putToken	方法	缓存token
removeToken	方法	清除缓存的token
menus	变量	侧导航菜单数组，侧导航根据menus自动渲染
getUser	方法	获取缓存的用户信息
putUser	方法	缓存用户的信息

注意：因为我这边的后台返回的token是这样的

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

  所以我这边的token不是一个字符串存储的，是用json存储的，getToken返回的是一个json对象，
如果你的token只是一个字符串，请修改getToken方法和admin里面的req方法，当然我建议最好
命令你的后台人员按这个json格式返回数据，这个是一个标准的格式。

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”数组介绍

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

menus: [{
    name: '主页',
    url: 'javascript:;',
    icon: 'layui-icon-home',
    subMenus: [{
        name: '主页一',
        url: '#!console',
        path: 'console.html'
    }]
}, {
    name: '系统管理',
    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: '多级菜单',
    url: 'javascript:;',
    icon: 'layui-icon-unlink',
    subMenus: [{
        name: '二级菜单',
        url: 'javascript:;',
        subMenus: [{
            name: '三级菜单',
            url: 'javascript:;'
        }]
    }]
}, {
    name: '一级菜单',
    url: 'javascript:;',
    icon: 'layui-icon-unlink'
},{
    name: '我是隐藏菜单',
    url: '#!userDetail',
    path: 'system/user_detail.html',
    hidden: true
}]

  index.js里面会自动使用menus数组渲染左侧导航栏，并且会使用url作为关键字自动注册路由监听。
目前只设定了最多支持三菜单，原因是因为模板引擎渲染无法使用递归，所以写了三层循环，如果你需要更多级的菜单，
继续加循环就可以了，主要是因为无法递归，并不是无法做到无限级。

• path 表示html所在的路径，会在pages目录下面寻找。
• url 是路由的关键字，也就是说点击这个菜单，浏览器地址栏的url会变成/#!xxx。
• auth 表示这个菜单需要什么权限，index.js渲染的时候会自动判断权限，没有权限不会渲染出来，不写auth不会进行判断。
• hidden 表示菜单是否渲染到左侧导航栏，比如用户详情界面，不需要渲染到左侧导航，name最好也填写，因为在多标签功能中，
  name是作为选项卡的标题。建议隐藏的菜单都写在最后面，不要写在subMenus里面，当然写在哪都可以实现。
  如何打开隐藏的菜单，直接使用即可，或者Q.go('userDetail')。

 上面的menus数组已经展示了各种不同的写法，根部不同场景决定某些参数是否填写。

注意：

  路由关键字url不能带/，在EasyWeb1.0版本中，url是以#!system/xxx这种格式作为关键字的，这种注册方法
是把system/开头的所有url一起注册，但是在2.0版本中使用的是循环menus数组一个一个注册，所以url有/就会变成第一种格式，是不正确的。

3.4.admin模块介绍

admin模块做了很多的操作，这里只重点介绍admin对外封装的一些操作方法。

不分离版本admin.js去掉了hasPerm方法，其他方法可以放心使用。

3.4.1.admin提供的默认事件

使用示例：

全屏
折叠导航

  只需要在DOM节点上面添加ew-event="xx"即可，此时这个DOM节点就会自动加入相关的点击事件了。全部事件如下表：

事件	描述
flexible	折叠侧导航
refresh	刷新主体部分
back	浏览器后退
theme	打开主题设置弹窗
fullScreen	全屏切换
leftPage	左滚动选项卡
rightPage	右滚动选项卡
closeThisTabs	关闭当前选项卡
closeOtherTabs	关闭其他选项卡
closeAllTabs	关闭全部选项卡
closeDialog	关闭元素所在的layer弹窗

3.4.2.admin提供的方法

使用示例：

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

    admin.flexible(true);    // 折叠侧导航
});

全部方法：

方法	参数	描述
flexible(expand)	true和false	折叠侧导航
activeNav(url)	a标签里面的href值	设置侧导航栏选中
refresh()	无	刷新主体部分
popupRight(path)	html地址	右侧弹出弹窗
closePopupRight()	无	关闭右侧弹出
popupCenter(object)	见单独说明	中间弹出弹窗
finishPopupCenter()	无	关闭中间弹出弹窗并回调finish方法
closePopupCenter()	无	关闭中间弹出弹窗
open(object)	见单独说明	封装layer弹出弹窗
req(url, data, success, method)	见单独说明	封装的ajax请求，req只返回json
ajax(object)	见单独说明	封装的ajax请求
hasPerm(auth)	权限标识	判断用户是否有权限，不分离版本无此方法
putTempData(key, value)	key,value	缓存临时数据
getTempData(key,)	key	获取缓存的临时数据
rollPage(d)	方向	滚动选项卡tab

首先说明一下admin为什么要封装那么多layer的弹窗，因为admin封装的弹窗都是支持弹窗的内容是一个单独的页面，
并且不是以iframe的方式嵌入页面，也就是单页面的形式。

3.4.2.1.右侧弹出弹窗popupRight

使用示例：

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

分离版本填写独立的html页面即可，不分离版本填写后台的url(Controller)

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

    

        
通知
        
私信
        
待办
    

注意：因为是单页面，不是iframe，所以页面里面请不要写