ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

毕设-element ui + springboot + mybatis 单条件查询模板

2021-04-17 19:33:14  阅读:308  来源: 互联网

标签:singer 毕设 springboot resp pagination element music query name


前端

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>

 

标签:singer,毕设,springboot,resp,pagination,element,music,query,name
来源: https://www.cnblogs.com/sk-lqbzblogs/p/14671860.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有