Spring Boot 大型线上商城项目实战教程:新蜂商城首页制作-1_新蜂商城讲解

作者：从前慢现在也慢 | 2024-03-05 23:20:00

踩

新蜂商城讲解

Spring Boot 大型线上商城项目实战教程 - 程序员十三 - 掘金小册

后台管理系统通常只是网站拥有者在查看和使用，而商城页面则有较大的不同。商城中的所有页面都会被用户访问，涉及的用户操作行为多为查看。也就是把后台管理系统添加和编辑的数据通过商城各个模块的页面呈现给用户。这些页面偏重于展示，供用户查看，包括商品信息、购物车、商品归类、推荐商品、用户订单等信息的查看。接下来，笔者将会讲解商城端功能模块的开发。接下来的两个章节主要是新蜂商城首页功能的开发和相关模块的完善。

31.1 商城首页设计要素

相较于后台管理系统，商城端相关页面的设计和制作会更注重用户体验。虽然涉及的操作只是数据查询和数据聚合，但这不代表开发难度就会降低。商城端的页面往往更加注重页面观感和元素设计，做到简洁、美观、实用。

在新蜂商城页面中，首页是最先被用户浏览到的页面，也是非常重要的入口。如果用户在该页面就萌生退意那就证明页面的设计还需要再仔细斟酌。因此，新蜂商城的首页的设计和制作就是重中之重。关于商城首页的设计和制作笔者总结了4个设计注意事项。

（1）图文结合

图文相结合最大的优势就是直观、易懂、生动。要让用户在短短几秒钟之内就了解商城的一系列内容，仅凭简短的文字是不够的，还需要使用图片从侧面衬托主题。精准的文案和合适的配图更能吸引用户。尤其是商城系统，想要在首页更完整地将商品内容输出给用户，推荐采取图文结合的方式。

（2）精心设计

在电商网站中，首页是寸土寸金的。因此，首页的文字和图片要精心设计，尽可能用最少的篇幅把信息表达清楚。商品的推荐文案和展示图片都需要再三斟酌。

（3）降低交互难度

视觉体验决定用户的停留时间。用户交互部分的视觉设计必须符合逻辑，比如导航栏、轮播图、商品类目、搜索框等。各个模块一定不要过度设计，可点击部分尽要意图明显，降低用户对首页交互的难度。简单、符合用户习惯即可。

（4）完整的网站导航和清晰的网站Logo

网站导航一般包括网站首页、项目介绍、公司产品、联系我们、关于我们等分类。比如天猫、京东在页面的顶部和底部都会设计很多导航链接。新蜂商城借鉴了这些设计。导航所占位置有限，所以应该放最重要的内容。

清晰的网站Logo能让用户直观地记住商城的名称和形象，也能够给用户展现品牌的特色。一个优秀的Logo会给网站带来积极的影响。同时，需要将Logo图片设置为带有网站首页的链接，以方便用户点击Logo直接返回首页。这也是最常见的做法。

31.2 新蜂商城首页的排版设计

后台管理系统的布局和代码实现完全使用AdminLTE3模板，而商城端的页面则是自行设计、自行开发的。这是商城端与后台管理系统在开发时最大的不同。

新蜂商城首页布局和排版设计如下图所示。

index-design-detail

由上图可以看出，新蜂商城首屏页面的整个设计版面被切分成八个部分：

①导航及个人信息：该区域主要用于放置与新蜂商城相关的导航链接、登录信息、购物车数据等内容。

②商城Logo及搜索框：可以放置Logo图片、商品搜索输入框、用户输入需要的商品关键字、跳转到对应的商品搜索列表页。

③商品分类三级联动：展示后台已配置的所有的商品类目数据，包括一级分类、二级分类、三级分类。

④轮播图：以轮播的形式展示后台配置的轮播图。

⑤热销商品：展示后台配置的热销商品数据。

⑥新品推荐：展示后台配置的新品数据。

⑦推荐商品：展示后台配置的推荐商品数据。

⑧页脚（导航）：该区域主要放置备案信息、新蜂商城产品介绍、基础信息、联系方式等。

当然，以上版面设计只是针对新蜂商城这个项目，在开源社区或者企业开发中还有许多其他的商城系统项目。由于前端的设计和实现非常灵活多变，不同的商城系统可能有不同的页面样式和页面布局。

以上是对新蜂商城系统首页布局的大致切分和讲解，接下来是具体的页面和样式编码的实现。

31.3 新蜂商城首页基础样式的实现

由于篇幅限制，这里直接给出代码文件，分别是样式文件、基础的展示图片及首页的代码，文件名是index-html.zip，读者可以直接下载并查看源码，文件目录结构如下所示：

arduino

复制代码

html ├── css ├── image ├── styles └── index.html

分别是样式文件、基础的展示图片及首页的代码，html代码如下：

html

复制代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新蜂商城 NewBee商城 newbee-mall</title> <link rel="stylesheet" href="css/iconfont.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="styles/header.css"> <link rel="stylesheet" href="styles/index.css"> </head> <body> <header id="header"> <div class="center"> <ul class="fl"> <li><a href="/index">新蜂商城</a></li> <li><a href="/admin">后台管理系统</a></li> <li><a href="https://edu.csdn.net/course/detail/26258">课程视频</a></li> <li><a href="https://juejin.cn/book/6844733814074245133/section/6844733814103605255">课程文档</a></li>  </ul> <div class="fr"> <ul class="login"> <li><a href="/login">登录</a></li> <li><a href="/register">注册</a></li> </ul> <div class="shopcart"> <a href="##" style="color: white;"><i class="iconfont icon-cart"></i> 购物车(13)</a> </div> </div> </div> </header> <content id="content"> <nav id="nav"> <div class="banner_x center"> <a href="/index" class="logo"><h1>新蜂商城</h1></a> <a href="/index" class="gif"></a> <div class="fr"> <div class="search"> <input class="text" type="text" id="keyword" autocomplete="off"> <div class="search_hot"> </div> </div> <div class="button iconfont icon-search"></div> </div> </div> </nav> <div id="banner"> <div class="all-sort-list"> <div class="item"> <h3><span>·</span><a href="##">家电数码手机</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">女装男装穿搭</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">家具家饰家纺</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">运动户外乐器</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">游戏动漫影视</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">美妆清洁宠物</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">工具装修建材</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">鞋靴箱包配件</a></h3> </div> <div class="item"> <h3><span>·</span><a href="##">玩具孕产用品</a></h3> </div> </div> <div class="swiper-container fl"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="https://juejin.cn/book/6844733814074245133/section/6844733814103605255"> <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png" alt=""> </a> </div> </div> </div> </div> <div id="sub_banner"> <div class="hot-image"> <a href="##"> <img src="image/hot3.jpg" alt="热销"> </a> </div>  </div> <div id="flash"> <h2>新品上线</h2> <ul> <li> <a href="##"> <img src="image/new.png" alt="新品"> <p class="name">HUAWEI Mate 30 Pro 双4000万徕卡电影四摄</p> <p class="discount">超曲面OLED环幕屏</p> <p class="item_price">5399</p> </a> </li>  </ul> </div> <div id="recommend"> <h2>为你推荐</h2> <a href="##" class="more">查看更多>></a> <ul> <li> <a href="##"> <div class="info discount">智能降噪长久续航</div> <img src="image/recommend.jpg" alt="索尼 WH-1000XM3 头戴式耳机"> <p class="name">索尼 WH-1000XM3 头戴式耳机</p> <p class="item_price">2599</p> <p class="counter">猜你喜欢</p> <div class="comment"> <p>新蜂精选</p> <p>好物也可以不贵</p> </div> </a> </li>  </ul> </div> </content> <div class="site-footer"> <div class="footer-related"> <div class="footer-article w1100"> <dl class="contact clearfix"> <dt class="fl"> <i class="iconfont"></i> </dt> <dd class="fl"> <p class="text">人工客服</p> <p class="tel">400-xxx-xx13</p> <a href="##">在线咨询</a> </dd> </dl> <dl class="col-article"> <dt>帮助中心</dt> <dd><a rel="nofollow" href="https://gitee.com/newbee-ltd/newbee-mall" target="_blank">账户管理</a></dd> <dd><a rel="nofollow" href="https://gitee.com/newbee-ltd/newbee-mall" target="_blank">购物指南</a></dd> <dd><a rel="nofollow" href="https://gitee.com/newbee-ltd/newbee-mall" target="_blank">订单操作</a></dd> </dl>  </div>  <div class="footer-info w1100"> <div class="info-text w1100"> <p><a href="https://gitee.com/newbee-ltd/newbee-mall" target="_blank">新蜂商城   |   Powered by 十三  |  </a>  QQ交流群：796794009   </p> <p><a href="https://gitee.com/newbee-ltd/newbee-mall" target="_blank">Copyright ©newbee.ltd All Rights Reserved.  |   浙ICP备17008806号-5 </a></p> </div> </div> </div> </div> </body> </html>

通过首页的静态页面源码，可以看出导航及个人信息、商城Logo及搜索框、商品分类三级联动、轮播图、热销商品、新品推荐、推荐商品、页脚（导航）等元素都已经设置在对应的页面区域，只是当前页面中的交互效果还没有实现。此时对应的商品文案、商品图片也都是“假数据”，并非在数据库中读取的数据。后续还要继续对该页面进行完善。

该HTML代码是可以直接在本地通过浏览器打开的，页面效果如下图所示。

index-page

将代码解压后，依次查看了样式文件、图片文件，最后双击 html 文件直接就在浏览器中打开了，大家可以对照着我提供的源码以及浏览器中的效果，并结合文章中分析的页面设计和排版来理解这部分内容，之后我们主要是将页面整合到我们的系统中并进行实际的功能编码。

读者可以对照笔者提供的源码和浏览器呈现的效果，并结合文章分析的页面设计和排版来理解这部分内容。这里只完成了前端页面的样式制作，仅仅实现了静态页面效果。页面上的数据也是固定不变的数据，没有与数据库进行交互并进行数据的读取和渲染。页面的交互和数据的动态获取还没有完成。接下来将会讲解首页展示数据的查询，后台管理系统配置的内容在首页的填充。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/194511?site