Mysql使用concat函數實現關鍵字模糊查詢功能(列表資料過濾含前後端程式碼)

2023-11-02 06:00:44

前言

不知道大家在開發中有沒有這樣的經歷：根據條件過濾列表資料項。

這種的條件少的還好，比如根據姓名或者性別過濾，這樣不僅頁面會稍微美觀一些，對於sql的壓力以及後端的程式碼量也是會輕鬆不少的。

但是條件多了，條件1，條件2，條件3…條件100，這時候後端的介面就會一個一個的if判斷，不斷的追加條件(做為後端開發深有體會，頭大)

我給大家簡單畫個圖，大家就明白了：

那麼有沒有一種方式，可以又美化頁面，不增加使用者的視覺疲勞，又能做到只輸入一個關鍵字，就能將全部的資料按照輸入的關鍵字進行過濾，從而只留下符合關鍵字資訊的呢。

當然有，今天在做自己專案的時候就遇到了這個問題，正好藉著這個機會分享我的思路以及相關的程式碼。

頁面佈局

關於頁面佈局，正如上述，我只需要留下一個輸入框，用來過濾列表資料：

sql編寫

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

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

具體sql格式為：

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

這樣就可以實現，根據x這個值對a,b,c這三個欄位進行過濾了。

下面是一個實戰的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那麼嚴格

後端程式碼

有個這個思路，程式碼就簡單了，相關程式碼如下：

controller

 @GetMapping(value = "/queryList")
    public Result queryList(String keyWord) {
        // 根據關鍵字模糊查詢展示列表資料
        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>

介面測試

這時候介面就寫完了，可以自己簡單測試下：

有引數

無參

前端程式碼

介面寫完了，直接呼叫即可。

由於我前端程式碼較多，大多數是和這個業務無關的程式碼，所以下面只貼上關鍵程式碼，程式碼格式可能不太多，自行調整即可

   <el-input v-model="keyWord" placeholder="請輸入關鍵字" clearable  class="keyWordText"></el-input>
   <el-button type="primary" icon="el-icon-search"  @click="queryUserList">搜尋</el-button>


 data() {
    return {
        keyWord:'', // 輸入框關鍵字
    	userTableData: [], // 使用者列表
      },


  // 展示使用者列表    
  methods: {  
    queryUserList() {
       axios.get('http://localhost:9090/user/queryList', {
          // 傳遞的引數
          params: {
            keyWord:this.keyWord
          }
          // 回撥函數,一定要使用箭頭函數,不然this的指向不是vue範例
          }).then(res =>{
            // 請求成功後的資料返回給使用者列表用於展示
             this.userTableData = res.data.data;
          }).catch(error =>{
             console.log(error)
          })
    }
   }
 mounted() {
    // 頁面載入就渲染使用者列表
    this.queryUserList();
  },