本系列文章是針對 https://blog.csdn.net/weixin_43668031/article/details/83962959 內容的實現所編寫的。開發經歷包括思考過程、重構和推翻重來。
現在開始製作前端，我這裏採用VUE3來做前端，既方便又美觀。
媒體文件（圖片、視頻文件），打算採用gateway的方式來訪問，就算ipfs節點跑在本地 localhost，也採用http://127.0.0.1/ipfs/CID 的這種方式來獲取。
https://ipfs.github.io/public-gateway-checker/
這個是公共網關，其中我下載了 https://ipfs.github.io/public-gateway-checker/gateways.json 文件包含進我的項目，這樣可以不需要連接到 ipfs.github.io 這個域名進行獲取資源。
我還加入了3個本地網關，分別是127.0.0.1 當前訪問的域名、當前訪問域名的8080端口，這個端口是ipfs節點默認的網關端口。
//先get一下我下載下來的公共網關列表
Axios.get('./gateways.json').then((res) =>{
//添加3個本地網關
let gateways = res.data;
const host1 = window.location.host;
const host2 = document.domain;
gateways = [
"http://127.0.0.1:8080/ipfs/:hash",
"http://"+host1+"/ipfs/:hash",
"http://"+host2+":8080/ipfs/:hash"
].concat(gateways);
//定義用於測試的hash和文本
const hashToTest = 'Qmaisz6NMhDB51cCvNWa1GMS7LU1pAxdF4Ld6Ft9kZEP2a';
const hashString = 'Hello from IPFS Gateway Checker';
//定義在線的網關列表
const gatewayOnline = [];
gateways.forEach((value) =>{
//拼接hash到網關url裏
const gatewayAndHash = value.replace(':hash', hashToTest);
Axios.get(gatewayAndHash,{timeout:5000}).then((res)=>{
const matched = res.data.trim() === hashString.trim();
if(matched){
//重新把hash替換成佔位符
const url = res.config.url.replace(hashToTest, ':hash');
//把在線的網關添加到列表
gatewayOnline.push(url);
//把第一個返回的網關記錄到全局變量中。
if(this.$store.state.gateway=='')this.$store.commit('setGateWay', url);
}
}).catch((err)=>{
//捕獲到異常，無需處理
})
});
})
運行後 this.$store.state.gateway 這個全局變量中就有了一個最快返回的網關，數組gatewayOnline包含檢測結果爲在線的網關列表，如果程序判斷出來的最快的網關用戶覺得速度不行，還可以切換這裏的網關。
在頁面設計時遇到一些問題：
1.大部分界面還是採用V1的佈局，會修改一部分V1中不合理和迭代佈局。
2.彈幕插件沒有找到好的，因爲目前在網路上能找到的所有彈幕插件均採用C-S模式，後端採用傳統的中心化服務器，沒有找到合適的能在eth網路上運用的彈幕插件。
3.視頻軌（視頻清晰度）切換用傳統的“標清”、“高清”、“超清”並不合適，就算採用“720P”這樣的標示也有不妥的地方，目前還沒想好如何標示。
4.關於分享，URL生成廢棄V1的方式，採用操作ipfs對象，將單個視頻信息寫入ipfs對象，重新打包ipfs對象，最後生成一個新的CID+公共網關來分享給別人，優勢：在不借助第三方短連接的情況下能將路徑縮短到一個CID（46字符），儘管如此還是太長。缺點：把當前狀態的合約對象傳到ipfs上，意味着未來合約數據更新後，分享出去的那個頁面不會更新。
5.由於沒有大量前端經驗、雖然能理解vue全局對象、瀏覽器sessionStorage和localStorage，但還是無法確定我應該運用哪一種？
6.關於瀏覽器插件，V1使用ipfs和eth的瀏覽器插件來實現和ipfs網絡、eth網絡的通信，這會限制用戶的使用和推廣。我必須採用js來完成這一切，但是功能可能會有所限制。eth的轉賬和寫入可以通過插件來完成，但是eth的讀取操作，如果也需要插件會比較麻煩，因此eth讀取操作可以在eth插件不加載的情況下運行。