快捷導(dǎo)航

Mysql使用concat函數(shù)實(shí)現(xiàn)關(guān)鍵字模糊查詢功能(列表數(shù)據(jù)過(guò)濾含前后端代碼)

更新時(shí)間：2023年02月14日 09:31:30 作者：小花皮豬

在我們的平時(shí)開發(fā)中經(jīng)常會(huì)遇到根據(jù)條件過(guò)濾列表數(shù)據(jù)項(xiàng)，今天在做自己項(xiàng)目的時(shí)候就遇到了這個(gè)問(wèn)題，正好借著這個(gè)機(jī)會(huì)分享我的思路以及相關(guān)的代碼，對(duì)Mysql使用concat函數(shù)實(shí)現(xiàn)關(guān)鍵字模糊查詢功能感興趣的朋友一起看看吧

前言

不知道大家在開發(fā)中有沒(méi)有這樣的經(jīng)歷：根據(jù)條件過(guò)濾列表數(shù)據(jù)項(xiàng)。

這種的條件少的還好，比如根據(jù)姓名或者性別過(guò)濾，這樣不僅頁(yè)面會(huì)稍微美觀一些，對(duì)于sql的壓力以及后端的代碼量也是會(huì)輕松不少的。

但是條件多了，條件1，條件2，條件3…條件100，這時(shí)候后端的接口就會(huì)一個(gè)一個(gè)的if判斷，不斷的追加條件(做為后端開發(fā)深有體會(huì)，頭大)

我給大家簡(jiǎn)單畫個(gè)圖，大家就明白了：

那么有沒(méi)有一種方式，可以又美化頁(yè)面，不增加使用者的視覺(jué)疲勞，又能做到只輸入一個(gè)關(guān)鍵字，就能將全部的數(shù)據(jù)按照輸入的關(guān)鍵字進(jìn)行過(guò)濾，從而只留下符合關(guān)鍵字信息的呢。

當(dāng)然有，今天在做自己項(xiàng)目的時(shí)候就遇到了這個(gè)問(wèn)題，正好借著這個(gè)機(jī)會(huì)分享我的思路以及相關(guān)的代碼。

頁(yè)面布局

關(guān)于頁(yè)面布局，正如上述，我只需要留下一個(gè)輸入框，用來(lái)過(guò)濾列表數(shù)據(jù)：

sql編寫

那sql就不能無(wú)腦使用xxx like xxx and xxx like xxx 這種格式了。

告訴大家一個(gè)小技巧，msql的模糊查詢是可以配合concat函數(shù)一起使用的。

具體sql格式為：

select a,b,c from table concat(a,b,c) like oncat('%',x,'%')

這樣就可以實(shí)現(xiàn)，根據(jù)x這個(gè)值對(duì)a,b,c這三個(gè)字段進(jìn)行過(guò)濾了。

下面是一個(gè)實(shí)戰(zhàn)的sql:

select id, sex, user_name,nick_name,birthday,image,account,password,phone,address,create_time,update_time,is_delete,status from t_user 
where concat(user_name,nick_name,birthday,account,phone,address,remark) like concat('%','雪','%')order by id desc

備注：查詢出的字段和concat的字段不一定非要是完全匹配的
比如你可以直接查詢a,b,c,d,e 但是只concat(a,e)也是可以的,不需要像union all那么嚴(yán)格

后端代碼

有個(gè)這個(gè)思路，代碼就簡(jiǎn)單了，相關(guān)代碼如下：

controller

 @GetMapping(value = "/queryList")
    public Result queryList(String keyWord) {
        // 根據(jù)關(guān)鍵字模糊查詢展示列表數(shù)據(jù)
        return Result.ok(userService.queryUserInfo(keyWord));
    }

service/impl

 List<User>  queryUserInfo(String keyWord);

 public List<User> queryUserInfo(String keyWord) {
        return userMapper.queryUserInfo(keyWord);
    }

mapper/xml

 List<User> queryUserInfo(@Param("keyWord") String keyWord);
 <select id="queryUserInfo" resultType="com.wyh.entity.User">
        select
        id,
        sex,
        user_name,
        nick_name,
        birthday,
        image,
        account,
        password,
        phone,
        address,
        remark,
        create_time,
        update_time,
        is_delete,
        status
        from t_user
        <where>
            is_delete = 0
            <if test="keyWord !=null and keyWord !=''">
                and concat(id,sex,user_name,nick_name,birthday,image,account, password,phone, address,
                remark, create_time,update_time,is_delete,status) like concat( '%',#{keyWord},'%')
            </if>
        </where>
        order by id desc
    </select>

接口測(cè)試

這時(shí)候接口就寫完了，可以自己簡(jiǎn)單測(cè)試下：

有參數(shù)

無(wú)參

前端代碼

接口寫完了，直接調(diào)用即可。

由于我前端代碼較多，大多數(shù)是和這個(gè)業(yè)務(wù)無(wú)關(guān)的代碼，所以下面只粘貼關(guān)鍵代碼，代碼格式可能不太多，自行調(diào)整即可

   <el-input v-model="keyWord" placeholder="請(qǐng)輸入關(guān)鍵字" clearable  class="keyWordText"></el-input>
   <el-button type="primary" icon="el-icon-search"  @click="queryUserList">搜索</el-button>


 data() {
    return {
        keyWord:'', // 輸入框關(guān)鍵字
    	userTableData: [], // 用戶列表
      },


  // 展示用戶列表    
  methods: {  
    queryUserList() {
       axios.get('http://localhost:9090/user/queryList', {
          // 傳遞的參數(shù)
          params: {
            keyWord:this.keyWord
          }
          // 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
          }).then(res =>{
            // 請(qǐng)求成功后的數(shù)據(jù)返回給用戶列表用于展示
             this.userTableData = res.data.data;
          }).catch(error =>{
             console.log(error)
          })
    }
   }
 mounted() {
    // 頁(yè)面加載就渲染用戶列表
    this.queryUserList();
  },

測(cè)試效果

既然代碼都寫完了，那就試試看吧，下面為幾個(gè)測(cè)試截圖：

坑：

經(jīng)過(guò)測(cè)試有一個(gè)坑，那就是如果concat中的字段值有空的，可能導(dǎo)致查詢不到該數(shù)據(jù)，就會(huì)造成一個(gè)假象，明明數(shù)據(jù)和sql是對(duì)的，就是查不出來(lái)。

例如：

關(guān)于解決方案，目前的只想到一種，就是把數(shù)據(jù)填滿，盡量不要有空。

感覺(jué)這個(gè)方案不完善，如果你有好的主意，歡迎評(píng)論告訴我

總結(jié)

其實(shí)用起來(lái)還是挺方便簡(jiǎn)單的，實(shí)際開發(fā)中還是要聽從產(chǎn)品或者項(xiàng)目總監(jiān)的為好。

到此這篇關(guān)于Msql使用concat函數(shù)實(shí)現(xiàn)關(guān)鍵字模糊查詢(列表數(shù)據(jù)過(guò)濾-附前后端代碼)的文章就介紹到這了,更多相關(guān)Msql concat函數(shù)模糊查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: