输入筛选框搜索

文章目录

  • 输入筛选框实现
    • 效果图
    • 需求
    • 前端
      • 工具版本
        • 添加依赖
        • main.js导入依赖
      • 代码
    • 后端代码
      • 对应 sql
      • 对应 mapper.xml 文件的动态 sql

输入筛选框实现

效果图

在这里插入图片描述

需求

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

前端

工具版本

  • 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 即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

照片回收站是什么?恢复照片就靠这3招!

“我电脑里本来保存了很多照片&#xff0c;但我不小心给删除了&#xff0c;还能恢复吗&#xff1f;由于本人是个电脑新手&#xff0c;求一些简单的方法。感谢&#xff01;” 在照片拍摄后&#xff0c;很多朋友可能会选择在电脑上对照片进行保存。但是由于各种原因&#xff0c;电…

Simulink仿真模块-Signal Builder

目录 说明 实例 Signal Builder是创建和生成可交替的具有分段线性波形的信号组。 在仿真库中的位置为:Simulink / Sources说明 Signal Builder 模块允许创建可交替的分段线性信号源组,并在模型中使用。可以快速将信号组切换入模型或切换出模型,以便于测试。在 Signal Buil…

Linux【网络编程】之深入理解TCP协议

Linux【网络编程】之深入理解TCP协议 TCP协议TCP协议段格式4位首部长度---TCP报头长度信息 TCP可靠性&#xff08;确认应答&#xff09;&& 提高传输效率确认应答(ACK)机制32位序号与32为确认序号 16位窗口大小---自己接收缓冲区剩余空间的大小16位紧急指针---紧急数据处…

无涯教程-Lua - 文件I/O

I/O库用于在Lua中读取和处理文件。 Lua中有两种文件操作&#xff0c;即隐式(Implicit)和显式(Explicit)操作。 对于以下示例&#xff0c;无涯教程将使用例文件test.lua&#xff0c;如下所示。 -- sample test.lua -- sample2 test.lua 一个简单的文件打开操作使用以下语句。…

改进的智能优化算法定性分析:种群多样性分析(Analysis of the population diversity)

目录 一、智能优化算法改进种群多样性分析 二、GWO与IGWO种群多样性对比 三、GWO与改进的GWO1种群多样性分析 四、代码获取 一、智能优化算法改进种群多样性分析 为了验证所提出的IDMO中种群多样性的丰富性&#xff0c;我们使用下式计算本节中的种群多样性。这个式…

Java并发系列之四:重中之重AQS

上一期我们介绍了乐观锁&#xff0c;而乐观锁的本质即是CAS&#xff0c;操作系统提供了支持CAS修改内存值的原子指令&#xff0c;所以乐观锁得以实现。从软件工程的角度去看&#xff0c;虽然底层已经通过CAS实现了乐观锁&#xff0c;Java的底层已经在Unsafe这个类中封装了compa…

《Java极简设计模式》第02章:抽象工厂模式(AbstractFactoty)

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 源码地址&#xff1a;https://github.com/binghe001/java-simple-design-patterns/tree/master/j…

3.病人排队

【题目】 病人登记看病&#xff0c;编写一个程序&#xff0c;将登记的病人按照以下原则排出看病的先后顺序&#xff1a; 老年人&#xff08;年龄 > 60岁&#xff09;比非老年人优先看病。 老年人按年龄从大到小的顺序看病&#xff0c;年龄相同的按登记的先后顺序排序。 非…

flask中实现restful-api

flask中实现restful-api 举例&#xff0c;我们可以创建一个用于管理任务&#xff08;Task&#xff09;的API。在这个例子中&#xff0c;我们将有以下API&#xff1a; GET /tasks: 获取所有任务POST /tasks: 创建一个新的任务GET /tasks/<id>: 获取一个任务的详情PUT /t…

prometheus+grafana进行服务器资源监控

在性能测试中&#xff0c;服务器资源是值得关注一项内容&#xff0c;目前&#xff0c;市面上已经有很多的服务器资 源监控方法和各种不同的监控工具&#xff0c;方便在各个项目中使用。 但是&#xff0c;在性能测试中&#xff0c;究竟哪些指标值得被关注呢&#xff1f; 监控有…

appium自动爬取数据

爬取类容&#xff1a;推荐知识点中所有的题目 爬取方式&#xff1a;appium模拟操作获取前端数据 入门级简单实现&#xff0c;针对题目和答案是文字内容的没有提取出来 适用场景;数据不多&#xff0c;参数加密&#xff0c;反爬严格等场景 from appium import webdriver impor…

git 常用命令有哪些

Git 是我们开发工作中使用频率极高的工具&#xff0c;下面总结下他的基本指令有哪些&#xff0c;顺便温习一下。 前言 一般项目中长存2个分支&#xff1a; 主分支&#xff08;master&#xff09; 和开发分支&#xff08;develp&#xff09; 项目存在三种短期分支 &#xff1a…

Linux安装MySQL 8.1.0

MySQL是一个流行的开源关系型数据库管理系统&#xff0c;本教程将向您展示如何在Linux系统上安装MySQL 8.1.0版本。请按照以下步骤进行操作&#xff1a; 1. 下载MySQL安装包 首先&#xff0c;从MySQL官方网站或镜像站点下载MySQL 8.1.0的压缩包mysql-8.1.0-linux-glibc2.28-x…

快速WordPress个人博客并内网穿透发布到互联网

快速WordPress个人博客并内网穿透发布到互联网 文章目录 快速WordPress个人博客并内网穿透发布到互联网 我们能够通过cpolar完整的搭建起一个属于自己的网站&#xff0c;并且通过cpolar建立的数据隧道&#xff0c;从而让我们存放在本地电脑上的网站&#xff0c;能够为公众互联网…

分享 一个类似 ps 辅助线功能

效果图片&#xff1a; 提示&#xff1a;这里的样式我做边做了修改&#xff0c;根据个人情况而定。 //你也可以npm下载 $ npm install --save vue-ruler-tool特点 没有依赖可拖动的辅助线快捷键支持 开始使用 1. even.js /*** description 绑定事件 on(element, event, han…

通用商城项目(中)

金山编译器出问题了。下面段落标号全出问题了&#xff0c;排版也出问题了。懒得改了。 使用对象存储OSS&#xff0c;保存品牌logo 新建Module&#xff0c;提供上传、显示服务 有些不明所以的&#xff0c;按照steinliving-commodity配置了一通pom.xml 新建application.yml&…

【NLP概念源和流】 06-编码器-解码器模型(6/20 部分)

一、说明 在机器翻译等任务中,我们必须从一系列输入词映射到一系列输出词。读者必须注意,这与“序列标记”不同,在“序列标记”中,该任务是将序列中的每个单词映射到预定义的类,如词性或命名实体任务。 作者生成 在上面的

【嵌入式学习笔记】嵌入式入门3——串口

1.数据通信的基础概念 1.1.串行/并行通信 数据通信按数据通信方式分类&#xff1a;串行通信、并行通信 1.2.单工/半双工/全双工通信 数据通信按数据传输方向分类&#xff1a;单工通信、半双工通信、全双工通信 单工通信&#xff1a;数据只能沿一个方向传输半双工通信&…

防雷工程行业应用和施工工艺

防雷工程是指通过各种手段和措施&#xff0c;保护建筑物、设备和人员免受雷电侵害的技术。在我国&#xff0c;由于雷电活动频繁&#xff0c;防雷工程的重要性不言而喻。地凯科技将介绍防雷工程的基本知识、相关案例以及防雷器产品。 一、防雷工程的基本知识 雷电的危害 雷电…

真机搭建中小网络

这是b站上的一个视频&#xff0c;演示了如何搭建一个典型的中小网络&#xff0c;供企业使用 一、上行端口&#xff1a;上行端口就是连接汇聚或者核心层的口&#xff0c;或者是出广域网互联网的口。也可理解成上传数据的端口。 二、下行端口&#xff1a;连接数据线进行下载的端…