我个人完成每个功能的步骤是:
- 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>
运行项目,查看页面菜单~~