前端

html

<!-- 搜索 -->
        <div style="margin-top: 15px">
          <el-select style="width: 150px" v-model="select" placeholder="请选择">
            <el-option label="歌手列表" value="list"></el-option>
            <el-option label="歌手名" value="singer_name"></el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            v-model="query_name"
            class="input-with-select"
            :clearable="true"
            @clear="query_clear"
            style="width: 550px"
            :disabled="select === 'list' ? true : false"
          >
            <!-- <el-button
              slot="append"
              @click="query"
              icon="el-icon-search"
            ></el-button> -->
          </el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
            :disabled="select === 'list' ? true : false"
            >搜索</el-button
          >
        </div>
//分页
<div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pagination.pageIndex"
          :page-size="pagination.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>

 

js

//清除输入框内容
    query_clear() {
      this.freshList();
      this.pageTotal = 1;
      this.select = "list";
      this.pagination.pageIndex = 1;
    },
// 触发搜索按钮
    handleSearch() {
      this.pagination.pageIndex = 1;
      this.query();
    },
query() {
      let text = this.query_name;
      let query_mode = this.select;
      let _this = this;
    //   this.pagination.pageIndex = 1;

      if (text != "") {
        if (query_mode === "singer_name") {
          this.$axios
            .get(
              "http://localhost:8181/admin/singer/findBySingerName/" +
                (_this.pagination.pageIndex - 1) * _this.pagination.pageSize +
                "/" +
                _this.pagination.pageSize +
                "/" +
                text
            )
            .then(function (resp) {
              console.log(resp);
              switch (resp.data.status) {
                case 200: {
                  _this.pageTotal = resp.data.data.singerCount;
                  _this.current_list = resp.data.data.singerList;
                  _this.$message.success("查找成功！");
                  break;
                }
                case 400: {
                  _this.$message.error(resp.data.msg);
                  _this.$router.push("login");
                  break;
                }
              }
            });
        }
      }

      else{
          this.$message.warning("请输入内容！");
      }
    },
  },
 
// 分页导航
    handlePageChange(val) {
      console.log("handlePageChange",val);
      this.pagination.pageIndex = val;
      this.current_list = [];
      if (this.select != "list") {
        if(this.query_name != ''){
            this.query();
        }
        else{
            this.pageTotal = 1;
        }
      } else {
        this.freshList();
      }
    },

 后端

controller

//查询歌曲：歌手名
    @GetMapping({"/admin/music/findBySingerName/{currentPage}/{pageSize}/{singer_name}"})
    public Result findBySingerName(@PathVariable Integer currentPage, @PathVariable Integer pageSize,@PathVariable String singer_name){
        MyParameter parameter = new MyParameter();
        parameter.setSinger_name(singer_name);

        return musicService.findBySingerName(currentPage,pageSize,parameter);
    }

service

@Override
    public Result findBySingerName(Integer cp, Integer ps, MyParameter myParameter){
        Map<String,Object> resp = new HashMap<>();
//        System.out.println(music);
        resp.put("musicCount",mapper.getCountByParameter(myParameter));
        resp.put("musicList", mapper.getMusicByParameter(cp,ps,myParameter));

        return Result.ok(resp);
    }

mapper

<select id="getMusicByParameter" resultType="map">
        select s.singer_name,m.id, m.music_name, m.music_lyrics
        , m.music_createdate as music_createDate,m.music_src
        , m.music_photosrc as music_photoSrc , m.music_introduction, m.music_class,
        m.music_downloadscore as music_downloadScore, m.musicvideo_id, m.singer_id
        from music m,singer s
        <where>
            <if test="parameter.singer_name != null">
                s.singer_name like "%"#{parameter.singer_name}"%" and
            </if>

            <if test="parameter.music_name != null">
                m.music_name like "%"#{parameter.music_name}"%" and
            </if>

            m.singer_id = s.id
        </where>

        limit #{currentPage},#{pageSize}
    </select>