使用说明

写在前面

主要是工作中新建了太多的项目,每个新项目都会有点改动,在多个项目中切换导致公用的东西都不是同一个版本。 所以现在将这些共用的东西做成一个版本。更新的话统一在这更新。 目的的话,主要还是希望在项目中通过最大化的ctrl c 和 ctrl v 完成大部分的工作。

后台页面主要基于layui

后台体验地址 https://inandan.com/myadmin

账号 / 密码 : test / 123456

适用群体

1.PHP开发者

2.最好使用的是Laravel框架

3.需要有一定的js基础

渲染相关

单列选择器

/*** 参数设定 ***/ { class:"select_single", //标签的classname 才会渲染 data-list:"数据源json格式或者数组",//必填 name:"表单字段名称", value:"选中项的值", data-id:"指定数据中的id的名称 默认是id", data-name:"指定数据中的name名称 默认为 name", data-tip:"表单提示文字 默认没有" } data-list:格式示例 ["选项1","选项2"] [{"id":"1","name":"单列选择器"}]

多列选择器

/*** 参数设定 ***/ { class:"pickerx", //标签的classname 才会渲染 data-list:"数据源json格式或者数组",//必填 data-name:"表单字段名称",//多列使用,号隔开,从后往前推算 data-value:"选中项的值",//使用最后一列的值即可、 data-placeholder:"placeholder的显示" } data-list:格式示例 [ { 'name':'显示文字',//显示文字 'id':'值的id',//input选取的值 'parent_id':'上级的id值',// 'children':[同上级结构],//子集的数组 } ]

省市区选择器

/*** 参数设定 ***/ { class:"cas", //标签的classname 才会渲染 data-level:"3",//选择级数 name:"表单字段名称", data-columns_placeholder:"全部,全部,全部",//可以再每列追加默认数据 } data-list:格式示例 [ { 'name':'显示文字',//显示文字 'id':'值的id',//input选取的值 'parent_id':'上级的id值',// 'children':[同上级结构],//子集的数组 } ]

xm-select

/*** 参数设定 ***/ { class:"xm_select", //标签的classname 才会渲染 data-tip:"3",//placehoder name:"表单字段名称", value:"已选中值", data-list:"数据列表", toolbar:"true",//工具栏是否打开 filterable:"true",//是否开始筛选 data-prop_name:"name",//显示的字段 data-prop_value:"id",//值的字段 } data-list:格式示例 [ {"name": "销售员", "children": [ {"name": "张三", "id": 1}, {"name": "李四", "id": 2}, {"name": "王五", "id": 3} ]}, {"name": "奖品", "children": [ {"name": "苹果2", "id": 4}, {"name": "香蕉2", "id": 5}, {"name": "葡萄2", "id": 6} ]} ]

地图位置选择

/***参数设定***/ { name:'lat,lng' // 逗号隔开 表示经度纬度的inputname data-value:'打开地图弹层后 默认选中经纬度位置 也是,隔开',//28.689578,115.89352755 }

复杂选项配置器

/***参数设定***/ { name:"存储字段名称", data-value:"json格式string类型", data-col:"json格式字段" } data-col:示例 [ { 'name':'pic',//filed字段名称 'title':'图片',//title说明显示 'type':'image',//字段类型 现在支持 date,select,image,text 不设置的话默认为text输入框 'required':1 } ]

图片上传

/***参数设定***/ { data-name:"存储字段名称", data-value:"图片路径", data-title:"字段描述", data-input"1",//是否显示输入框,一般在单图上传的时候开启 data-limit:"1",//图片选择数量限制,一般在多图上传中设置 data-required:"1",//表单是必须选入值 data-tip:"图片尺寸100*100",//图片描述 data-file:"0",//是否是选择文件 }

复制文本

复制 /***参数设定***/ { class:"clipboard",//classname data-text:"复制文章",//需要复制的文本 }

日历选择

/***参数设定***/ { class:"bldate",//classname data-type:"date",//时间类型 datetime 包含年月日 date 日期 data-range:"Boolean",//设定后会显示区间选择 }

input标签输入

/***参数设定***/ { class:"input_tags",//classname data-name:"tags",//input的name值 data-value:"",//已选中值 ,隔开 data-source:"",//默认可供选择数据 data-placeholder:"",//input的placeholder }

编辑器

/***参数设定***/ /***说明 使用的是tinymce编辑器,其它编辑器都用过,还是觉得这个比较好点***/ { class:"tinymce",//classname }

searchlist数据列表

layui.use(['searchlist'], function(){ var page_config = { url:d.page_info.request_url?d.page_info.request_url:'posts', page:d.page_info.page_url, where:{page_info:d.page_info}, post_type:'',//open为弹出层编辑模式 否则是跳转页面编辑 }; var sl = layui.searchlist; var $ = layui.$; page_config.search = { options:[ //筛选项 筛选现在目前只有5中类型 {name:'category_id',data_name:'category_arr',type:'pickerx'}, {name:'keyword',encode:true,type:'input',width:'300px;'}, {name:'date',type:'bldate',data_type:'date','placeholder':'请选择日期',width:'200px;'}, {name:'pca',type:'cas',data_level:1,'placeholder':'请选择地区'}, {name:'simple_id',type:'select_single',data_id:'cid',data_name:'title',data_list:'[{"cid":"1","title":"指定字段1"},{"cid":"2","title":"指定字段2"},{"cid":"3","title":"指定字段3"},{"cid":"4","title":"默认选中字段"}]','placeholder':'请选择'}, ], buttons:[ //按钮 按钮 可以自定义(按照按钮对象来设置就可以了 详见代码) 默认三个 'search','add','delete' ] }; page_config.cols = [ //表头 {field: '', title: '', width:80, type:'checkbox'} ,{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'title', title: '标题', width:300} ,{field: 'category.title', title: '分类', width:120} ,{field: 'created_at', title: '添加时间', width:180} ,{field:'displayorder',sort: true, edit:'text',width:'100', title: '排序'} ,{field: 'status', title: '状态', width: 100, sort: true} ,{field: 'edit', title: '操作'} ] sl.render(page_config); });

categoryList分类列表

layui.use(['categoryList'], function () { var page_config = { url:d.page_info.request_url?d.page_info.request_url:'category', page:d.page_info.page_url, page_post:d.page_info.page_post?d.page_info.page_post:'', where:{page_info:d.page_info}, post_type:'open',//编辑方式为弹出层 }; var sl = layui.categoryList; var $ = layui.$; page_config.search = { buttons:[ //按钮 'add','delete' ] }; page_config.cols = [ //表头 {field: '', title: '', width:80, type:'checkbox'} ,{field:'id',width:'100', title: 'id'} ,{field:'title',width:'300', title: '名称'} ,{field:'displayorder', edit:'text',width:'100', title: '排序'} ,{field: 'status', title: '状态', width: 90} ,{field: 'edit', title: '操作',param:{level:d.page_info.level}} ] sl.render(page_config); });

页面复用

js标签 la属性为复用页面地址 标签中为出入参数 复用页面中使用d.page_info获取; 注:这个应该用的比较少

弹层查询数据

弹层选择数据 这个是没有回调的 直接将所选数据设置在了data-id_name的input中 这个只适用于 1对1的逻辑中
/***参数设定***/ /***说明 使用的是tinymce编辑器,其它编辑器都用过,还是觉得这个比较好点***/ { data-url:"弹层打开的页面", data-id_name:"表单保存所选数据的id值", data-value:"输入框默认显示的数据", name:"在输入框中选择后,读取数据字段的名称默认是 title" }

JS使用相关

上面的的渲染都是已经打包在一起的,这部分是关于js调用的说明

文件结构

//使用laravel(版本:6.x)作为后端 //前端目录 public/myadmin(文件夹名称 线上需要修改) ├─dist //css目录 │ │─js //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─modules //模块js放在这里 │ │ │ ├─render//会自动渲染的模块 前提在env中render_more中配置 │ │ │ └─render.js//加载render文件夹里的模块的入口 │ │ ├─env.js//配置文件 │ │ └─sa.js//核心js文件 │ └─style //样式文件 │ │ └─font//字体文件夹 │ ├─views //页面文件 │ │ └─system//系统调用的一些页面 │─json //存储一些json文件的文件夹 │─layui-v2.5.6 //layui库文件 └─index.html //入口文件

重载当前页面

layui.sa.reload(); /***参数设定 按顺序来***/ var args = { sec:"100",//延时毫秒数默认100 }

request网络请求

layui.sa.request({ type:'get',//请求方式 url:'请求url',//请求url自动追加env中的 request_host配置 data:{},//数据 dataType: "json",//数据类型一般json success: function(res) { if(!res.code) { //回调 } } });

router路由补充

layui.sa.router();//支持hash以?开始设定参数 var ret = { hash: "",//hash href: "/news/news/post?id=119",//hash path: ["news", "news", "post"],//路径数据 search: {id: "119"},//参数对象 }

open打开弹层页面

layui.sa.open({ data:{},//传递参数 area:['800px','600px'],//打开大小 默认['800px','600px'] url:'system/attachment',//打开页面路径 views下 title:'图片管理',//title显示 callback:function(res){ //console.log(res); //回调函数 页面中可以调用 } }); //打开页面中调用 layui.sa.close(res,firstIndex); var args = { res:'页面中传递回调参数', firstIndex:'页面中获取 layer.index的值' }

random随机数字

layui.sa.random(prev_); var args = { prev_:'生成随机数前缀',//默认没有 }

alert提示信息

sa.alert(JSON.stringify(data.field)); layui.sa.alert(msg,title); var args = { msg:'alert显示信息',//默认没有 title:'弹层页面的标题'//默认为 信息详情 }

后端使用相关

关于后台的一些配置调用

使用说明

/**多个php版本使用绝对路径执行命令**/ /**固定composer.phar 包位置 因为多个php版本所以 这样执行***/ 1. /www/server/php/73/bin/php composer.phar update //更新vender包,默认里面的包不传到版本中 2. /www/server/php/73/bin/php artisan storage:link //增加一个storage超链接,访问图片使用