使用mybaits 处理 vue 页面多条件查询

Posted 2020-10-29 七彩的人生

需求

 

品类和品牌有二级联动

新建品类表 品牌表 建立关联关系  品牌里面有品类Id 

传统方法：进去页面的时候，查询品类List 放到页面 

vue 做法

//vue得到省份城市
  $(function(){
    var vm = new Vue({
      el : "#app",
      data : {
        categorys : [],
        brands : [],
        options:[]
      },
      created : function(){
        $.get("/admin/proqrcode/getCategoryList", function(data){
          vm.categorys = data.data
        }, "JSON");
      },
      methods : {
          changeCategory : function(event){
          $.get("/admin/proqrcode/getBrandList?categoryId=" + $(event.target).val(), function(data){
            vm.brands = data.data
          }, "JSON")
        },
      }
    });
    
  });

 

按钮

<div id="app">
        <input th:value="品类" style="width:7%;border:0px;text-align:center;" readonly="readonly"/>
            <!--一定要注意加v-on:change="changeProvince" -->
            <select id="category" name="categorys" class="form-control" style="display:inline-block" v-on:change="changeCategory">
                <option value="" th:text="请选择">请选择</option>
                <option v-for="c in categorys" value="{{c.id}}">{{c.category}}</option>
            </select>

        <input th:value="品牌" style="width:7%;border:0px;text-align:center;" readonly="readonly"/>

            <select id="brand" name="brand" class="form-control" style="display:inline-block">
                <option value="" th:text="请选择">请选择</option>
                <option v-for="b in brands" value="{{b.id}}">{{b.brand}}</option>
            </select>    
            
            <button id="btn-form" class="btn btn-info btn-xs" type="button"
                style="height: 30px; line-height: 10px; position: relative; top: -2px; margin-left: 60px;">
                <i class="glyphicon glyphicon-search"></i> <span
                    th:text="搜索">搜索</span>
            </button>    
    </div>            

 

这里遇到的问题

 

 如果前台直接传入baby care 这样的值，遇到了问题

因为值中间有空格，如果是调用服务的话会出现问题

Illegal character in query at index 136

所以传入 id 就避免了这个问题

value="{{b.id}}

搜索服务

public String read(@RequestParam Map<String, String> params)  {
        
        Map<String, Object> result = produceQrcodeService.list(params);
      
    }

用map 接收参数

品类 和 品类传入的参数都是id 我们需要根据id 查询对应的名称
然后作为查询的条件进行查询

if(params.get("categroy") != null){
            Category categroy = categoryMapper.selectByPrimaryKey(Integer.valueOf(params.get("categroy")));
            params.put("categroy", categroy.getCategory());
        }
        if(params.get("brand") != null){
            Brand brand = brandMapper.selectByPrimaryKey(Integer.valueOf(params.get("brand")));
            params.put("brand", brand.getBrand());
        }
    
        List<ProduceQrcode> list = proMapperCustom.queryList(params);

 

xml  

materialName 进行了模糊查询

    <select id="queryList" parameterType="java.util.Map"
            resultType="com.bizdata.lw.entity.ProduceQrcode">
        select * from POSM_LW_PRODUCE_QRCODE
        <where>
            <if test="materialName != null and materialName != \'\'">
                AND MATERIAL_NAME like  CONCAT(\'%\',#{materialName},\'%\')
            </if>
            <if test="itemqrcode != null and itemqrcode != \'\'">
                AND ITEMQRCODE=#{itemqrcode,jdbcType = VARCHAR}
            </if>
            <if test="categroy != null and categroy != \'\'">
                AND CATEGROY=#{categroy,jdbcType = VARCHAR}
            </if>
            <if test="brand != null and brand != \'\'">
                AND BRAND=#{brand,jdbcType = VARCHAR}
            </if>
        </where>    
    </select>

 

逆向工程做法，出现问题

if(params.get("billCode") != null){
            Criteria criteria = example.createCriteria();
            criteria.andBillCodeEqualTo(params.get("billCode"));
        }
        if(params.get("materialCode") != null){
            Criteria criteria = example.createCriteria();
            criteria.andMaterialCodeEqualTo(params.get("materialCode"));
        }
        if(params.get("itemqrcode") != null){
            Criteria criteria = example.createCriteria();
            criteria.andItemqrcodeEqualTo(params.get("itemqrcode"));
        }

开始采用了逆向工程的搜索，但是发现当这些条件都不为空的时候，并不会以and 形式去查询

and 必须是  criteria.and***.and***

这样才会是and 查询 否则都是以一个条件

 

mybaits 配置 实现数据库字段下划线 转成 驼峰属性

<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>  
        <!-- 打印查询语句 -->
        <setting name="logImpl" value="STDOUT_LOGGING" />
    </settings>