• 推荐商品标题 (

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

• 商品列表容器 (
  )

2.商品详情

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

• 页眉部分 (

  )：

  • 包含一个导航栏，用于用户导航至不同的页面。
• 商品详情列表 (
  )

  3.购物车

  • 主体内容 ()

    • 页眉部分 (

      )：

      • 包含一个导航栏，用于用户导航至不同的页面。

    • 页面主标题 (

      购物车

      )：
      • 显示页面的主标题为“购物车”。

    • 生成订单按钮 (生成订单)：

      • 提供一个按钮，可能用于触发生成用户购物车中商品的订单操作。

    • 商品列表 (

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

      4.订单

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

      5.评价

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

      6.支付

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

      效果展示

      首页

      

      商品详情

      

      购物车

      

      生成订单

      

      评价

      

      支付

      

      数据库展示

      

      

      代码演示

      首页

                                                    
                    
            
               
      欢迎来到我的商店
           
                 
                                          
                   <             >         
           
            
                
      推荐商品
                
                    {{range .}}             
                       { .GoodId }}">                     {.ImageUrl}}" alt="{{.GoodName}}" style="width:100px;height:auto;">                      
      {{.GoodName}}
                           
      价格: {{.Price}}
                           
      库存: {{.Inventory}}
                           
      描述: {{.Description}}
                                    
                   {{end}}         
           
         

      /* 轮播图样式 */ .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; /* 标题颜色变红 */ } 

      商品详情

                                                     
                    
           
               
                   
      {{.GoodName}}
                   {.ImageUrl}}" alt="{{.GoodName}}" style="width:300px;height:auto;">             
      价格: {{.Price}}
                   
      库存: {{.Inventory}}
                   
      描述: {{.Description}}
                    {.GoodId}}">加入购物车         
           
          

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

      购物车

                                               
                    
           
      购物车
           生成订单     

      {{range $key, $value := .}} {{end}}

      商品ID	商品名称	图片	数量	操作
      {{$value.GoodId}}	{{$value.GoodName}}	{$value.ImageUrl}}" alt="{{$value.GoodName}}" width="100">	{{$value.Quantity}}	{$value.GoodId}}">删除

      订单

                                               
                    
            
               
      订单详情
                                {{ range $index, $order := . }}                                  {{ end }}             
                   
                       
                           
      订单ID
                           
      商品名称
                           
      数量
                           
      单价
                           
      总价
                           
      订单时间
                       
                   
                   
                           
      {{ $order.OrderId }}
                           
      {{ $order.GoodName }}
                           
      {{ $order.Quantity }}
                           
      {{ $order.Price }}
                           
      {{ $order.TotalPrice }}
                            
      {{ $order.OrderTime }}
                       
               
                
                   选择支付方式:                              微信                 支付宝                 银行卡                      
                结算     
         

      评价

                                                     
               
      商品评价
               
                   {{range .}}             
                       {.ImageUrl}}" alt="{{.GoodName}}">                 
      {{.GoodName}}
                       
      {{.Description}}
                       
                           
      发表评价
                           
      {.GoodId}}">                         {.GoodId}}">                                                  提交评价                     
                       
                   
                   {{end}}         
           
         

      支付

                                     
                    
           
               
      支付{{.Amount}}元成功
                    
         

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