输入筛选框搜索

文章目录

  • 输入筛选框实现
    • 效果图
    • 需求
    • 前端
      • 工具版本
        • 添加依赖
        • 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位紧急指针---紧急数据处…

js 视频水印去除

参考文档&#xff1a;http://txapi.cn/api 收费 识别要解析的类型&#xff08;需要收费&#xff09; const axios require(axios) class Parse{// 初始化方法constructor() {this.token "Z1QljZOZiT4NTG" // token// 请求地址数组对象this.req_urls {dy: "…

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

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

Unity3D坐标与UI坐标转化差别过大

在UI Canvas的Render Mode模式是Screen Space-Camera模式极其容易3D坐标值转UI坐标出错。 **具体原因是&#xff1a;**Canvas的Rect Transform锁定&#xff0c;其Scale的倍数值不是1&#xff0c;所以导致从3D的坐标数值转换成UI坐标时就会出现问题。 正确做法&#xff1a; 1、 …

ChatGPT 是如何工作的:从预训练到 RLHF

欢迎来到人工智能的未来:生成式人工智能!您是否想知道机器如何学习理解人类语言并做出相应的反应?让我们来看看ChatGPT ——OpenAI 开发的革命性语言模型。凭借其突破性的 GPT-3.5 架构,ChatGPT 席卷了世界,改变了我们与机器通信的方式,并为人机交互开辟了无限可能。随着…

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

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

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

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

【BASH】回顾与知识点梳理(三)

【BASH】回顾与知识点梳理 三 三. 命令别名与历史命令3.1 命令别名设定&#xff1a; alias, unalias3.2 历史命令&#xff1a;history同一账号同时多次登入的 history 写入问题无法记录时间 三. 命令别名与历史命令 我们知道在早期的 DOS 年代&#xff0c;清除屏幕上的信息可以…

《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;年龄相同的按登记的先后顺序排序。 非…

Cirno‘s Perfect Equation Class 2023牛客暑期多校训练营5 D

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;有q次询问&#xff0c;每次给出三个整数k&#xff0c;c&#xff0c;n&#xff0c;求有多少满足条件的数对&#xff08;a&#xff0c;b&#xff09;满足kabc且c是b的倍数&#xff0c;且gcd(a,b)>n 1<q<100;…

Redis实现延时队列

缓存队列延时向接口报工&#xff0c;并支持多实例部署。 引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-data</artifactId><version>3.17.4</version> </dependency> 注入RedisClient …

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; 监控有…

c++ | const 对常量的绑定

这一块&#xff0c;感觉很真的不好描述。最好就是搬着primer去啃去理解了。 const 核心思想&#xff0c;就是const对象很多操作都被限制了。类型决定对象操作 const 常量引用&#xff0c;所引用的对象必须是确定的&#xff08;粗俗的讲就是字面值 常量&#xff09; const int …

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…