[danger] 为了避免出现一些奇葩的问题,请大家一定要看完此文章

项目目录配置

很多同学获取源码后,直接把整个目录拷贝到工程中,导致页面打开后,页面错乱或者没有任何效果。

这个原因是由于没有配置项目名称导致的(实际上使用F12调试会发现,页面提示404错误)

解决方案:修改plugins/frame/js/fs.js中的base配置。

如:项目名称为wueasy,那么需要把配置改为/wueasy/plugins/frame/js/,在路径前面增加项目名。

layui.config({
  base : "/plugins/frame/js/",//设定扩展的Layui模块的所在目录,一般用于外部模块扩展
  version : '2.0.0'
});

项目基础配置

[warning] 项目基础配置都在plugins/frame/js/fsConfig.js文件中

请求地址配置

[info] 前后端分离,需要配置接口的请求根地址

fsConfig["global"] = {
  "servletUrl":"https://fs.fallsea.com/" //异步请求地址,本地工程可以不填
}

响应结果配置

[info] 接口请求成功后,响应结果参数配置。需要修改成和自己项目匹配的格式。

fsConfig["global"] = {
  "result" : { //响应结果配置
    "statusName": "errorNo", //数据状态的字段名称,默认:errorNo
    "msgName": "errorInfo", //状态信息的字段名称,默认:errorInfo
    "successNo" : "0", //执行成功错误码统一配置
    "dataName" : "results.data", //非表格数据的字段名称,默认:results.data
    "file" : { //文件配置
      "path" : "results.data.filePath"  //返回文件路径属性
    }
  },
  "page" : { //分页配置
    "sortType":"0",//默认排序方式,0:本地排序,1:异步排序,不配置默认为0
    "request": {//请求配置
      "pageName": "pageNum", //页码的参数名称,默认:pageNum
      "limitName": "pageSize" //每页数据量的参数名,默认:pageSize
    },
    "response": {//响应配置
      "countName": "results.data.total", //数据总数的字段名称,默认:results.data.total
      "dataName" : "results.data", //数据列表的字段名称,默认:results.data
      "dataNamePage": "results.data.list" //分页数据列表的字段名称,默认:results.data.list
    }//,
//            "limit":10,//每页分页数量。默认20
//            "limits":[10,20,30,50,100]//每页数据选择项,默认[10,20,30,50,100]
  }
}

公用错误码消息回调处理

[info] 通过指定错误码控制错误码的回调事件处理。

例如:用户未登录返回的错误码为-999,可以指定如果用户未登录,跳转到登录页面。

fsConfig["filters"] = {
  //配置统一未登录错误码处理
  "-999" : function(result) {
    //未登录,跳转登陆页
    top.window.location.href = fsConfig["global"]["loginUrl"];
  }
};

公用表单验证事件

[info] 平台默认验证事件比较少,可以在这里可以拓展自定义form表单的验证事件

fsConfig["verify"] = {
  /**
   * 对比两个值相等
   */
  "equals": function(value, item){ //value:表单的值、item:表单的DOM对象
    var equalsId = $(item).attr("equalsId");
    if($.isEmpty(equalsId)){
      return '未配置对比id';
    }
    var value2 = $("#"+equalsId).val();

    if(value!==value2)
    {
      var equalsMsg = $(item).attr("equalsMsg");
      if($.isEmpty(equalsMsg))
      {
        equalsMsg = "值不相等";
      }
      return equalsMsg;
    }
  },
  /**
   * 用户名验证
   */
  "username": [
    /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){2,19}$/,
    '用户名格式不正确!'
  ],
  /**
   * 最小、最大长度判断
   */
  "length": function(value, item){ //value:表单的值、item:表单的DOM对象
    var minLength = $(item).attr("minLength");//最小长度
    var maxLength = $(item).attr("maxLength");//最大长度
    if(!$.isEmpty(minLength) && '0' !== minLength && parseInt(minLength)>value.length){
      return "输入内容小于最小值:"+minLength;
    }
    if(!$.isEmpty(maxLength) && '0' !== maxLength && value.length>parseInt(maxLength)){
      return "输入内容大于最小值:"+maxLength;
    }
  }
}

菜单配置

动态加载菜单数据。

支持两种模式,

  1. 加载前端缓存数据
  2. 加载后台接口动态数据。

基础配置

接口数据必须配置list数组,子菜单通过parentMenuIdField关联。

fsConfig["menuConfig"] = {
  dataType : "local" , //获取数据方式,local本地获取,server 服务端获取
  loadUrl : "", //加载数据地址
  method : "post",//请求类型,默认post
  rootMenuId : "0", //根目录菜单id
  defaultSelectTopMenuId : "1", //默认选中头部菜单id
  defaultSelectLeftMenuId : "111", //默认选中左边菜单id
  menuIdField : "menuId", //菜单id
  menuNameField : "menuName", //菜单名称
  menuIconField : "menuIcon" , //菜单图标,图标必须用css
  menuHrefField : "menuHref" , //菜单链接
  parentMenuIdField : "parentMenuId" ,//父菜单id
  data : [] //本地数据
};

配置说明

属性 必输 名称 描述
dataType 获取数据方式 local本地获取,server 服务端获取;本地获取需要配置data,服务端获取需要配置loadUrl
loadUrl 请求数据地址 服务端获取请求数据地址
method 请求类型 默认post,get
rootMenuId 根目录菜单id值 菜单根id,通过此id寻找一级菜单
defaultSelectTopMenuId 默认选中的一级菜单 一级菜单即是头部菜单
defaultSelectLeftMenuId 默认选中的左边菜单 左边菜单
menuIdField 菜单id字段信息
menuNameField 菜单名称字段
menuIconField 菜单图标字段
menuHrefField 菜单打开地址字段
parentMenuIdField 父菜单id字段
data 菜单集合 本地菜单集合,必须是list

图标配置说明

菜单图标支持多种模式配置:

  1. 使用font-awesome图标库

    只需要进入官网font-awesome,选择好对应的图标,然后在菜单图标字典中配置即可。

    例如:复制的按钮图标配置fa-files-o

  2. 使用layui官方的图标库

    进入官网layui,选择图标代码即可。

    例如:首页的按钮图标配置

  3. 自定义图标库

    如果需要自定义图标,那么只需要配置原生的图标配置。

    例如:<i class="layui-icon">&#xe60c;</i>

本地菜单配置demo

本地菜单只需要在data中,配置json数组,json对象的属性需要和上面的配置属性匹配。

[
  {"menuId":"1","menuName":"控制台","menuIcon":"fa-cog","menuHref":"","parentMenuId":"0"},
  {"menuId":"2","menuName":"测试","menuIcon":"","menuHref":"","parentMenuId":"0"},
  {"menuId":"11","menuName":"案例","menuIcon":"fa-table","menuHref":"","parentMenuId":"1"},
  {"menuId":"12","menuName":"其他页面","menuIcon":"","menuHref":"","parentMenuId":"1"},
  {"menuId":"111","menuName":"首页","menuIcon":"&#xe68e;","menuHref":"views/home/index.html","parentMenuId":"11"},
  {"menuId":"datagrid","menuName":"数据表格","menuIcon":"fa-list","menuHref":"views/datagrid/index.html","parentMenuId":"11"},
  {"menuId":"datagrid2","menuName":"数据表格2","menuIcon":"fa-list","menuHref":"views/datagrid2/index.html","parentMenuId":"11"},
  {"menuId":"treeDatagrid","menuName":"数+表格","menuIcon":"fa-list","menuHref":"views/treeDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"multiDatagrid","menuName":"多数据表格","menuIcon":"fa-list","menuHref":"views/multiDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"tabDatagrid","menuName":"tab数据表格","menuIcon":"fa-list","menuHref":"views/tabDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"complexDatagrid","menuName":"复杂数据表格","menuIcon":"fa-list","menuHref":"views/complexDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"linkageDatagrid","menuName":"联动数据表格","menuIcon":"fa-list","menuHref":"views/linkageDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"linkageDatagrid2","menuName":"联动数据表格(复杂)","menuIcon":"fa-list","menuHref":"views/linkageDatagrid2/index.html","parentMenuId":"11"},
  {"menuId":"staticDatagrid","menuName":"表格数据提交","menuIcon":"fa-list","menuHref":"views/staticDatagrid/index.html","parentMenuId":"11"},
  {"menuId":"121","menuName":"404","menuIcon":"<i class=\"layui-icon\">&#xe61c;</i>","menuHref":"404.html","parentMenuId":"12"},
  {"menuId":"21","menuName":"基本元素","menuIcon":"","menuHref":"","parentMenuId":"2"},
  {"menuId":"22","menuName":"徽章","menuIcon":"","menuHref":"http://www.layui.com/demo/badge.html","parentMenuId":"2"},
  {"menuId":"23","menuName":"数据表格","menuIcon":"","menuHref":"http://www.layui.com/demo/table.html","parentMenuId":"2"},
  {"menuId":"211","menuName":"按钮","menuIcon":"","menuHref":"http://www.layui.com/demo/button.html","parentMenuId":"21"},
  {"menuId":"212","menuName":"表单","menuIcon":"","menuHref":"http://www.layui.com/demo/form.html","parentMenuId":"21"},
  {"menuId":"213","menuName":"选项卡","menuIcon":"","menuHref":"http://www.layui.com/demo/tab.html","parentMenuId":"21"}
]
Copyright © wueasy.com 2017-2019 all right reserved,powered by Gitbook未经允许,禁止以任何形式传播 修订时间: 2019-03-18

results matching ""

    No results matching ""