iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

跳脫MVC,Laravel + React 建立電商網站 系列

這系列的挑戰沒意外會分三個主題進行,React、Laravel 以及最後想做出一個成品:期望將兩個框架合併做出一個簡易的電商網站。
React 本身需要具備非常基礎的html以及JS觀念,如果從細節開始記錄就寫不完了XD,因此只會"稍微"提到用到的前端基本觀念

鐵人鍊成 | 共 30 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21 Laravel + React 實戰之路 -5(商品列表-後端資料修改)

昨天有說到 因為丟給js的collection 並不好準確地用JavaScropt來取得我們需要的資料,因此我們需要再丟到畫面之前把資料好好地整理一下。首先先創...

2022-09-25 ‧ 由 bennett 分享
DAY 22

Day 22 Laravel + React 實戰之路 -6商品詳細頁(前端)

今天我們要來進行商品詳細頁的撰寫,其實原理都差不多,所以話不多說,直接進入主題來實做看看吧! 接下來我們一樣來規畫整個畫面,我這邊先做畫面出來,先不丟資料~我們...

2022-09-26 ‧ 由 bennett 分享
DAY 23

Day 23 Laravel + React 實戰之路 -6商品詳細頁(後端)

今天的目標是把商品詳細頁的後端寫完,因為商品詳細頁只會有單一商品,因此這裡我只取id = 1的商品來撰寫因為商品詳細頁還沒有做入口的連結,因此我這邊就直接打網址...

2022-09-27 ‧ 由 bennett 分享
DAY 24

Day 24 番外篇 - 試試看刻一個元件

因為我想要做到類似這個的效果呈現: 結果我發現 tailwind好像沒有類似的東西給我套(如果有的話,告訴我,拜託!!),然後這個專案頭已經洗下去了,tailw...

2022-09-28 ‧ 由 bennett 分享
DAY 25

Day 25 Laravel + React 實戰之路 -7電商轉換最後一哩路

開電商的目的是什麼?賺錢!!怎麼賺錢? 接外包!! 賣商品!! 所以 我們的基本畫面之中 一定會有下訂單購買的地方!今天就來完成基本的結帳畫面。就用結帳來當作...

2022-09-29 ‧ 由 bennett 分享
DAY 26

Day 26 Laravel + React 實戰之路 -7電商轉換最後一哩路

我們今天的目標就是把訂單送出畫面做好,然後更新訂單資料表,我們的專案就基本完結了。 建立訂單的修改 API的驗證 但在開始之前,我們要先把api修改成需要身分驗...

2022-09-30 ‧ 由 bennett 分享
DAY 27

Day 27 Reack Hook能吃嗎?

還記得在Day 8的時候,我有提到過一句話:State,只能在class Component之中使用。但在前面的實作專案中,相信有眼尖的同學觀察到了:不管是範例...

2022-10-01 ‧ 由 bennett 分享
DAY 28

Day 28 React與常見的前端套件 - Swiper + SweetAlert

今天要來嘗試看看,過去在開發的時候會使用到的前端套件。 真的要用套件嗎? 其實 如果是寫純前端(HTML 5 + CSS + JavaScript),而沒有使用...

2022-10-02 ‧ 由 bennett 分享
DAY 29

Day 29 Laravel + React 實戰之路 -8 前端套件導入

昨天我們已經在 實戰之路的專案中把前端套件安裝好了,今天就在專案之中加入套件吧! 還記得在 Day25 - 前端,結帳按鈕修改 的時候有提到說,我們送出訂單的...

2022-10-03 ‧ 由 bennett 分享
DAY 30

Day 30 最終回

我要先謝謝看到這篇的你!今天來到鐵人賽的第30天,其實不知不覺就進展到最後一天了。今天的文章內容,不太想要寫 如何寫程式或者Laravel跟React怎麼寫之類...

2022-10-04 ‧ 由 bennett 分享