文章目錄

• • 0.需求分析
  • 1.服務端--Dao
  • 2.服務端--Service
  • 3.服務端--Controller
  • 4.前端
  • • 1）page_list.vue中增加查詢表單
    • 2）page_list.vue中添加數據模型對象
    • 3）在鉤子方法中構建siteList站點列
  • 5.Api調用
  • • 1）修改 cms.js，向服務端傳遞查詢條件
    • 2）page_list.vue中頁面調用api中的方法

0.需求分析

在頁面輸入查詢條件，查詢符合條件的頁面信息。
查詢條件如下：
站點Id：精確匹配
模板Id：精確匹配
頁面別名：模糊匹配

1.服務端–Dao

使用 CmsPageRepository中的findAll(Example var1, Pageable var2)方法實現，無需定義

下邊測試findAll方法實現自定義條件查詢：

//自定義條件查詢測試 @Test public void testFindAll() { //條件匹配器 ExampleMatcher exampleMatcher = ExampleMatcher.matching(); exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); //頁面別名模糊查詢，需要自定義字符串的匹配器實現模糊查詢 //ExampleMatcher.GenericPropertyMatchers.contains() 包含 //ExampleMatcher.GenericPropertyMatchers.startsWith()//開頭匹配 //條件值 CmsPage cmsPage = new CmsPage(); //站點ID cmsPage.setSiteId("5a751fab6abb5044e0d19ea1"); //模板ID cmsPage.setTemplateId("5a962c16b00ffc514038fafd"); // cmsPage.setPageAliase("分類導航"); //創建條件實例 Example<CmsPage> example = Example.of(cmsPage, exampleMatcher); Pageable pageable = new PageRequest(0, 10); Page<CmsPage> all = cmsPageRepository.findAll(example, pageable); System.out.println(all); }

2.服務端–Service

在PageService的findlist方法中增加自定義條件查詢代碼

/** * 頁面列表分頁查詢 * @param page 當前頁碼 * @param size 頁面顯示個數 * @param queryPageRequest 查詢條件 * @return 頁面列表 */ public QueryResponseResult findList(int page,int size,QueryPageRequest queryPageRequest){ //條件匹配器 //頁面名稱模糊查詢，需要自定義字符串的匹配器實現模糊查詢 ExampleMatcher exampleMatcher = ExampleMatcher.matching() .withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); //條件值 CmsPage cmsPage = new CmsPage(); //站點ID if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){ cmsPage.setSiteId(queryPageRequest.getSiteId()); } / /頁面別名 if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){ cmsPage.setPageAliase(queryPageRequest.getPageAliase()); } / /創建條件實例 Example<CmsPage> example = Example.of(cmsPage, exampleMatcher); //頁碼 page = page‐1; //分頁對象 Pageable pageable = new PageRequest(page, size); //分頁查詢 Page<CmsPage> all = cmsPageRepository.findAll(example,pageable); QueryResult<CmsPage> cmsPageQueryResult = new QueryResult<CmsPage>(); cmsPageQueryResult.setList(all.getContent()); cmsPageQueryResult.setTotal(all.getTotalElements()); //返回結果 return new QueryResponseResult(CommonCode.SUCCESS,cmsPageQueryResult); }

3.服務端–Controller

4.前端

1）page_list.vue中增加查詢表單

文件名：page_list.vue

<!‐‐查詢表單‐‐> <el‐form :model="params"> <el‐select v‐model="params.siteId" placeholder="請選擇站點"> <el‐option v‐for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"> </el‐option> </el‐select> 頁面別名：<el‐input v‐model="params.pageAliase" style="width: 100px"></el‐input> <el‐button type="primary" v‐on:click="query" size="small">查詢</el‐button> </el‐form>

2）page_list.vue中添加數據模型對象

文件名：page_list.vue

增加siteList、pageAliase、siteId，如下：

3）在鉤子方法中構建siteList站點列

文件名：page_list.vue

5.Api調用

1）修改 cms.js，向服務端傳遞查詢條件

2）page_list.vue中頁面調用api中的方法

總結

以上是生活随笔為你收集整理的学成在线--3.CMS页面管理开发（自定义条件查询）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。