作品介绍
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"><</span>
<span class="control-next">></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>代码太多了，小郑就不展示完整代码了，这个电子商场的作业还不是很完善，小郑有时间的话会进行优化修改。
