Java项目实战第11天：搜索功能的实现

╰半橙微兮° 2022-11-24 12:58 214阅读 0赞

### 目录 ###

*   *   *  
     *  一、sql语句动态拼接
     *  二、前后台代码编写
     *  三、搜索框数据回填
     *  最后

###  ###

今天是刘小爱自学Java的第110天。

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

![format_png][]

事先说明：关于今天的搜索功能实现。

并没有使用到倒排索引这样的主流搜索技术，就一个普通的模糊查询。

在此之前，先学一个小的知识点，sql语句动态拼接。

## 一、sql语句动态拼接 ##

我们编写sql语句，一般都是通过预编译查询，使用问号这个通配符”？“

但是有的时候会存在某个参数不存在的情况，比如说这一次查询前端传来了3个参数，下一次却只传了2个参数。

面对这个问题，那该怎么办呢？

就需要使用到sql语句的动态拼接了，代码编写如下：

![format_png 1][]

①sql语句中的cid这个参数是不确定的，有时有，有时可能没有。

**②StringBuilder的使用**

先将sql语句中确定的部分存放到StringBuilder中，再创建一个集合存放参数。

**③对cid做出判断**

如果cid不为空且存在，就在sql语句中拼接“ and cid = ?”，同时将cid存入参数集合中。

**④拼接cid后面其它的参数**

在sql语句中拼接“ limit ?,?”，然后将另外两个固定参数存入集合。

**注意**：sql拼接过程中空格不要忘记了，总之要保证拼接后的sql要和①中的一样，通过debug可以查看。

**⑤查询数据**

将动态存放sql语句的StringBuilder转换成字符串，将存放参数的集合转换成数组，再使用jdbcTemp查询。

## 二、前后台代码编写 ##

**1业务分析**

我们要找到搜索框所在的静态页面，如下图：

![format_png 2][]

要解决两个问题：

①是我们要给搜索绑定一个点击事件，点击之后就会跳转到route\_list页面，展示查询到的对应数据。

绑定的函数为queryByRname()

②我们要获取搜索框中输入的数据。

这里就可以通过层级选择器$(“.search input”)选中搜索框对应的标签。

**2前端代码实现**

定义函数queryByRname()

![format_png 3][]

**①获取搜索框中的内容**

使用层级选择器，调用jQuery的val()方法可以获取对应标签中的数据，这里也就是搜索框。

**②跳转route\_list.html页面**

location.href即可跳转对应页面。同时将rname作为参数传递给后台。

**③route\_list.html页面代码**

在②中跳转是携带了一个参数，自然是需要获取该参数，再将其增加到服务器请求参数中。

其中要将参数进行解码，因为浏览器会自动将在搜索框中输入的数据进行编码。

使用decodeURL()功能即可完成编码。

**3后台接受该参数**

在已有的业务逻辑基础上添加参数即可

![format_png 4][]

只需要在web层中增加获取rname这个数据的代码。

同时在将其作为参数传递给service层，而service层也增加该参数去dao层查询。

其它代码都不用改变，只是增加了一个rname参数。

![format_png 5][]

同样的道理，在dao层中也动态拼接sql查询语句。

总之可以先写出完整的sql语句，再动态拼接rname这个参数。

检查方式就可以通过debug来判断sql语句拼接的是否正确。

## 三、搜索框数据回填 ##

我们在搜索框中输入信息之后，点击搜索，搜索框的内容会消失。

而事实上都应该还会存在，那该怎么办呢？

就需要考虑到数据回填：

![format_png 6][]  
大致的一个思路是：

获取搜索框中的数据后，将其重新设定到对应的标签中。

其中值得注意的是：

参数要解码，以及要绑定页面加载事件。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: /images/20221124/020b6dfd4ae145328be43c0df6fa79dc.png
[format_png 1]: /images/20221124/72e37c4869834e468182565b9b1ba9a4.png
[format_png 2]: /images/20221124/40d64bcea54f4e96acbd77c086d6543b.png
[format_png 3]: /images/20221124/5f59ffe4903b41108863cc09c7c7ae99.png
[format_png 4]: /images/20221124/f9a699d228f8414dba0431f77e5b1376.png
[format_png 5]: /images/20221124/4c27ba1cd096473aaa879afd98324a3e.png
[format_png 6]: /images/20221124/e7d422e0ffae489487d3f5b61bba69de.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 Elasticsearch搜索功能的实现——实战篇

实战环境 elastic search 8.5.0 + kibna 8.5.0 + springboot 3.0.2 + spring data elasticsearch

布满荆棘的人生/ 2023年09月26日 21:52/ 0 赞/ 137 阅读

相关 Java项目实战第8天：分页查询功能

今天是刘小爱自学Java的第107天。感谢你的观看，谢谢你。话不多说，开始今天的学习： ![format_png][] 一、分页概述我们现在在网络上查询数

你的名字/ 2023年03月06日 03:19/ 0 赞/ 18 阅读

相关 Java项目实战第7天：导航栏业务的实现

目录一、代码编写二、前端渲染最后今天是刘小爱自学Java的第106天。感谢你的观看，谢

布满荆棘的人生/ 2023年03月04日 09:27/ 0 赞/ 26 阅读

相关 Java项目实战第5天：邮箱激活业务

目录一、Java发送邮箱二、发送邮件及测试三、邮箱激活业务实现最后今天是刘

刺骨的言语ヽ痛彻心扉/ 2023年03月03日 11:25/ 0 赞/ 177 阅读

相关 Java项目实战第4天：注册功能的实现

目录一、前端发送注册请求二、Servlet优化三、注册业务完善最后今天是刘

清疚/ 2023年03月03日 05:58/ 0 赞/ 19 阅读

相关 sql第11天

(1）查找istester表，按id降序 ![在这里插入图片描述][20200528190708297.png] (2）查找idoxu表，按grade升序 ![在这

「爱情、让人受尽委屈。」/ 2023年02月13日 11:25/ 0 赞/ 11 阅读

相关微服务项目第18天：实现图片上传功能

目录一、创建upload微服务二、后台代码编写三、图片域名及测试最后今天是

左手的ㄟ右手/ 2022年12月04日 15:56/ 0 赞/ 183 阅读

相关 Java项目实战第12天：页面详情的实现

目录一、业务分析二、后台代码编写三、前端页面解析最后今天是刘小爱自学Jav

迷南。/ 2022年11月25日 00:45/ 0 赞/ 233 阅读

相关 Java项目实战第11天：搜索功能的实现

目录一、sql语句动态拼接二、前后台代码编写三、搜索框数据回填最后今天是刘

╰半橙微兮°/ 2022年11月24日 12:58/ 0 赞/ 215 阅读

相关实习第11天

今天终于有了进步，对ant的xml脚本也有了简明的掌握，Jenkins+Ant的配置也终于搞定了，剩下的就是尽量把一些路径写入环境变量，第一套android自动化编译的

- 日理万妓/ 2022年06月09日 05:11/ 0 赞/ 162 阅读