章節感悟

1.使用ibootstrap進行前端界面樣式簡單選擇

2.如果設置對某種功能的工具類，裏面涉及到某個類，這個類一定要高度抽象

3.freemarke的簡單使用（循環，判斷）

賣家端訂單

1.在OrderService中添加顯示全部訂單功能，具體實現省略，進行單元測試

2.訂單部分SellerOrderController開發

3.我們使用的是freemarke模板渲染，導入jar包

4.創建list頁面進行渲染

5.使用ibootstrap網頁工具進行模板樣式選擇http://www.ibootstrap.cn/

6.後端對前端數據進行修改，這樣方便前端進行顯示

1）對支付狀態和訂單狀態枚舉類進行更深的抽象使之實現

2）設置一個工具類，使之拿到一個枚舉對象狀態和CodeEnum對應的具體實現類可以判斷拿出這個枚舉對象

下面是工具類的使用：

package com.xiong.sell.utils;

import com.xiong.sell.enums.CodeEnum;

/**
 * @author Xiong YuSong
 * 2019/1/26 10:57
 */
public class EnumUtil {
    public static <T extends CodeEnum> T getByCode(Integer code, Class<T> enumClass) {
        
 
for (T each : enumClass.getEnumConstants()) {
            if (code.equals(each.getCode())) {
                return each;
            }
        }
        return null;
    }
}

7.OrderDTO增加的方法

//對象轉換成json格式將會忽略這兩個字段
@JsonIgnore
public OrderStatusEnum getOrderStatusEnum() {
    return EnumUtil.getByCode(orderStatus, OrderStatusEnum.class
 
);
}
@JsonIgnore
public PayStatusEnum getPayStatusEnum() {
    return EnumUtil.getByCode(payStatus, PayStatusEnum.class);
}

8.freemarke的使用（列表顯示）

<div class="col-md-12 column">
    <table class="table table-condensed table-hover table-bordered">
        <thead>
        <tr>
            <th>訂單id</th>
            <th>姓名</th>
            <th>手機號</th>
            <th>地址</th>
            <th>金額</th>
            <th>訂單狀態</th>
            <th>支付狀態</th>
            <th>創建時間</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        <#list orderDTOPage.content as orderDTO>
            <tr>
                <td>${orderDTO.orderId}</td>
                <td>${orderDTO.buyerName}</td>
                <td>${orderDTO.buyerPhone}</td>
                <td>${orderDTO.buyerAddress}</td>
                <td>${orderDTO.orderAmount}</td>
                <td>${orderDTO.orderStatusEnum.message}</td>
                <td>${orderDTO.payStatusEnum.message}</td>
                <td>${orderDTO.createTime}</td>
                <td>詳情</td>
                <td>取消</td>
            </tr>
        </#list>
        </tbody>
    </table>
</div>

9.分頁的使用

1）在ibootstrap中尋找到分頁的樣式

2）設定一個當前頁數值currentPage，和size

3）設定各種功能（分頁）

<div class="col-md-12 column">
    <ul class="pagination pull-right">
        <#--上一頁 小於1則無法顯示上一頁-->
        <#if currentPage lte 1>
            <li class="disabled"><a href="#">上一頁</a></li>
        <#else >
            <li><a href="/sell/seller/order/list?page=${currentPage-1}&size=${size}">上一頁</a></li>
        </#if>
        <#list 1..orderDTOPage.totalPages as index>
            <#if currentPage == index>
                <li class="disabled"><a href="#">${index}</a></li>
            <#else>
                <li><a href="/sell/seller/order/list?page=${index}&size=${size}">${index}</a></li>
            </#if>
        </#list>
        <#--下一頁 大於orderDTOPage.totalPages則無法顯示下一頁-->
        <#if currentPage gte orderDTOPage.totalPages>
            <li class="disabled"><a href="#">下一頁</a></li>
        <#else >
            <li><a href="/sell/seller/order/list?page=${currentPage+1}&size=${size}">下一頁</a></li>
        </#if>
    </ul>
</div>

10.取消訂單

1）”/seller/order/cancel”接口

2）設定error頁面和success頁面，取消成功和取消失敗（從ibootstrap中查找）

11.訂單詳情

1）”/seller/order/detail”接口

2）設置詳情頁面

10.訂單完結

1）”/seller/order/finish”接口

微信點餐系統（九）-賣家端訂單