上傳圖片時顯示進度條 ( react )

/0 評論/在： , , /通過：

呼叫api上傳圖片時候如果要顯示進度條，目前有兩種方式可以加入偵聽事件，

  1. 使用js原生的 XMLHttpRequest
  2. 使用axios

其實axios也只是把偵聽事件的名稱改掉而已，背後做法應該是一樣的ＸＤ

閱讀更多
0

react 使用前端Post方法串接電子地圖

/1 評論/在： , , /通過：

我們在串接綠界資訊的時候，遇到一個問題就是綠界的文件上寫，此方法要使用前端的post方法，但是我用call api的post方法去打，卻回應跨域錯誤，寫信綠問綠界，又一問三不知～

好在後來終於被後端工程師提醒才明白，在上古時期的網頁開發是沒有分前後端的，所以post方法都是用<form>標籤去做，我整個大開眼界欸，雖然還不懂這其中的差別，但總歸是成功了。

閱讀更多
2+

react 打開裝置相機鏡頭拍照，並儲存照片

/0 評論/在： , , /通過：

網頁需要用到相機的場景還滿多的，像是身份驗證需要拍證件照上傳、發文、留言，是很基本的網頁應用。

閱讀更多
1+

react 輪播圖套件

/0 評論/在： , /通過：

material ui 框架沒有提供輪播圖 component，需要另外安裝套件，這邊介紹一個我常用的套件 React Slick，剛好他也有出 react 版本。

閱讀更多
0

Material-ui Textfield select 組件搭配 react-hook-form 無法指定defaultvalue 問題

/0 評論/在： , /通過：

如題，使用 Textfield 的 select 組件時，我們會想預先設定已選取的項目，但是我們指定了，畫面上的 input 卻還是沒有選起來的樣式。

閱讀更多
0

使用 ThirdWeb 製作自己的 NFT Mint Site

/0 評論/在： , , /通過：

搭上NFT熱潮，發現有一些網站開始主打不用自己寫智能合約，也可以製作NFT，ThirdWeb就是其中一個。

但我們用ThirdWeb上傳好NFT之後，看到他提供給消費者Mint的介面有點陽春，好在他們本來就是主打可以自己使用api的方式去打他們的各種功能，例如Mint、連結錢包、查詢NFT數量之類的。

閱讀更多
0

next.js 串接 google recaptcha verify2 invisible

/0 評論/在： , /通過：

我不是機器人驗證，在一些敏感資訊的交互時候可以加上，確保操作者確實是本人。

驗證方式Google有提供兩個版本：v2、v3

其中v2版本又分為：checkbox（就是會有一個勾勾要打勾選我不是機器人）、invisible（從背景打api驗證送給後端）

閱讀更多
0

在 next.js 中使用巢狀的 layout

/0 評論/在： , /通過：

通常我們的網站會有Topbar、Footer之類的，在next.js專案中我們會把這樣的layout寫在一起：

閱讀更多
0

使用 Doceker 打包前端 next.js 專案

/0 評論/在： , , /通過：

使用 next.js 製作網站不外乎就是為了 ssr 這個重點，因為一般的 SPA 網站像是純 react 或 vue，是沒有 seo 的，也就是當我們做好網站，google 搜尋引擎是搜尋不到你的內容的。

閱讀更多
0