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