简单vue+springboot的多条件查询问题（数据回显不会写，求教）

Question

前言

想做个放吉他谱的小网站，sprigboot+vue，

my=民谣

现在想完成的功能：

根据谱名/作者名查询出来回显到下方列表中（url：my/findMys）

• 已完成部分：后端逻辑已经写好，且本地测试成功
  
  测试
  --- ## 不会的部分求解

• 前端vue部分 （axios已经封装）
  
  my.api (条件查询方法不知道有没有写错)

  import request from "@/utils/request"
  export default {
  // 分页获取列表
  search(page, size) {
      return request({
          url: `/my/list/search/${page - 1}/${size}`,
          method: 'post',
          // data: searchMap
      })
  },
  
  // 上方根据曲名和作者名模糊查询
  findMys(searchMap) {
      return request({
          url: `/my/findMys`,
          method: 'post',
          data: searchMap
      })
  }
  }
  

• my.vue（就是这不会写，那个搜索方法）

   <!-- 上方区域 -------------------------------------------------------------------------->
  <el-form  ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px;margin-left:70px">
    <el-form-item prop="name">
      <el-input v-model="searchMap.name" placeholder="曲谱名称" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item prop="author">
      <el-input v-model="searchMap.author" placeholder="作者名称" style="width:200px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" icon="el-icon-search" circle @click="findMys"></el-button>
      <el-button type="info" round @click="resetForm('searchForm')">重置</el-button>
      <!-- <el-button type="warning" round icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button> -->
    </el-form-item>
  </el-form>
  

  <script>
          import myApi from "@/api/my";
  
          export default {
              data() {
                  return {
                  list: [],
                      total: 0, // 总记录数
                      currentPage: 1, // 当前页, 默认第1页
                      pageSize: 10, // 每页显示条数， 10条
                      searchMap: {
                          name: "",
                          author: ""
                      }, 
                  };
              },
  
              // 钩子函数获取数据
              created() {
                  this.fetchData();
              },
              methods: {
              //列表获取
                  fetchData() {
                  myApi
                          .search(this.currentPage, this.pageSize)
                          .then(response => {
                              // const resp = response.data;
                              const resp = response.data;
                              this.total =resp.totalElements;
                              // this.total =resp.total;
                              this.list = resp.content;
                              // console.log(this.list);
                              console.log(response)
                          });
                  },
  
                      //  上方查询
                  findMys(){
                      myApi.findMys (this.searchMap).then(response => {
                              const resp = response.data.data;
                              // this.name =resp.name;
                              // this.author = resp.author;
                              this.searchMap = resp.content;
                          console.log(response)
                          });
                  },
  
                  //分页改变
                  handleSizeChange(val) {
                      this.pageSize = val;
                      this.fetchData();
                  },
                  //分页改变
                  handleCurrentChange(val) {
                      this.currentPage = val;
                      this.fetchData();
                  },
                  // 表单重置，
                  // 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
                  resetForm(formName) {
                      this.$refs[formName].resetFields();
                  },
  
              }
          };
          </script> 
  

api定义了findMys方法，vue文件中调用方法，然后回显到下方列表

api和vue里的方法瞎写的，

---

请大佬指点，my.api和my.vue文件的方法怎么写

Answer 1

https://blog.csdn.net/u010107291/article/details/90246444