vue+springboot+mybatis多条件查询(一)

远程搜索
远程搜索示例
在输入框输入内容时会在下拉框中显示相关内容,使用element-ui的<el-autocomplete>组件。
前端vue代码如下:

<el-form-item label="物料编码">
        <el-autocomplete
          v-model="searchSupplyNumber"
          :fetch-suggestions="getListNumber"
          placeholder
          @select="handleSelect"
          suffix-icon="el-icon-search"
        ></el-autocomplete>
 </el-form-item>

注意:autocomplete只识别value字段,从后台获取的数组中每一个对象必须要有一个value字段
js代码:

getListNumber(queryString, cb) {
     this.$http({
       method: "post",
       url: "/api/findByNumber",
        params: {
          supplyNumber: queryString,
        }
     })
     .then(response =>{
       for(var i=0; i<response.data.length; i++) {
          response.data[i].value = response.data[i].supplyNumber;
       }
       cb(response.data);
     })
    },

后端springboot代码:
mapper.xml中:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.supply.mapper.SupplyMapper">
   <select id="findByNumber" resultType="com.demo.supply.entity.Supply">
        select distinct supply_number from supply where 1 = 1
        <if test="params.supplyNumber !=null and params.supplyNumber.trim() != ''">
            and supply_number like concat(concat('%',#{params.supplyNumber}),'%')
        </if>
    </select>
</MAPPER>

controller.java中:

@RestController
public class SupplyController {
    @RequestMapping("findByNumber")
    public List<Supply> findByNumber(@RequestParam Map<String, Object> params) {
        return supplyService.findByNumber(params);
    }
}

service.java中:

public interface SupplyService extends IService<Supply> {
    List<Supply> findByNumber(Map<String, Object> params);
}

serviceImpl.java中:

 @Service("SupplyService")
    public class SupplyServiceImpl extends ServiceImpl<SupplyMapper, Supply> implements SupplyService {
     @Override
      public List<Supply> findByNumber(Map<String, Object> params) {
        return baseMapper.findByNumber(params);
      }
   }

mapper.java中:

@Mapper
public interface SupplyMapper extends BaseMapper<Supply> {
    List<Supply> findByNumber(@Param("params") Map<String, Object> params);
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值