8.完成首页展示功能（一）

最新推荐文章于 2024-03-24 09:50:20 发布

qr_828

最新推荐文章于 2024-03-24 09:50:20 发布

阅读量820

点赞数

分类专栏： Java Web总结文章标签： javascript java ui ViewUI

本文链接：https://blog.csdn.net/qr_828/article/details/84826193

版权

Java Web总结专栏收录该内容

15 篇文章 1 订阅

订阅专栏

我个人完成每个功能的步骤是：

- 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 &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</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 οnlοad="window.location.href='<%=request.getContextPath()%>/index.do'">
<h2>正在加载……</h2>
</body>
</html>

运行项目，查看页面菜单~~

qr_828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.完成首页展示功能（一）

我个人完成每个功能的步骤是： 1.完成功能用到的model；2.完成Dao层，设计sql；3.完成service层，提供可能用到的接口4.完成controller5.完成页面，将controller和页面的交互很好的结合6.测试+修改。之前我们在分模块的时候，是按照操作的对象分模块的，不过一般首页，最好分一个模块出来，这里首页要完成的功能：...
复制链接

扫一扫