文章

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

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

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

閱讀更多

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

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

閱讀更多

react 輪播圖套件

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

閱讀更多

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

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

閱讀更多

next.js 串接 google recaptcha verify2 invisible

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

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

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

閱讀更多

在 next.js 中使用巢狀的 layout

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

閱讀更多

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

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

閱讀更多

react native 中使用 chartjs

網頁中使用報表可以選擇chartjs,他有很美的畫面,在github上的星星數有56k顆,也算是很穩定,是我接案最常用的一個報表套件。

閱讀更多

[不安裝套件] react 嵌入 TradingView 即時圖表

像股票一樣,虛擬幣也有已經開發好可用的即時蠟燭圖,TradingView這個網站讓我們甚至不用安裝套件,就可以直接嵌入任何網站。

但是react是es6 module,所以沒辦法直接用他官網的範例(CDN)直接貼上,所以我們需要改寫一下做成component方便放在各頁面中使用。

閱讀更多