Golang期末作业之电子商城（源码）

)：

推荐商品标题 (
)：标题部分，介绍推荐商品。
商品列表容器 (

2.商品详情

商品详情的页面也有导航栏，同时当用户点击某一件商品的时候，会跳转到对应的商品详情页

页眉部分 (
)：
- 包含一个导航栏，用于用户导航至不同的页面。

商品详情列表 (

)

3.购物车

主体内容 ()

页眉部分 (
)：
- 包含一个导航栏，用于用户导航至不同的页面。
页面主标题 (
购物车
)：
- 显示页面的主标题为“购物车”。
生成订单按钮 ()：
- 提供一个按钮，可能用于触发生成用户购物车中商品的订单操作。

商品列表 (

)：

用表格形式展示用户已选购的商品信息。

4.订单

与购物车页面相似，同时利用时间戳来生成订单时间

5.评价

与购物车页面相似，利用一些前端的知识来实现评价功能

6.支付

与购物车页面相似，简单输出支付的金额

效果展示

首页

商品详情

购物车

生成订单

评价

支付

数据库展示

代码演示

首页


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;"> 
                    <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; /* 标题颜色变红 */
}

商品详情


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; /* 鼠标悬停时的背景色 */  
}

购物车


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>商品IDth>
            <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>

订单


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>订单IDth>
                    <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>

评价


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>

支付


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>
        
    div>
body>
 
html>

代码太多了，小郑就不展示完整代码了，这个电子商场的作业还不是很完善，小郑有时间的话会进行优化修改。

相关阅读:
Vim实用技巧_7.模式匹配和查找
vue部署之后提示用户更新的两种方式（http请求和worker线程请求）
BM58 字符串的排列
第五节、常见的基础问题
【数据库】openGauss3.1.0版本做了哪些优化
RuntimeError: Error compiling objects for extension手把手带你解决（超详细）
Docker安装Jenkins笔记
昆仑芯 AI 加速卡 R200 与龙蜥操作系统完成产品兼容认证
vue3基础语法
SLAM中的二进制词袋生成过程和工作原理

原文地址：https://blog.csdn.net/m0_74948742/article/details/140296815

作品介绍

设计说明

1.首页

)：标题部分，介绍推荐商品。