Golang期末作業之電子商城（源碼）

作品介紹

1.網頁作品簡介方面：主要有：首頁商品詳情購物車訂單? 評價支付總共 5個頁面

2.作品使用的技術:這個作品基于Golang語言，并且結合一些前端的知識，例如:HTML、CSS、JS、AJAX等等知識點，同時連接數據庫的，實現一個簡單的電子商場項目。代碼水平也就是簡單的學生水平，希望有大佬可以幫忙提出改進的建議。

設計說明

1.首頁

首頁的內容包括頁眉、歡迎橫幅、輪播圖、主義內容區。

頁眉部分 (<header>)：
- 包含導航和搜索表單，用于用戶導航和搜索功能。
歡迎橫幅 (<div class="welcome-banner">)：
- 一個簡單的歡迎消息，通常用于引導用戶注意力。
輪播圖 (<div class="carousel">)：
- 一組圖片，通過 JavaScript 控制輪播效果。
主要內容區 (<main>)：
- 推薦商品標題 (<h2 class="recommended-title">)：標題部分，介紹推薦商品。
- 商品列表容器 (<ul class="goods-list">)

2.商品詳情

商品詳情的頁面也有導航欄，同時當用戶點擊某一件商品的時候，會跳轉到對應的商品詳情頁

頁眉部分 (<header>)：
- 包含一個導航欄，用于用戶導航至不同的頁面。
商品詳情列表 (<ul class="goods-detail">)

3.購物車

主體內容 (<body>)
- 頁眉部分 (<header>)：
  - 包含一個導航欄，用于用戶導航至不同的頁面。
- 頁面主標題 (<h1>購物車</h1>)：
  - 顯示頁面的主標題為“購物車”。
- 生成訂單按鈕 (<button id="generateOrder">生成訂單</button>)：
  - 提供一個按鈕，可能用于觸發生成用戶購物車中商品的訂單操作。
- 商品列表 (<table>)：
  - 用表格形式展示用戶已選購的商品信息。

4.訂單

與購物車頁面相似，同時利用時間戳來生成訂單時間

5.評價

與購物車頁面相似，利用一些前端的知識來實現評價功能

6.支付

與購物車頁面相似，簡單輸出支付的金額

效果展示

首頁

商品詳情

購物車

生成訂單

評價

支付

數據庫展示

代碼演示

首頁

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品列表</title><link rel="stylesheet" href="/Static/styles/index.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="Static/js/index.js"></script>
</head><body><!-- 導航欄 --><header><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul><form class="search-form" action="/search" method="get"><input type="text" name="query" placeholder="搜索商品..."><button type="submit">搜索</button></form></nav></header><div class="welcome-banner"><h2>歡迎來到我的商店</h2></div><!-- 輪播圖 --><div class="carousel"><img src="Static/images/1.png" alt=" 商品圖片1" class="active"><img src="Static/images/2.png" alt="商品圖片2"><img src="Static/images/3.png" alt="商品圖片3"><div class="controls"><span class="control-prev">&lt;</span><span class="control-next">&gt;</span></div></div><main><h2 class="recommended-title">推薦商品</h2><ul class="goods-list"> <!-- 這里是商品列表的容器 -->{{range .}}<li><a href="/goods?id={{ .GoodId }}"><img src="{{.ImageUrl}}" alt="{{.GoodName}}" style="width:100px;height:auto;"> <!-- 使用auto保持圖片比例 --><h2>{{.GoodName}}</h2><p class="price">價格: {{.Price}}</p><p>庫存: {{.Inventory}}</p><p>描述: {{.Description}}</p></a></li>{{end}}</ul></main>
</body></html>

/* 輪播圖樣式 */
.carousel {position: relative;width: 100%;max-width: 100%; /* 容器寬度占滿整個屏幕 */margin: 20px auto; /* 居中顯示 */overflow: hidden;
}.carousel img {width: 100%; /* 圖片寬度填充整個輪播圖容器 */height: auto; /* 高度自適應 */display: none;
}.carousel img.active {display: block;
}.carousel .controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);
}.carousel .control-prev, .carousel .control-next {background-color: rgba(0, 0, 0, 0.5);color: white;padding: 5px 10px;cursor: pointer;
}body {font-family: Arial, sans-serif;margin: 0;padding: 0;
}header {background-color: #333;color: white;padding: 10px 0;
}header nav ul {list-style-type: none;padding: 0;margin: 0;display: flex;justify-content: center;
}header nav ul li {margin: 0 15px;
}header nav ul li a {color: white;text-decoration: none;font-weight: bold;
}
/* 在index.css中添加 */
.search-form {display: inline-block;margin-left: 20px;
}.search-form input {padding: 5px;font-size: 14px;
}.search-form button {padding: 5px 10px;font-size: 14px;background-color: #007BFF;color: white;border: none;cursor: pointer;
}.welcome-banner {background-color: #f0f8ff; /* 淺藍色背景 */color: #333; /* 深色文本 */text-align: center; /* 文本居中 */padding: 50px 20px; /* 內邊距 */margin: 20px auto; /* 居中 */border-radius: 10px; /* 圓角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
}.welcome-banner h2 {margin: 0;font-size: 2em;
}/* 其他樣式 */
.goods-list {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;justify-content: space-around;
}.goods-list li {background-color: #fff;border: 1px solid #ddd;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);margin: 10px;padding: 15px;width: calc(33% - 40px);box-sizing: border-box;
}.goods-list li img {max-width: 100%;height: auto;
}.goods-list li h2 {font-size: 1.5em;margin: 10px 0;
}.goods-list li .price {color: #e91e63; /* 粉紅色價格 */font-weight: bold;
}.goods-list li p {margin: 5px 0;
}.recommended-title {text-align: center; /* 標題居中 */color: red; /* 標題顏色變紅 */
}

商品詳情

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品詳情</title><link rel="stylesheet" href="/Static/styles/goods.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="Static/js/goods.js"></script></head><body><!-- 導航欄 --><header><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul></nav></header><main><ul class="goods-detail"><h1>{{.GoodName}}</h1><img src="{{.ImageUrl}}" alt="{{.GoodName}}" style="width:300px;height:auto;"><p class="price">價格: {{.Price}}</p><p>庫存: {{.Inventory}}</p><p>描述: {{.Description}}</p><button class="add-to-cart" data-goods-id="{{.GoodId}}">加入購物車</button></ul></main></body></html>

/* 導航欄樣式 */  
header nav {  background-color: #333;  padding: 10px 0;  
}  header nav ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  justify-content: space-around;  align-items: center;  
}  header nav ul li a {  color: #fff;  text-decoration: none;  padding: 10px 15px;  display: block;  transition: background-color 0.3s ease;  
}  header nav ul li a:hover {  background-color: #555;  
}  /* 設置 main 的寬度、邊距等 */  
main {  width: 100%; /* 或者你想要的寬度 */  margin: 20px auto; /* 上下外邊距為20px，左右自動居中 */  padding: 20px; /* 內邊距 */  box-sizing: border-box; /* 使得padding不影響元素的寬度 */  display: flex; /* 設置為 flex 容器 */  justify-content: center; /* 水平居中 */  align-items: center; /* 垂直居中（如果 main 只有一個子元素的話） */  /* 注意：如果 main 中有多個子元素，你可能需要調整這些屬性或移除它們 */  
}  /* 假設 goods-detail 現在是 li 的父元素 */  
.goods-list { /* 可能你需要將 goods-detail 改為一個更有意義的類名，如 goods-list */  display: flex; /* 設置為 flex 容器 */  flex-direction: column; /* 子項垂直排列 */  align-items: center; /* 子項在交叉軸上居中（對于列布局來說，就是水平居中） */  text-align: center; /* 文本內容居中 */  max-width: 800px; /* 假設你希望商品詳情有一個最大寬度 */  margin: 0 auto; /* 左右外邊距自動，以在水平方向上居中 */  
}  /* 設置 goods-detail 的樣式（現在作為 li 的樣式） */  
.goods-list li { /* 假設每個商品詳情項是一個 li 元素 */  list-style-type: none; /* 移除默認的列表樣式 */  margin-bottom: 20px; /* 每個商品詳情項之間的間距 */  
}  /* 其他樣式保持不變 */  
/* ... */  /* 設置加入購物車按鈕的樣式 */  
.goods-detail .add-to-cart {  display: inline-block; /* 內聯塊級元素 */  padding: 10px 20px; /* 內邊距 */  background-color: #4CAF50; /* 背景色 */  color: white; /* 文字顏色 */  border: none; /* 無邊框 */  border-radius: 4px; /* 邊框圓角 */  cursor: pointer; /* 鼠標懸停時變為小手形狀 */  text-decoration: none; /* 去除下劃線 */  transition: background-color 0.3s ease; /* 背景色過渡效果 */  
}  /* 按鈕點擊效果 */  
.goods-detail .add-to-cart:hover {  background-color: #45a049; /* 鼠標懸停時的背景色 */  
}

購物車

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>購物車</title><link rel="stylesheet" href="/Static/styles/carts.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="Static/js/carts.js"></script>
</head><body><header><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul></nav></header><h1>購物車</h1><button id="generateOrder">生成訂單</button><table><tr><th>商品ID</th><th>商品名稱</th><th>圖片</th><th>數量</th><th>操作</th></tr>{{range $key, $value := .}}<tr><td>{{$value.GoodId}}</td><td>{{$value.GoodName}}</td><td><img src="{{$value.ImageUrl}}" alt="{{$value.GoodName}}" width="100"></td><td>{{$value.Quantity}}</td><td><button class="delete-item" data-goods-id="{{$value.GoodId}}">刪除</button></td></tr>{{end}}</table>
</body></html>

訂單

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>訂單</title><link rel="stylesheet" href="/Static/styles/order.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="Static/js/order.js"></script>
</head><body><header><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul></nav></header><div class="container"><h1>訂單詳情</h1><table><thead><tr><th>訂單ID</th><th>商品名稱</th><th>數量</th><th>單價</th><th>總價</th><th>訂單時間</th></tr></thead><tbody>{{ range $index, $order := . }}<tr><td>{{ $order.OrderId }}</td><td>{{ $order.GoodName }}</td><td>{{ $order.Quantity }}</td><td>{{ $order.Price }}</td><td class="total-price">{{ $order.TotalPrice }}</td><td>{{ $order.OrderTime }}</td></tr>{{ end }}</tbody></table><div class="payment-section"><label for="payment-method">選擇支付方式:</label><select id="payment-method" name="payment-method"><option value="weChat">微信</option><option value="alipay">支付寶</option><option value="bankCardPayment">銀行卡</option></select></div><button id="checkout">結算</button></div>
</body></html>

評價

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品詳情</title><link rel="stylesheet" href="/Static/styles/comment.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="Static/js/comment.js"></script>
</head><body><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul></nav><div class="container"><h1>商品評價</h1><div class="goods">{{range .}}<div class="good"><img src="{{.ImageUrl}}" alt="{{.GoodName}}"><h2>{{.GoodName}}</h2><p>{{.Description}}</p><div class="review-form"><h3>發表評價</h3><form class="reviewForm" data-product-id="{{.GoodId}}"><input type="hidden" class="productId" value="{{.GoodId}}"><textarea class="reviewContent" placeholder="請輸入您的評價"></textarea><button type="submit">提交評價</button></form></div></div>{{end}}</div></div>
</body></html>

支付

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>支付成功頁面</title><link rel="stylesheet" href="/Static/styles/pay.css">
</head><body><header><nav><ul><li><a href="/">首頁</a></li><li><a href="/showCart">購物車</a></li><li><a href="/order">訂單</a></li><li><a href="/showComment">評價</a></li><li><a href="/payment">支付</a></li></ul></nav></header><div class="container"><h1>支付{{.Amount}}元成功</h1><!-- 如果需要顯示訂單詳情，可以在這里添加表格或其他HTML結構 --></div>
</body></html>