Th技术开发白皮书

京采云+layUI快速上手

2021/12/8 vue

# 快速上手

# 一，权限控制

# 1，动态菜单配置

  • 后端往数据库添加菜单
  • 创建html文件，找到java目录下对应的web文件。CV大法，改成自己的路径，就OK了

# 2，静态菜单配置

  • 这里配置的一些不需要权限的页面，比如详情之类的。
  • 这框架不对静态菜单的url进行拦截，它拦截的是按钮的权限。
  • main.js下 regButtonRouter 函数，按它的这个配置。然后也是去java文件添加，同上。

# 3，按钮权限控制


<button perm-show="authenticate:approval">审核</button>

perm-show --- 属性值进行比对，不存在的话就删除，具体源码我也没看
authenticate:approval  --- 这值从接口取的，可以看localstorage存的字段

{
 htmlCode: "authenticate:approval"
 name: "审核"
 url: "#/platform-view/user/update-role"
}

# 二，实战增删改查

# 1，接口调用

  • module文件下admin.js ，是对请求的一些封装。这里贴几个常用的，使用的话直接复制就行了
admin.req(url, params, function (res) {
   /**
    * Content-Type: application/x-www-form-urlencoded
    *
    * url 请求地址
    * params 请求参数
    * method 请求方法
    */
}, method)


admin.reqContentTypeJson(url, JSON.stringify(params), function (res) {
   /**
    * Content-Type: application/json
    * 注意此时的params要转换成JSON
    */
}, method)
  • 服务地址
config.js文件
-  getBaseUrl函数，请求地址，可更改为指定后端的ip。
-  config对象下是各个服务的地址名，在相应的js文件下引入config模板，就可以使用了

# 2，模板引擎

动态渲染数据
1.append插入html标签
2.模板引擎渲染

// 方式一
admin.req(url, params, function ({ data }) {
   for (var i = 0; i < data.length; i++) {
     $("#supplierId").append("<option value=" + data.id + ">" + data.name + "</option>");
   }
   form.render()
}, 'GET')

// 方式二
laytpl($("#performanceInfoForm").html()).render(data, function (content) {
     $("#contentID").append(content)
})
页面中就可以直接用了
<div class="layui-form-item">
      <label class="layui-form-label">供应商名称：</label>
      <div class="layui-input-block">{{ d.name || '' }}</div>
</div>


v-if的使用

{{# if(d.status=='0' && d.parentStatus !=1 ){ }}
   <input type="radio" name="status" value="1" title="是" disabled>
   <input type="radio" name="status" value="0" title="否" checked>
{{# } else if(d.status=='0' && d.parentStatus ==1){ }}
    <input type="radio" name="status" value="1" title="是">
    <input type="radio" name="status" value="0" title="否" checked>
{{# }else{ }}
    <input type="radio" name="status" value="1" title="是" checked>
    <input type="radio" name="status" value="0" title="否" >
{{# } }}
 
v-for的使用
 
{{#  layui.each(d.checkCityList, function(index, item){ }}
    <input type="checkbox" title="{{ item.name }}" value="{{ item.code }}">
{{#  }); }}

 
本地数据读取
var data = layui.data('jdcloud') // 读取
layui.data('xxx', {}) // 设置

# 3，列表渲染

表格的url需要手动拼接默认路径

table.render
        elem: '#middleListManage'
        , text: { none: '当前暂无数据' }
        , headers: config.getHeaderObj()
        , url: config.base_server + config.platform_server + '/platform/supplierbrand/querySupplierBrandPage'
        , where: params
        , request: { pageName: 'pageNum', limitName: 'pageSize' }
        , parseData(res) {
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data?.totalCount, //解析数据长度
            "data": res.data?.result //解析数据列表
          };
        }
        , cols: [
          [
            { field: 'supplierName', title: '供应商名称', align: 'center', width: 300 },
            { field: 'supplierCategory', title: '类别', align: 'center', width: 300 },
            { field: 'brandName', title: '品牌名称', align: 'center' },
            { fixed: 'right', title: '操作', toolbar: '#middleBtns', align: 'center', width: 100 }
          ]
        ]
        , page: true
      })

# 4，表单校验与提交

<form class="layui-form base-info-form">
    <div class="layui-form-item">
         <div class="layui-form-label"><i class="sign">*</i>物资采购清单名称：</div>
         <div class="layui-input-inline">
            <input type="text" name="contractName" maxlength="50" lay-verify="required" placeholder="请输入物资采购清单名称" 							autocomplete="off" class="layui-input">
         </div>
    </div>
    <div class="layui-form-item">
         <div class="layui-form-label"><i class="sign">*</i>服务费比例：</div>
         <div class="layui-input-inline">
            <input type="text" name="serviceRatio" lay-verify="required|serviceRatio" autocomplete="off" placeholder="请输入服务费					比例" autocomplete="off" class="layui-input">
         </div>
    </div>
    <div style="text-align:center;margin-top:50px;">
         <button type="button" lay-submit lay-filter="addSubmit" class="layui-btn lay-btn-margin">提交</button>
    </div>
</form>

/**
 * form标签嵌套，注意加上类名，格式按照上述。
 * 提交按钮 需要嵌套在form表单里，在该标签加上lay-submit，lay-filter的值可自定义，用于form事件的监听
 * 需要检验的表单，可在该标签加上 lay-verify="required"， （required代表必填项，如果需要多个可以用 | 来校验。layui自带默认校验方式，不满足的话，可自	    定义检验方式，具体看官网）
 *
 */

/**
 * 自定义校验规则，eg
 * form.verify({
     serviceRatio: [
        /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/
        , '服务费比例可输入8位数，小数可输入2位小数'
     ]
   }) 
 *
 */

/**
 * 表单提交，eg
 * form.on('submit(addSubmit)', data => {
     return false
   }) 
 * 
 * submit会自动校验每一项是否符合lay-verify设置的规则，不满足则return
 * addSubmit为lay-filter的值
 * 回调中的data可以打印看一下，里面的field为表单每一项的name对应的值。
 *
 */

# 5，dom操作

详见jquery语法教程，使用jquery操作dom组件 (opens new window)

# 6，路由操作与参数

layui.index.openNewTab({
    name: "供应商查询详情",
    url: "#/platform-view/user/supplier-search-detail/id=" + data.id
});
页面跳转方法，这参数大家都看的懂，跟vue的router也没啥区别，注意参数携带是按/划分的

------------------------------------------

获取url信息：   
var router = layui.router()
好了，打印看下吧，啥都有

# 三，交互提示

# 1，loading

全局loading方法：  showloading(true)  true开启，false关闭

# 2，confirm

layer.confirm(`xxxxx`, function (index) {
    // 传统确认框，默认两个按钮，点确认进入该回调，自定义逻辑
})

layer.confirm(`xxxxxx`, {btn: ['同意', '拒绝']}, function (index) {
    /**
     * btn: 自定义按钮，可配置多个
     * 按配置的顺序，下面的回调一一对应你按钮的事件
     *
     */
}, function (index) {
    
})

# 3，toast

layer.msg('xxxxxx')
layer.msg('xxxx', {icon: 6}) // 可自定义配置，具体配置项看文档
layer.msg('xxxx', {icon: 6}, function(){
  // 关闭后的回调
})

组件注册