iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

前後端整合,用Spring boot 與React 開發屬於自己的記帳網頁 系列

主要介紹前後端兩個方面的技術,教大家後端的Spring boot、Spring Security開發,前端則是會使用React、bootStrap、chart.js等技術教大家基本的CRUD技能,以及比較少見的,用圖表方式呈現資料的功能。

參賽天數 24 天 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 開發根據不同類別篩選帳目API

前言 關於記帳,除了紀錄、修改、刪除跟查找資料之外,我們還會想要依照類別去看自己花了哪些,可能是關於食物的花費,或是交通、娛樂的花費我們花費了多少,有了這些資訊...

2024-09-24 ‧ 由 ansath 分享
DAY 12

Day12 創建後端讀取指定周數時間帳目的特殊API

前言 作為一個記帳工具,讀取一周的帳目是非常重要的,這樣我們才能知道這周花了多少錢,錢都花在哪裡。 而這也是我們後端開發路程中記帳類別的最後一個API,完成這一...

2024-09-25 ‧ 由 ansath 分享
DAY 13

Day13 React & Vite介紹與啟動第一個前端專案

前言 接下來就來到前端開發的環節了,讓我們一起來認識前端的使用工具跟啟動屬於自己的第一個前端專案 React的介紹 React是一個流行的JavaScript庫...

2024-09-26 ‧ 由 ansath 分享
DAY 14

Day14 引用bootstrap並設置Header 跟 Footer

前言 在創建我們第一個專案後,我們接下來就要開始寫網頁了。React本身是一個靈活度很高的框架,可以把你寫好的網頁單獨成呈現,也可以合併呈現。 匯入BootSt...

2024-09-27 ‧ 由 ansath 分享
DAY 15

Day15 用React開發前端新增帳目畫面

前言 在前一天完成Header與Footer之後,接下來我們就要開發正式的頁面啦!今天的部分,主要是教大家如何撰寫前端的頁面,我們要先從新增帳目的部分開始,再往...

2024-09-28 ‧ 由 ansath 分享
DAY 16

Day16 前後端整合,用React串接後端Spring boot記帳功能

前言 在昨天的練習中,我們成功學會修改畫面,建置表單的名稱,但我相信各位一定覺得少了一點什麼,平常看到的畫面都是有欄位框框、以及按下Submit會有反應,而現在...

2024-09-29 ‧ 由 ansath 分享
DAY 17

Day17 React前端頁面 - 開發記帳總清單頁面

前言 在開發完第一個輸入帳目資料後,我們其實已經掌握了重要的React開發觀念,因為React是一個框架,裏頭包含了Html、CSS、JS的程式,我們沒有辦法一...

2024-09-30 ‧ 由 ansath 分享
DAY 18

Day18 React前端,利用router來串接記帳總頁面引導Add Account

前言 接下來就要到比較困難的部分了,這邊會在不同的頁面中跳轉,修改內容,來達成當我們點選Add Account後,會自動跳轉到新增帳目的頁面,然後當我們新增玩資...

2024-10-01 ‧ 由 ansath 分享
DAY 19

Day19 React前端開發 修改記帳頁面開發-顯示修改記帳頁面

前言 在後端開發的時候我們有開發CRUD的功能,在前端我們也要實作這個功能,我們在開發的時候不難發現,新增跟修改應該是可以當作同一個頁面,這樣既可以減少開發的時...

2024-10-02 ‧ 由 ansath 分享
DAY 20

Day20 前端React開發:更新記帳資訊與刪除資料

前言 我們在前一天成功的讀取到資料庫的資料,並且顯示到React中,接下來我們要進一步,讓資料能夠更新並且存到後端中,當這些都完成之後,就只剩下刪除這個功能,而...

2024-10-03 ‧ 由 ansath 分享