输入筛选框搜索

输入筛选框实现

效果图

需求

通过筛选框，选择公司，传入后端，后端根据公司名称去文章的内容中进行模糊查询

前端

工具版本

• node.js v16.6.0
• vue3

ui 使用 Element-Plus 实现

添加依赖

在 package.json 添加依赖，并 npm i 导入

"element-plus": "^1.1.0-beta.15",

main.js导入依赖

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'; // 使用 createApp 替换 Vue 的导入方式
import App from './App.vue';... const app = createApp(App); // 使用 createApp 创建 Vue 应用
app.use(ElementPlus)
app.mount('#app'); // 挂载 Vue 应用到 DOM 节点

代码

<el-selectv-model="companyCondition"multiplefilterableplaceholder="选择公司"style="width: 240px"collapse-tagsclearable@change="handleChangeCompany"
><el-optionv-for="item in companyOptions":key="item.value":label="item.label":value="item.value"/>
</el-select>

// script 对应数据
const companyOptions = ref([])
companyOptions.value = [{value: '阿里巴巴', label: '阿里巴巴'}, {value: '腾讯', label: '腾讯'}, {value: '字节跳动', label: '字节跳动'}]
let companyCondition = ref("")// 公司筛选框
const handleChangeCompany = () => {console.log(companyCondition.value)let condition = {pageNo: page.value,pageSize: size.value,param: {company: companyCondition.value}}// 使用 axios 向后端发送请求进行查询axios.post('/interview-experience/selectByCondition',condition).then(res => {console.log(res)// ...})
}

后端代码

前端发送查询的 company 名称为数组，后端使用 like 进行查询，通过 or 拼接即可

前端传入数据格式为：

param: {company: ['公司1', '公司2', '公司3']
}

对应 sql

select * from article where article.job_id = ? and (article.content like '公司1' or article.content like '公司2' or article.content like '公司3')

对应 mapper.xml 文件的动态 sql

<select id="selectByCondition" parameterType="com.javagpt.back.dto.InterviewArticleDto" resultMap="ArticleVOMap">select article.id                id,article.user_id           user_id,article.title             title,article.new_title         new_title,article.content           content,article.new_content       new_content,article.type              type,article.status            status,article.has_edit          has_edit,article.is_anonymous_flag is_anonymous_flag,article.create_at         create_at,article.edit_time         edit_time,article.job_id            job_id,article.content_type      content_type,article.source_id         source_id,career.name               career_namefrom interview_experience_article articleleft join career career on article.job_id = career.id<where><if test="dto.jobId != null and dto.jobId != ''">and article.job_id = #{dto.jobId,jdbcType=INTEGER}</if><if test="dto.company != null and dto.company.size > 0">and (<trim prefixOverrides="or"><foreach collection="dto.company" item="company">or article.content like concat('%',#{company,jdbcType=VARCHAR},'%')</foreach></trim>)</if></where>
</select>

在动态 sql 中 dto.company 就是我们通过前端传入的 param.company 的数组，不要关心命名，看一下动态 sql 怎么写就可以。

我们这里说的是第二个 <if> 标签里的语句

注意：

1. <where> 标签可以过滤掉后边的第一个 and，因此 <if> 标签中可以直接添加 and，但是这里我们要拼接多个 or ，所以还要在外边加上左括号 ( ，因此这里 and 要和 左括号中间距离一个空格，要不然 where 标签过滤不掉后边的第一个 and。
2. <foreach> 标签要生成多个 or 语句，因此每个语句前边都直接添加上 or，通过 <trim> 标签的 prefixOverrides 来去掉后边的第一个 or 即可