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>