第 02 組 每週小結 (2/3)

基本情況

• 隊名：賞口飯吃 orz

• 組長部落格：here

• 作業部落格：here

• GitHub 連結： 前端連結 後端連結

• 組員人數：11

衝刺情況彙報

過去一週完成了哪些任務？文字/口頭描述

前端：

• 今日熱門和推薦交換位置,優化使用者體驗
• 標籤選擇新增標籤被打數量
• 地圖樣式修改

後端

• 相應服務層、持久層的單元測試

• 做 quartz 定時器任務，計算今日熱門

• 新增 system/getInfo 的 tagNum，以幫助前端顯示熱門標籤

展示 GitHub 當日程式碼/文件簽入記錄

前端

後端

做了哪些優化和迭代

前端

• 部分樣式修改
• 標籤選擇新增標籤被打數量
• 地圖樣式修改

後端

• 做 quartz 定時器任務，每日定時計算今日熱門，用空間換時間，記憶體中先放好

通過自動化測試測出的 bug（如沒有可不填）

解決了哪些 Bug，又是如何解決的（需要寫詳細）

前端

地圖樣式錯誤

image 元件設定 mode='widthFix'

import { Image, Text, View } from "@tarojs/components";
import * as React from "react";
import { AtFloatLayout } from "taro-ui";
import "./windowDesc.scss";

export default function WindowDesc(props: {
  windowName: string;
  pngSrc: string;
  description: string;
  mapSrc: string;
  star: number;
  canteenName: string;
}): JSX.Element {
  const [open, setOpen] = React.useState<boolean>();
  return (
    <View className="window-desc">
      <View className="window-desc-top">
        <View className="window-desc-top-text">
          <Text className="window-desc-title">{props.windowName}</Text>
          <View className="window-desc-canteen-star">
            <Text className="window-desc-canteen">{props.canteenName}</Text>
            <Text className="window-desc-star">{props.star.toFixed(1)}分</Text>
          </View>
        </View>
        <Image className="window-desc-top-image" src={props.pngSrc} />
      </View>
      <View className="window-desc-desc">{props.description}</View>
      <View
        className="window-desc-more"
        onClick={() => {
          setOpen(true);
        }}
      >
        展開更多
      </View>
      <AtFloatLayout
        title="詳細資訊"
        isOpened={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        <View className="window-desc-map-title">描述</View>
        <View className="window-desc-map-content">{props.description}</View>
        <View className="window-desc-map-title">地圖指引</View>
        <Image
          mode="widthFix"
          src={props.mapSrc}
          className="window-desc-map-image"
        />
      </AtFloatLayout>
    </View>
  );
}
 

對應的樣式檔案再設定

.window-desc-map-image {
  width: 100%;
}

即可按正常比例顯示圖片

後端

• spring 除了三個基本層之外的類，@Autowired 無法注入，瘋狂空指標

這個注入的問題處理了很久，因為需要在 Job 的實現類中呼叫持久層方法，不得不注入相應持久層介面

解決的思路是：

在 Job 實現類中引入自身的一個靜態類引用物件，強制其類載入，並實現在 servlet 初始化載入之前做一些初始化任務，如下：

@Component
public class PopularJob implements Job {

    @Autowired
    private WindowMapper windowMapper;
    @Autowired
    private DishTagMapper dishTagMapper;
    @Autowired
    private DishCommentMapper dishCommentMapper;

    public static PopularJob popularJob;
    private Recommend recommend;
    private List<DishRecommend> dishRecommends;

    @PostConstruct
    public void init(){
        popularJob = this;
        popularJob.windowMapper = this.windowMapper;
        popularJob.dishCommentMapper = this.dishCommentMapper;
        popularJob.dishTagMapper = this.dishTagMapper;
        popularJob.recommend = new Recommend();
        popularJob.dishRecommends = new ArrayList<>();
    }

    // ...
}
 

最關鍵的是之後使用的 mapper 物件，一定要用這個靜態類的，否則仍然是空指標！

比如獲取視窗列表，要這樣：

List<Window> windowList = popularJob.windowMapper.listWindows();

接下來的計劃還剩下哪些任務？

前端

後端

• 自動化測試

• 推薦演算法的優化

• 做食堂擁擠程度的視覺化介面實現

• 做安全相關的事項

遇到了哪些困難？

目前最大的困難可能還是在後端，推薦的演算法不好，IO 也處理的不是很好（熱門可以提前計算，但是推薦需要根據使用者狀態實時計算），加之頻寬也並不是很給力，就存在一些速度問題，導致使用者體驗不佳。

團隊有哪些收穫和疑問？

收穫： 學會了優化使用者體驗的小技巧，以及學會了忙裡學習新知識和改 bug

疑問： 自動化測試還是差點意思，專案真的不大，確實測不了太多內容

成果展示

展示組內最新成果

首頁介面優化包括圖示和開啟速度

視窗優化及地圖尺寸

標籤的上標

展示本週自動化測試的結果

我們在後端成員編寫了測試程式碼檢測出來一些簡單的邏輯錯誤現已解決，同時，通過自動化測試，我們確定了 quartz 定時器任務；首頁預載入熱門，給使用者更加流暢的體驗；在搜尋上我們自動化測試出的結果顯示我們的篩選功能已經趨近完善。利用暴力測試，我們解決了各個機型上的顯示問題，特別是安卓手機的顯示 bug。

展示自動化持續整合（加分項，對應自動化測試）