vue springboot mybatis实现自定义条件检索功能

文章目录

概要

部门需求,要求检索可以实现,自选检索字段、检索条件、参数。并且在页面不要冗余显示。

整体流程

1.前端效果

前端部分通过组件实现,下拉选项 由字典提供。

2.后端

这一部分由mybatis拼接后,进行sql查询

技术细节

2.1检索条件的映射

java 复制代码
    <!-- 字段映射片段  -->
    <sql id="searchCondition">
        <choose>
            <when test="${searchKey} == 'code'"> //此处就是对应的字段
                <include refid="buildCondition">
                    <property name="column" value="code"/>
                    <property name="searchType" value="${searchType}"/>//选择的参数
                    <property name="inputA" value="${inputA}"/>//检索的数值
                    <property name="inputB" value="${inputB}"/>//检索的数值多选
                </include>
            </when>
        </choose>
    </sql>

2.2 可复用的条件构建片段

java 复制代码
    <!-- 可复用的条件构建片段 -->
    <sql id="buildCondition">
        <choose>
            <when test="${searchType} == 'dayu'">
                and ${column} &gt; #{${inputA}}
            </when>
            <when test="${searchType} == 'dayudengyu'">
                and ${column} &gt;= #{${inputA}}
            </when>
            <when test="${searchType} == 'isnull'">
                and ${column} is null
            </when>

            <when test="${searchType} == 'isnotnull'">
                and ${column}  is not null
            </when>
        </choose>
    </sql>

2.3检索语句的使用

java 复制代码
  <select id="selectList" parameterType="listParameter" resultMap="listParameterResult">
  select * from 
   <where>
                   <include refid="searchCondition"> //有多个就对应创建多个
                    <property name="searchKey" value="params.searchKey1"/>//我是用数字区分
                    <property name="searchType" value="params.searchType1"/>
                    <property name="inputA" value="params.searchInputA1"/>
                    <property name="inputB" value="params.searchInputB1"/>
                </include>
                 </where>
                    </select>
相关推荐
xcs194057 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
雪芽蓝域zzs11 小时前
第 5 节:Marker 点击弹出 InfoWindow 信息窗口
vue.js
十年Java程序媛11 小时前
Java 接口和抽象类对比|Java8 新特性,抛弃老旧八股,正确选型
java·spring boot·后端
大包子13 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
for_ever_love__13 小时前
MySQL 高频面试题 30 问:索引、事务、锁、日志、主从与分库分表(MySQL 8.0 版)
java·数据库·spring boot·mysql·spring cloud·面试·总结
SL_staff14 小时前
设备越多系统越崩?根源在三层抽象失效
spring boot·物联网·github
雪芽蓝域zzs14 小时前
第 3 节:地图点击事件,点击获取经纬度
vue.js
WayneX14 小时前
开源 Vue 3 组件库 Morya UI:把组件、文档、AI 工具链一起做进一个包
前端·vue.js·前端框架
威哥爱编程14 小时前
【AI全栈12-01】Spring Boot 为何是 AI 全栈后端优选
java·spring boot·后端
威哥爱编程14 小时前
【AI全栈12-03】Spring Boot 用多模型路由把智能客服成本降下来
java·spring boot·后端