js绑定及触发事件及mybatis，lambad小总结

1 js用户提示如果没有选择图片或者选择的不是图片（标签选择器代表input 输入框）：

var path = $("#messageFile").val();
    if (path.length == 0) {
        layer.msg("必须选择一个图片进行上传!");
        return false;
    } else {
        var extStart = path.lastIndexOf('.'),
            ext = path.substring(extStart, path.length).toUpperCase();
        if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
            layer.msg("该文件不是图片,请重新选择!");
            return false;
        }

2 lambad表达式实现：

（）：用来描述参数列表
{} ：用来描述方法体
-> ：lombda运算符  读作 goes to
（）->{} :接口使用方法
list.sort((o1,o2)->o2.age-o1.age):实现排序 降序
list.foreach( ele ->}{
if(ele%2==0)
})  :实现循环并判断偶数
list.removeif(ele -> ele.age>10) ：判断大于10的数据删除

3 mybatis条件构造器：

or ：or语句，拼接+or 字段=值
eq ：等于=
allEq ：基于map内容等于
ne ：不等于
gt ：大于
ge ：大于等于
lt ： 小于
le ：小于等于
like ：模糊查询
notLike ：模糊查询
in ： 查询
notIn ：not in查询
isnull ：值为空的
groupBy ：分组
having ：关键词
orderBy ：排序 
exists ：结果集大于0就执行
between ：什么到什么之间
andFilter ：自由拼接sql
last ：拼接在最后

4 input file上传图片时回显图片：
//图片回显

function changImg(e){//input内容改变触发事件,设置回显及大小限制，绑定在file 的事件 changimg（even）
    var fileId = "messageFile";
    var dom = document.getElementById(fileId);
    var fileSize = dom.files[0].size;
    let size = Math.round(fileSize/1024/1024*100)/100; //单位为M
    if(size>=5){
        $('#messageFile').val('');
        alert("您上传的图片大小超过5M，请重新上传!");
        return false;
    }
    for (var i = 0; i < e.target.files.length; i++) {
        var file = e.target.files.item(i);
        if (!(/^image\/.*$/i.test(file.type))) {
            continue; //不是图片 就跳出这一次循环
        }
        //实例化FileReader API
        var freader = new FileReader();
        freader.readAsDataURL(file);
        freader.onload = function(e) {
            $("#imgSrc").attr("src",e.target.result).attr("width","130px").attr("height","90px");
        }
    }
}

5 页面js拼接 html 示例：

  $("#delImageTypeId").empty();
       var emps = result.data;
       var optionItems;
       optionItems = $("<option></option>").append("请选择图片分类");
       optionItems.appendTo("#delImageTypeId");
        $.each(emps, function (index, item) {
        optionItems = $("<option></option>").append(item.type).attr("value", item.id);
         optionItems.appendTo("#delImageTypeId");

6 adminlte前端模板 类似bootstrap前端分页封装

 var editFlag = "[[${@perms.hasPerm('resourcemg:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('resourcemg:delete')}]]";
    var columns = [
        //{checkbox: true },
        {
            field: 'title',
            title: '图片名称',
            align: "center"
        },
        {
            field: 'description',
            title: '图片描述',
            align: "center"
        },
        {
            field: 'address',
            title: '图片',
            align: "center",
            sortable: true,
            formatter:function(value){
               // console.log(value);
                return "<img src='"+value+"'  style=width:100px;height:70px;/>";
            }
        },
        {
            field: 'type',
            title: '图片归属分类',
            align: "center"
        },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            class: 'min-width-100',
            formatter: function (value,
                                 row, index) {
                var edit = editFlag == "true" ? '<a class="table-btn table-btn-info" onclick="editTag(' + row.imagesId + ')">编辑</a>' : '';
                var del = deleteFlag=="true" ? '<a  class="table-btn table-btn-danger" onclick="deleteTag('+row.imagesId+')">删除</a>' : '';
                return edit+del;
            }
        }];
    var options = {
        id: "#table",
        url: '/resourcemg/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);
    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            imageTypeId: $("#imageTypeId").val(),
            //state: $("#state").val()
        };
        return temp;
    };

7 根据值来选中应该选中初始的下拉值

  $("#options option[value = " + value + "]").prop("selected", true);

8 上传图片工具类（可根据需求进行更改）

/**
 * @author Zhangxiang
 * @version V1.0
 * @date 2019年11月29日
 * upload上传图片工具类
 */
public class UploadFile{
    public static String uploadImage(MultipartFile[] file){
        //拿到一个页面返回对象
        MultipartFile multipartFile =null;
        //判断该对象是否为空不为空取第一个数据
        if(file!=null){
            multipartFile = file[0];
        }
        String fileName=multipartFile.getOriginalFilename(); //取到文件的名称
        String suffixName = fileName.substring(fileName.lastIndexOf("."));//分辨文件结尾
        String filePath="D:/Images";//上传后路径
        fileName = UUIDUtil.getUniqueIdByUUId()+suffixName; // 新文件名
        SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");//根据上传日期创建一个文件夹
        String ymd=sdf.format(new Date());//时间拼接给ymd
        filePath+="/"+ymd+"/";//把时间拼接成文件夹
        String files="images"+"/"+ymd+"/"+fileName;//根据images和配置文件映射路径才能找到图片,后面拼接时间文件夹及名称找到每一个图片
        String filePaths=filePath+fileName;//把最终路径拿到
        File dest=new File(filePaths);//路径给到File进行创建
        try {
        if(!dest.exists()){//如果不存在就进行创建
            dest.mkdirs();
        }
        //根据拿到的对象进行循环
        for(int i=0;i<file.length;i++) {
            MultipartFile multipartfile=file[i];
            //拿到对象在指定路径创建图片
            multipartfile.transferTo(new File(filePaths));
        }
        }catch (IOException e){
            e.printStackTrace();
        }catch (Exception e){
            e.printStackTrace();
        }
        return files;
    }

9 图片资源映射，映射本地绝对路径给程序(一般用于图片存本地)

**
 * @author
 * @version V1.0
 * @date 2019年11月29日
 * 映射图片本地路径
 * @images/**表示数据库存储内容必须有images开头下的内容才可以查询到
 * @filefile:D:/Images/表示映射绝对路径文件存在D盘下
 */
@Configuration
public class ApplicationConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //Windows下
        //UploadFile.uploadImage(file)
        registry.addResourceHandler("/images/**").addResourceLocations("file:D:/Images/");
        super.addResourceHandlers(registry);
    }

}

10 input 输入框值改变进行查询 js绑定事件：

 $('#imageTitle').bind('input propertychange', function () {//给事件一个值进行绑定
        selectImages()//方法
    });

11 下拉框值改变进行查询 js绑定事件：

 $("select").change(function () {//动态获取select选中值传给查询条件
        imagesTypeId = $(this).val();
        selectImages();
    });