簡介

網頁連結： 機殼篩選

本專案是我使用Flutter開發的第一個正式專案，功能是讓使用者可以篩選出符合自己需求的機殼，詳細介紹可以參考上一篇文章

後續

網頁連結： 【攻略】原價屋機殼篩選

在完成了上一篇文章的隔天，我把網站分享到了巴哈姆特 - 電腦應用綜合討論區，到現在也過了一個禮拜了，沒想到竟然已經有 10k 的瀏覽量，這幾天收到許多的建議，也因此對網頁進行了不少的更新改進，多了一些功能，因此想在這邊做一點紀錄。

新增功能

機殼邊長

原本在設計網頁時其實也有考慮到加入這個邊長篩選的功能，讓使用者可以判斷機殼是否適合放入指定空間，但是因為原價屋網頁上的機殼邊長順序並非固定的 寬 * 深 * 高 排序，因此難以去做判斷，而如果使用長度去做排序，因為不同的機殼外觀不同 (高>深 or 深>高)，可能會造成誤判，就改以公升數進行篩選。

後來也收到許多人的建議加入此功能，最後採用了最長邊、次長邊、短邊的篩選方式，剩下的就交給使用者自行判斷了，以下是修改後的結果：

實現的方法就是在蒐集資料時利用 sort 函數將三邊長進行排序，存入三個變數後上傳到資料庫中儲存，之後在 Flutter 程式之中加入篩選三邊長的功能就好。

背插、全景機殼

這個功能是加在 「其他」 類型的篩選中，可以篩選出支援背插主板以及全景外觀的機殼，實現的方法相當簡單，就是在爬蟲時擷取是否出現關鍵字 「背插」 和 「全景」 即可。

調整功能

側板類型

原本的側板類型只有 側透、非側透、可替換 三種，也是有不少人建議加上非玻璃的側透類型，因為有些人只是不希望使用易碎的玻璃而已，而壓克力就是不錯的選項，因此我在篩選側板類型中多加了壓克力這個選項。

內附風扇數

一開始在做爬蟲時就有順便統計了機殼所內附的風扇數量，不過後來就懶得做出來實際的功能，只是將 「是否內附風扇」 加在「其他」 類型的篩選中，後來有人建議可以加入風扇數量的篩選，於是就將這個功能做出來了。

實現的部分是使用 Flutter 的 RangeSlider widget，讓使用者可以調整機殼內風扇數的範圍，並進行篩選。

CPU 高 & GPU 長

原本的功能只有做 CPU 高以及 GPU 長的下限，不過有人建議可以加上兩者的上限(雖然我還是不太了解原因)，後來就把此功能補上，並將兩者的篩選欄位分開，方便使用。

硬碟支援

這個功能應該是最多人有建議加上的，要做出這個功能也是花了不少時間，和邊長的篩選功能一樣，也是一個我一開始有考慮做的功能，因為各個機殼對於硬碟的兼容性各不相同，也可能會因為顯卡長、電供尺寸不同而改變，除此之外，原價屋的網頁表示方式也相當抽象，因此我花了不少時間做整理，當然，最後篩選出的結果還是要由使用者自行判斷。

以下是部分程式碼(已省略重複內容，詳細程式碼可至 Github 專案中查看)，可以看到光是 “3.5 or 5.25*” 就有不少寫法(前後對調、英文大小寫、“共用”…)需要去做判斷，而支援度的部分我是直接針對單一類型的硬碟取最大值，因此在兩種類型的硬碟同時做篩選時可能造成衝突，這也是需要使用者自行做判斷的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
for i in range(len(drivesSupport)):
  tmp = [0,0,0]
  drivesSuppor25.append(0)
  drivesSuppor35.append(0)
  drivesSuppor525.append(0)
  if("5.25 or 3.5*" in drivesSupport[i]):
    t = 0
    if((drivesSupport[i][drivesSupport[i].find("5.25 or 3.5*")+12:drivesSupport[i].find("5.25 or 3.5*")+14]).isdigit()):
      t = int(drivesSupport[i][drivesSupport[i].find("5.25 or 3.5*")+12:drivesSupport[i].find("5.25 or 3.5*")+14])
    else:
      t = int(drivesSupport[i][drivesSupport[i].find("5.25 or 3.5*")+12])
    drivesSuppor25[i] += t
    drivesSuppor35[i] += t
  if("3.5 or 5.25*" in drivesSupport[i]):
    #code
  if("3.5 or 2.5*" in drivesSupport[i]):
    #code
  if("2.5 or 3.5*" in drivesSupport[i]):
    #code
  if("2.5 OR 3.5*" in drivesSupport[i]):
    #code
  if("共用*" in drivesSupport[i]):
    #code
  if("3.5/2.5*" in drivesSupport[i]):
    #code
  while(drivesSupport[i].find("2.5*") != -1):
    t = 0
    if((drivesSupport[i][drivesSupport[i].find("2.5*")+4:drivesSupport[i].find("2.5*")+6]).isdigit()):
      t = int(drivesSupport[i][drivesSupport[i].find("2.5*")+4:drivesSupport[i].find("2.5*")+6])
    else:
      t = int(drivesSupport[i][drivesSupport[i].find("2.5*")+4])
    if(t > tmp[0]):
      tmp[0] = t
    drivesSupport[i] = drivesSupport[i].replace("2.5*","",1)
  while(drivesSupport[i].find("3.5*") != -1):
    #code
  while(drivesSupport[i].find("5.25*") != -1):
    #code
  drivesSuppor25[i] += tmp[0]
  drivesSuppor35[i] += tmp[1]
  drivesSuppor525[i] += tmp[2]