此作品使用於:分享筆記

專案動機
在一次跟達內小幫手確認進度中想索取學長姐們的筆記,卻發現沒有可以留存或有一個共同的平台可以使用。
因此計畫結合課程中學到的Web前端框架Vue與後端Node.js、MySQL來實作。

部落格首頁

部落格登錄頁-第三方登錄

部落格文章頁

技術重點
技術1.Vue(前端) + Node.js(後端) + MySQL(資料庫)。



技術2.Google reCAPTCHA V.3 驗證機器人

在客戶端用戶填寫完資料後會產生一組憑證,傳送至後端後透過呼叫google api來為這次的憑證打分數,依官方規定分數有超過0.5將視為真人。
且相較於V.2版本的惱人指定圖片點選,V.3版本是全自動依照使用者行為來產生憑證的。



技術3.使用者進行圖片擷取與上傳

在撰寫(修改)文章與大頭貼的部分可以讓使用者上傳後的圖片將存取至Amazon S3的貯存桶中。




技術4.網站部署





專案心得
在本次專案整體製作中是非常興奮與有成就感的,興奮的點在於每次訂定新進度時不知道自己想出來的功能自己能否實踐,而成就感則是在這次實作過程中技術上的所有難點最後都自己解決。
那這次專案也是強迫自己在後端方面要多完成幾項功能,使自己在網頁方面能更有進爭力,也期待自己日後的表現。
Comments