6-12 完成电子书根据 name 进行查询的功能

src/main/java/io/github/yubincloud/fairywiki/controller/EbookController.java

@@ -30,12 +30,9 @@ public class EbookController {
         return new RestfulModel<>(ErrorCode.SUCCESS, "", bookList);
     }
 
-    /**
-     * 根据书名进行电子书的模糊查询接口
-     */
-    @GetMapping("/list2")
-    public RestfulModel<List<EbookQueryRespDto>> list(EbookQueryReqDto ebookQueryReqDto) {
-        List<EbookQueryRespDto> bookList = ebookService.fuzzyQueryByName(ebookQueryReqDto.getName());
+    @GetMapping("/query")
+    public RestfulModel<PageRespDto<EbookQueryRespDto>> queryEbooks(@Valid EbookQueryReqDto ebookQueryReqDto) {
+        PageRespDto<EbookQueryRespDto> bookList = ebookService.fuzzyQueryByName(ebookQueryReqDto);
         return new RestfulModel<>(ErrorCode.SUCCESS, "", bookList);
     }
 

src/main/java/io/github/yubincloud/fairywiki/dto/req/EbookQueryReqDto.java

@@ -8,7 +8,5 @@ import lombok.EqualsAndHashCode;
 @EqualsAndHashCode(callSuper = true)
 public class EbookQueryReqDto extends PageReqDto {
 
-    private Long id;
-
     private String name;
 }

src/main/java/io/github/yubincloud/fairywiki/service/EbookService.java

@@ -4,6 +4,7 @@ import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
 import io.github.yubincloud.fairywiki.domain.Ebook;
 import io.github.yubincloud.fairywiki.domain.EbookExample;
+import io.github.yubincloud.fairywiki.dto.req.EbookQueryReqDto;
 import io.github.yubincloud.fairywiki.dto.req.EbookSaveReqDto;
 import io.github.yubincloud.fairywiki.dto.resp.EbookQueryRespDto;
 import io.github.yubincloud.fairywiki.dto.resp.PageRespDto;
@@ -42,16 +43,22 @@ public class EbookService {
 
     /**
      * 根据 ebook 的 name 进行模糊查询
-     * @param name ebook的书名
      */
-    public List<EbookQueryRespDto> fuzzyQueryByName(String name) {
+    public PageRespDto<EbookQueryRespDto> fuzzyQueryByName(EbookQueryReqDto ebookQueryReqDto) {
         // 对数据库进行模糊查询
         EbookExample ebookExample = new EbookExample();
         EbookExample.Criteria criteria = ebookExample.createCriteria();
-        criteria.andNameLike("%" + name + "%");
+        criteria.andNameLike("%" + ebookQueryReqDto.getName() + "%");
+        PageHelper.startPage(ebookQueryReqDto.getPageNum(), ebookQueryReqDto.getPageSize());  // 对接下来遇到的第一个 SELECT 产生作用
         List<Ebook> ebookList = ebookMapper.selectByExample(ebookExample);
         // 将 ebookList 拷贝至 dto 对象列表并返回
-        return CopyUtil.copyList(ebookList, EbookQueryRespDto.class);
+        PageInfo<Ebook> pageInfo = new PageInfo<>(ebookList);
+
+        List<EbookQueryRespDto> ebookQueryRespDtoList = CopyUtil.copyList(ebookList, EbookQueryRespDto.class);
+        PageRespDto<EbookQueryRespDto> pageRespDto = new PageRespDto<>();
+        pageRespDto.setTotal(pageInfo.getTotal());
+        pageRespDto.setList(ebookQueryRespDtoList);
+        return pageRespDto;
     }
 
     /**

web/src/views/admin/admin-ebook.vue

@@ -4,9 +4,30 @@
         :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
     >
       <p>
-        <a-button type="primary" @click="add()" size="large">
-          新增
-        </a-button>
+        <a-form
+            layout="inline"
+            :model="ebookQueryForm"
+            @finish="handleQueryFormSubmit(ebookQueryForm)"
+        >
+          <a-form-item>
+            <a-input v-model:value="ebookQueryForm.name" placeholder="ebook name">
+              <template #prefix><EyeOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
+            </a-input>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+                type="primary"
+                html-type="submit"
+                size="large"
+                :disabled="ebookQueryForm.name === ''"
+            >
+              查询
+            </a-button>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="add()" size="large">新增</a-button>
+          </a-form-item>
+        </a-form>
       </p>
       <a-table
           :columns="columns"
@@ -65,13 +86,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref, UnwrapRef, reactive } from 'vue';
 import axios from 'axios';
 import { message } from 'ant-design-vue'
 
+interface EbookQueryForm {
+  name: string;
+}
+
 export default defineComponent({
   name: 'AdminEbook',
   setup() {
+    const ebookQueryForm: UnwrapRef<EbookQueryForm> = reactive({
+      name: ''
+    });
+
     const ebooks = ref();
     const pagination = ref({
       current: 1,
@@ -118,6 +147,35 @@ export default defineComponent({
       }
     ];
 
+    /**
+     * 根据表单提交的数据进行查询
+     **/
+    const handleQueryFormSubmit = (ebookForm: EbookQueryForm) => {
+      loading.value = true;
+      axios.get("/ebook/query", {
+        params: {
+          name: ebookForm.name,
+          pageNum: 1,
+          pageSize: 4
+        }
+      }).then((response) => {
+        loading.value = false;
+        const respData = response.data;
+
+        if (respData.code == 0) {
+          const pageData = respData.data;
+          ebooks.value = pageData.list;
+
+          // 重置分页按钮
+          pagination.value.current = 1;
+          pagination.value.total = pageData.total;
+        } else {
+          message.error(respData.msg);
+        }
+      });
+    };
+
+
     /**
      * 数据查询
      **/
@@ -218,6 +276,10 @@ export default defineComponent({
     });
 
     return {
+      ebookQueryForm,
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+
       ebooks,
       pagination,
       columns,
@@ -227,6 +289,7 @@ export default defineComponent({
       edit,
       add,
       handleDeleteEbook,
+      handleQueryFormSubmit,
 
       ebook,
       modalVisible,