我个人完成每个功能的步骤是:
- 1.完成功能用到的model;
- 2.完成Dao层,设计sql;
- 3.完成service层,提供可能用到的接口
- 4.完成controller
- 5.完成页面,将controller和页面的交互很好的结合
- 6.测试+修改。
之前我们在分模块的时候,是按照操作的对象分模块的,不过一般首页,最好分一个模块出来,这里首页要完成的功能:
- 菜单的显示
- 轮播图商品的显示
- 最新商品列表的显示
- 1.菜单的显示
1). 新建菜单类,Menu.class
package com.qyuz.model; public class Menu { Integer id; //具体类别 String tmenu; //大类 String smenu; //导航 String fmenu; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getTmenu() { return tmenu; } public void setTmenu(String tmenu) { this.tmenu = tmenu; } public String getSmenu() { return smenu; } public void setSmenu(String smenu) { this.smenu = smenu; } public String getFmenu() { return fmenu; } public void setFmenu(String fmenu) { this.fmenu = fmenu; } }
2).完成Dao层,Dao层包括dao层接口和mybatis的mapper.xml,
MenuDao.class:
package com.qyuz.dao; import java.util.HashMap; import java.util.List; import com.qyuz.model.Menu; public interface MenuDao { public List<Menu> getMainMenu(HashMap map); }
MenuDaoMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.qyuz.dao.MenuDao"> <select id="getMainMenu" parameterType="Map" resultType="com.qyuz.model.Menu" > select distinct * from category where 1=1 <if test="id != null"> and id=${id} </if> <if test="smenu != null"> and smenu=${smenu} </if> <if test="fmenu != null"> and fmenu=${fmenu} </if> <if test="start != null and end != null"> limit ${start},${end} </if> </select> </mapper>
3).完成service层,包括接口和实现
MenuService.class:
package com.qyuz.service; import java.util.HashMap; import java.util.List; import com.qyuz.model.Menu; public interface IMenuService { public HashMap<String,HashMap<String,List<Menu>>> getCategorysMap(HashMap map); }
这里菜单因为有三层,为了在页面处理方便,我用map存储。
MenuServiceImpl.class:
package com.qyuz.service.impl; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.qyuz.dao.MenuDao; import com.qyuz.model.Menu; import com.qyuz.service.IMenuService; @Service("menuService") public class MenuServiceImpl implements IMenuService{ @Autowired MenuDao dao; @Override public HashMap<String, HashMap<String, List<Menu>>> getCategorysMap( HashMap map) { List<Menu> menus = dao.getMainMenu(new HashMap()); HashMap<String, HashMap<String, List<Menu>>> result = new HashMap<String, HashMap<String, List<Menu>>>(); for(Menu m :menus){ String fMenu = m.getFmenu(); String sMenu = m.getSmenu(); if(!result.containsKey(fMenu)){ //从第一级菜单开始就没有 ArrayList<Menu> tm = new ArrayList<Menu>(); tm.add(m); HashMap sm = new HashMap(); sm.put(sMenu, tm); result.put(fMenu, sm); }else{ if(!result.get(fMenu).containsKey(sMenu)){ //从第二级菜单开始没有 ArrayList<Menu> tm = new ArrayList<Menu>(); tm.add(m); result.get(fMenu).put(sMenu, tm); }else{ //从第三级菜单开始没有 result.get(fMenu).get(sMenu).add(m); } } } return result; } }
4).完成controller部分,
HomeController.class:
package com.qyuz.controller; import java.util.HashMap; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import com.qyuz.model.Menu; import com.qyuz.service.IMenuService; /** * 处理电商首页相关逻辑 * @author jxh * */ @Controller @RequestMapping public class HomeController { @Autowired IMenuService menuService; /** * 首页 * @param map * @return */ @RequestMapping("/index") public String index(HttpServletRequest request,ModelMap map){ //菜单 HashMap<String, HashMap<String, List<Menu>>> ms = menuService.getCategorysMap(null); request.getSession().setAttribute("menu", ms); return "home"; } }
5) 完成页面部分,并结合页面和controller
①将原型中的js、css、images、fonts拷贝到webapp文件夹下;
②页面处理前台处理map类型的时候,我们用jsp的标签库处理下,具体配置见jsp标签库配置;
③观察页面可以发现,所有的页面,菜单以上的头部是一样,底部也是一样的,就是内容在变化,因此我们把头部和底部单独出来,分别命名为header.jsp、footer.jsp,每个页面在相应位置引入即可,例如:
<%@ include file="common/header.jsp" %> …… <%@ include file="common/footer.jsp"%>
具体文件存放结构如下:
各个代码参考如下:
header.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Home</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.min.js"></script> <!-- Custom Theme files --> <!--theme-style--> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <!--//theme-style--> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- start menu --> <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/memenu.js"></script> <script> $(document).ready(function() { $(".memenu").memenu(); }); </script> <script src="js/simpleCart.min.js"> </script> <!-- slide --> <script src="js/responsiveslides.min.js"></script> <script> $(function() { $("#slider").responsiveSlides({ auto : true, speed : 500, namespace : "callbacks", pager : true, }); }); </script> </head> <body> <!--header--> <div class="header"> <div class="header-top"> <div class="container"> <div class="col-sm-4 world"> <ul> <li><select class="in-drop"> <option>English</option> <option>Japanese</option> <option>French</option> </select> </li> <li><select class="in-drop1"> <option>Dollar</option> <option>Euro</option> <option>Yen</option> </select></li> </ul> </div> <div class="col-sm-4 logo"> <a href="index.html"><img src="images/logo.png" alt=""> </a> </div> <div class="col-sm-4 header-left"> <p class="log"> <a href="account.html">Login</a> <span>or</span><a href="account.html">Signup</a> </p> <div class="cart box_1"> <a href="checkout.html"> <h3> <div class="total"> <span class="simpleCart_total"></span> </div> <img src="images/cart.png" alt="" /> </h3> </a> <p> <a href="javascript:;" class="simpleCart_empty">Empty Cart</a> </p> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> <div class="container"> <div class="head-top"> <div class="col-sm-2 number"> <span><i class="glyphicon glyphicon-phone"></i>085 596 234</span> </div> <div class="col-sm-8 h_menu4"> <ul class="memenu skyblue"> <li class=" grid"><a href="index.do">Home</a></li> <c:forEach items="${menu}" var="fm"> <li><a href="#">${fm.key}</a> <div class="mepanel"> <div class="row"> <c:forEach items="${fm.value}" var="sm"> <div class="col1"> <div class="h_nav"> <h4>${sm.key}</h4> <ul> <c:forEach items="${sm.value}" var="tm"> <li><a href="products.html">${tm.tmenu}</a> </li> </c:forEach> </ul> </div> </div> </c:forEach> </div> </div></li> </c:forEach> <li><a class="color6" href="contact.html">Conact</a></li> </ul> </div> <div class="col-sm-2 search"> <a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a> </div> <div class="clearfix"></div> <!---pop-up-box----> <script type="text/javascript" src="js/modernizr.custom.min.js"></script> <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/jquery.magnific-popup.js" type="text/javascript"></script> <!---//pop-up-box----> <div id="small-dialog" class="mfp-hide"> <div class="search-top"> <div class="login"> <input type="submit" value=""> <input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}"> </div> <p>Shopping</p> </div> </div> <script> $(document).ready(function() { $('.popup-with-zoom-anim').magnificPopup({ type : 'inline', fixedContentPos : false, fixedBgPos : true, overflowY : 'auto', closeBtnInside : true, preloader : false, midClick : true, removalDelay : 300, mainClass : 'my-mfp-zoom-in' }); }); </script> <!----> </div> </div> </div>
footer.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!--footer--> <div class="footer"> <div class="container"> <div class="footer-top"> <div class="col-md-4 top-footer1"> <h2>Newsletter</h2> <form> <input type="text" value="" onFocus="this.value='';" onBlur="if (this.value == '') {this.value ='';}"> <input type="submit" value="SUBSCRIBE"> </form> </div> <div class="clearfix"> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="col-sm-3 footer-bottom-cate"> <h6>Categories</h6> <ul> <li><a href="#">Curabitur sapien</a></li> <li><a href="#">Dignissim purus</a></li> <li><a href="#">Tempus pretium</a></li> <li><a href="#">Dignissim neque</a></li> <li><a href="#">Ornared id aliquet</a></li> </ul> </div> <div class="col-sm-3 footer-bottom-cate"> <h6>Feature Projects</h6> <ul> <li><a href="#">Curabitur sapien</a></li> <li><a href="#">Dignissim purus</a></li> <li><a href="#">Tempus pretium</a></li> <li><a href="#">Dignissim neque</a></li> <li><a href="#">Ornared id aliquet</a></li> </ul> </div> <div class="col-sm-3 footer-bottom-cate"> <h6>Top Brands</h6> <ul> <li><a href="#">Curabitur sapien</a></li> <li><a href="#">Dignissim purus</a></li> <li><a href="#">Tempus pretium</a></li> <li><a href="#">Dignissim neque</a></li> <li><a href="#">Ornared id aliquet</a></li> <li><a href="#">Ultrices id du</a></li> <li><a href="#">Commodo sit</a></li> </ul> </div> <div class="col-sm-3 footer-bottom-cate cate-bottom"> <h6>Our Address</h6> <ul> <li>Aliquam metus dui. </li> <li>orci, ornareidquet</li> <li> ut,DUI.</li> <li>nisi, dignissim</li> <li>gravida at.</li> <li class="phone">PH : 6985792466</li> </ul> </div> <div class="clearfix"> </div> <p class="footer-class">Copyright © 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">网页模板</a></p> </div> </div> </div> <!--//footer-->
home.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!--header--> <%@ include file="common/header.jsp" %> <!--banner--> <div class="banner"> <div class="col-sm-3 banner-mat"> <img class="img-responsive" src="images/ba1.jpg" alt=""> </div> <div class="col-sm-6 matter-banner"> <div class="slider"> <div class="callbacks_container"> <ul class="rslides" id="slider"> <li> <img src="images/1.jpg" alt=""> </li> <li> <img src="images/2.jpg" alt=""> </li> <li> <img src="images/1.jpg" alt=""> </li> </ul> </div> </div> </div> <div class="col-sm-3 banner-mat"> <img class="img-responsive" src="images/ba.jpg" alt=""> </div> <div class="clearfix"> </div> </div> <!--//banner--> <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div> <!--content--> <div class="content"> <div class="container"> <div class="content-top"> <h1>Recent Products</h1> <div class="content-top1"> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi.png" alt="" /> </a> <h3><a href="single.html">Tops</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi2.png" alt="" /> </a> <h3><a href="single.html">T-Shirt</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi4.png" alt="" /> </a> <h3><a href="single.html">Shirt</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi1.png" alt="" /> </a> <h3><a href="single.html">Tops</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="clearfix"> </div> </div> <div class="content-top1"> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi3.png" alt="" /> </a> <h3><a href="single.html">Shirt</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi5.png" alt="" /> </a> <h3><a href="single.html">T-Shirt</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi6.png" alt="" /> </a> <h3><a href="single.html">Jeans</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="col-md-3 col-md2"> <div class="col-md1 simpleCart_shelfItem"> <a href="single.html"> <img class="img-responsive" src="images/pi7.png" alt="" /> </a> <h3><a href="single.html">Tops</a></h3> <div class="price"> <h5 class="item_price">$300</h5> <a href="#" class="item_add">Add To Cart</a> <div class="clearfix"> </div> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> <!--//content--> <!--footer--> <%@ include file="common/footer.jsp"%> <!--//footer--> </body> </html>
最后为了让页面默认打开首页,index.jsp的代码修改为:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <body onload="window.location.href='<%=request.getContextPath()%>/index.do'"> <h2>正在加载……</h2> </body> </html>
运行项目,查看页面菜单~~
相关推荐
TeeChart8.ocx是一款广泛应用于数据可视化领域的图表控件,尤其在开发Windows应用程序时,它为程序员提供了丰富的图表类型和强大的图形绘制功能。这款控件由Steema Software公司开发,设计目标是帮助开发者轻松创建...
它提供了大量的图表样式,包括折线图、柱状图、饼图、散点图、甘特图等,使得开发者能够轻松地为他们的应用程序添加专业级的数据展示功能。 在使用TeeChart8.ocx时,你需要首先进行注册才能在开发环境中正常使用。...
5. 完成期刊删除以及首页展示 6. 编写WebUtils类,转化注入Bean对象(封装BeanUtils) 7. 完成用户数据库建立 8. 完成用户类Servlet 9. 完成登录功能 10. 完成期刊增加,修改功能 11. 完成期刊查询分页显示功能 12. ...
5. 商品信息展示功能:用户可以查看商品的详细信息。 6. 商品详细信息展示功能:用户可以查看商品的详细信息。 7. 支付购买功能:用户可以通过支付购买功能来购买商品。 8. 订单查询功能:用户可以通过订单查询功能...
TeeChart8.ocx是一款专为开发者设计的强大图表控件,尤其适用于Visual C++ 6.0这样的开发...总的来说,TeeChart8是一款功能强大且易于使用的图表控件,对于需要进行数据可视化的开发者来说,是一个非常有价值的工具。
苹果CMS是一款广泛应用...以上就是苹果CMS v10 2022.8.3官方原版源码中各文件和目录的基本功能和重要性的简要说明。对于开发者来说,理解这些文件的作用有助于更有效地管理和自定义苹果CMS系统,以满足特定的建站需求。
【vsflex8.ocx】是主控件,它是一个强大的网格控件,允许开发者在Windows应用程序中创建可自定义的多行多列网格。这个控件提供了数据绑定能力,可以与数据库或其他数据源连接,展示和编辑数据。它还支持复杂的排序、...
这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是...
本教程将深入探讨如何利用jQuery实现输入框的提示自动完成功能,这种功能常见于搜索引擎、登录表单等,可以极大地提高用户体验。 首先,我们需要一个基本的HTML结构,包括一个input元素,作为用户输入的文本框。...
2. 完成平台首页开发、展示产品(显示产品图片、介绍、价格等信心)、产品分类和搜索相关功能; 3. 产品详情-产品相关介绍、加入购物车、立即购买等功能; 4. 买家中心功能-订单管理相关功能; 5. 卖家中心功能-...
Maccms8.x是其较新的一个版本,具备完善的视频发布、管理、搜索和播放等功能,支持多终端展示,适用于构建大型视频站点。 ckplayer是一款广泛使用的HTML5视频播放器,版本6.6提供了丰富的功能和良好的兼容性,能够...
综上所述,"WEB-历史展示【axure8】"可能是一个Web应用历史展示功能的原型设计项目,使用了Axure RP 8工具来构建。这个项目涵盖了从界面设计、交互模拟到文档生成的全过程,展示了原型设计在Web开发中的重要性和实用...
VB6.0折线图生成实例,使用曲线图展示各项指标完成情况,同样是使用了MSChart控件的功能,这个折线图的数据取自SQL数据库,在程序中会建立数据库操作模块,将数据读取出来,然后交给折线图生成模块,最终生成这种不同颜色的...
2. **材料选择**:为了兼顾实用和展示功能,设计者可能会考虑选用轻便、耐用且易于加工的材料,如塑料、金属或环保复合材料。 3. **用户体验**:设计中会考虑用户的需求,比如便于取放文具、节省桌面空间、提升工作...
【标题】:“软件开发规划展示板共8页.pdf-文档整理可打印.zip”指的是一个压缩文件,其中包含了一份8页的软件开发规划展示板的PDF文档。这份文档经过了整理,方便用户打印,用于详细展示软件开发过程的规划和安排。...
## 一、项目功能 ### 1.前台功能 1. 图书基本展示,包括推荐图书展示和类图书类型展示. 2. 推荐图书包括条幅推荐,热销推荐和新品推荐. 3. 按照图书类型展示商品. 4. 图书详细信息展示. 5. 图书加入购物车. 6. 修改...
Axure RP 8能够帮助他们快速构建交互式原型,展示产品功能和用户体验。同时,项目管理人员也能从中受益,因为它可以协调团队工作,跟踪项目进度,确保设计与开发的同步。 在压缩包内的文件列表中: 1. "AxureRP_...
本资源为Axure RP8 v8.1.0.3395的安装和解压二合一版本,意味着用户可以一次性完成软件的下载、解压与安装,大大简化了操作流程。 Axure RP8的主要功能包括快速创建线框图、原型和规格说明,它支持动态面板、复用件...
"omfit_efit"是这个库的名称,它可能是某个特定功能或者工具的集合,"2020.8.10.12.30"则代表这个版本的发布日期和时间,这种时间戳的使用便于追踪和管理不同版本的更新,".tar.gz"则是文件的打包格式,它是一种常见...