學成線上專案總結 - Day3 CMS頁面管理開發

自定義查詢頁面

能夠使資料庫資料顯示在頁面中之後，我們還需要根據不同條件（站點id，模板id，頁面別名等等）來查詢所需頁面資訊。而有些查詢需要支援模糊匹配，有些必須精確匹配。

我們需要使用到CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法實現。

這個功能的基本邏輯是：

• 根據自定義查詢輸入的查詢條件，建立一個CmsPage物件
• 將物件傳遞進Example物件中，透過條件匹配器ExampleMatcher來匹配查詢
• 此時，將這個Example物件傳遞進CmsPageRepository的findAll()方法中，從所有頁面裡查詢是否含有匹配的資料

精確匹配測試程式碼

    @Test
    public void testFindAllByExample() {
        // 分頁引數
        int page = 0; // 頁碼從0開始
        int size = 10;
        Pageable pageable = PageRequest.of(page, size);

        // 條件值物件
        CmsPage cmsPage = new CmsPage();
        cmsPage.setSiteId("5a751fab6abb5044e0d19ea1");
        // 條件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching();
        // 定義Example
        Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
        Page<CmsPage> all = cmsPageRepository.findAll(example, pageable);
        List<CmsPage> content = all.getContent();
        System.out.println(content);
//        cmsPageRepository.findAll();
    }

如果需要模糊匹配，如查詢頁面別名時，還可以在exampleMatcher後新增如下程式碼，定義條件匹配器：

exampleMatcher = exampleMatcher.withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains()); 
//頁面別名模糊查詢，需要自定義字串的匹配器實現模糊查詢
//ExampleMatcher.GenericPropertyMatchers.startsWith()//開頭匹配

注意每次使用匹配器都需要讓它返回給一個ExampleMatcher物件.

服務端新增查詢程式碼

實際上只需將剛才寫的測試程式碼複製到業務層中即可。
需要注意的是由於可能存在queryPageRequest請求值為空的情況，所以需要提前新增判定
if (queryPageRequest == null) {queryPageRequest = new QueryPageRequest();}
而後面還要使用if語句判定哪些資料作為查詢條件輸入了，並將有值的賦值給CmsPage物件。

程式碼：自定義頁面查詢功能

前端部分的實現

我們需要透過前端部分的表單輸入，來得到查詢條件，從而使後端按條件查詢。
後端查詢出相應結果後，還要透過前端來展示結果。

以下是實現這一過程的步驟

• 建立查詢表單
  
• 為站點下拉框填充資料（在<script>中的鉤子方法中實現）
• 在data()中新增需要的資料模型物件siteId和pageAliase，查詢方法中也要傳入相應的引數。
• 然後我們還要向服務端傳遞查詢條件，具體就是把查詢的內容拼接到cms.js中的url上。

  // 定義方法，請求服務端頁面查詢介面
  export const pagelist = (page, size, params) =>{
  // 將params傳遞的資料拼裝成key/value串
  let queryString = querystring.stringify(params);
  // 請求服務端的頁面查詢介面
  // 透過ajax呼叫獲取頁面資料
  return http.requestQuickGet(apiUrl + '/cms/page/list/' + page + '/' + size + '?' + queryString);
  }

程式碼：自定義查詢前端部分

新增頁面

後端開發

定義Api介面

• 這部分的功能是新增一個頁面的資料資訊，首先想到在api中新增相應介面。
  • Api介面的功能是什麼？就是一個add()方法：新增一個CmsPage物件，並以CmsPageResult為返回型別，提示新增成功與否。

定義業務層介面實現類

這裡重寫介面中的add()方法，將CmsPage物件傳遞進，透過cmsPageRepository的save()方法將新頁面存進資料庫，返回成功與否的提示。

需要注意的是，為了防止重複新增相同的頁面，我們在查詢類裡定義一個新的查詢方法，根據siteId, pageWebPath 和 pageName查詢新建的頁面是否已經存在，如果不存在，我們才執行儲存新增頁面的操作。

前端開發

• 我們在查詢列表介面增加一個“新增頁面”按鈕。這裡使用到<router-link>標籤，使按鈕導向一個新建頁面。
• 在index.js中新增新增頁面路由
• 新增頁面的完善
  • 新增返回按鈕：
    • 為了回到原來的頁面，我們需要知道原頁面的頁碼和查詢的站點id。
    • 在查詢頁面，透過this.params.page給返回按鈕傳參
    • 在新增頁面，透過this.$route.query.page獲取引數
    • 返回到查詢頁面，我們要在頁面渲染前獲取頁碼和站點id資料，所以將引數傳遞到鉤子方法created()中
  • 表單驗證
    • 在<el-form>中新增校驗名稱:rules="pageFormRules"
    • 在data()配置校驗規則

前端Api呼叫

• 在cms.js中建立一個方法呼叫服務端介面，將表達資料提交到後臺。
• 完善提交過程：增加提交確認流程和提交後清空列表

新增頁面前後端

修改頁面

定義介面

• 透過Id查詢頁面介面 public CmsPage findById(String id);
• 修改頁面介面public CmsPageResult edit(String id,CmsPage cmsPage);

業務層實現

• 在業務層編寫具體實現查詢Id和修改指定頁面的程式碼
• 在Controller中重寫介面定義的方法（即使用業務層方法）
  • 注意：提交json資料要加@Requestbody註解，以及@PathVariable
  • getmapping，putmapping，postmapping對應查詢，修改，新建功能的url

後端程式碼

前端實現

• 編寫編輯頁面，和新建頁面類似
• 在index.js中配置路由，傳入pageId
• 在pagelist頁面新增編輯頁面連結，編寫edit方法，傳入pageId以開啟頁面
• 在編輯頁面data()中新增pageId，以接收頁面資訊
• 在鉤子方法中根據pageId獲取頁面資訊
• 定義api方法，和服務端建立連線：獲取頁面資訊 + 提交編輯內容

前端程式碼

增刪改查操作的流程總結

服務端

• 定義介面，確定需求。
  • 比如新增頁面，就需要add()方法
• 編寫業務層程式碼
  • 就是實現需求的具體操作
• Controller中呼叫業務層方法
  • 即重寫所定義的介面中的方法，並將此方法對映到對應路徑(如@PostMapping(‘/add’))
  • 注意，需使用@RequestBody獲取；路徑中的佔位符使用@PathVariable獲取

前端

• 建立所需頁面
  • 頁面要由父頁面導向，需要父頁面中新增標籤，為其新增導向該頁面的路由資訊；
  • 如果還需要傳參，如進入某一資料的編輯介面，那麼要在鉤子方法中獲取其pageId資訊，透過$route從服務端獲取
• 在cms.js配置api路由，和服務端建立連線
• 在index.js中配置頁面路由

異常處理

• 建立統一的異常處理類，用來捕獲異常
• 在業務層、持久層或Controller中執行方法先丟擲異常，再處理正確程式碼
• 異常分為可預知異常和不可預知異常

異常處理

本作品採用《CC 協議》，轉載必須註明作者和本文連結