Maven项目之一号店——注册与登录

声明：该项目为大型项目，所有代码非原创，用于自学以及与网友探讨学习所用，以下文章为自学时整理，请勿用于商业用途。

前端制作为个人私有，仅提供包结构和前端框架作为参考！

前端所需框架：

[外链图片转存失败(img-rlNeVK4W-1563096683837)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1563095920624.png)]

maven项目所需的依赖：

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.java.ssm_maven_pure</groupId><artifactId>ssm_maven_pure</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><!--引人ssm依赖--><properties><project.build.sourceEncoding>utf8</project.build.sourceEncoding><maven.compiler.encoding>utf8</maven.compiler.encoding><spring.version>3.2.2.RELEASE</spring.version><jackson.version>2.1.4</jackson.version></properties><dependencies><!-- api自动生成 --><dependency><groupId>com.mangofactory</groupId><artifactId>swagger-springmvc</artifactId><version>1.0.2</version></dependency><!-- api自动生成 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring.version}</version><exclusions><!-- Exclude Commons Logging in favor of SLF4j --><exclusion><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-orm</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>${spring.version}</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.2.1</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.0.4</version></dependency><dependency><groupId>commons-collections</groupId><artifactId>commons-collections</artifactId><version>3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>1.4</version></dependency><dependency><groupId>commons-dbcp</groupId><artifactId>commons-dbcp</artifactId><version>1.3</version></dependency><dependency><groupId>commons-pool</groupId><artifactId>commons-pool</artifactId><version>1.5.6</version></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.3</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.10</version></dependency><dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version></dependency><!-- 微信支付工具类 --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpcore</artifactId><version>4.0.1</version></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.0.1</version></dependency><!-- 银联支付安全<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk16</artifactId><version>1.46</version></dependency>--><dependency><groupId>c3p0</groupId><artifactId>c3p0</artifactId><version>0.9.1.2</version></dependency><!-- 数据库驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.46</version></dependency><!-- 整合mybatis --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>1.2.0</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.2.2</version></dependency><!-- 极光推送 --><dependency><groupId>cn.jpush.api</groupId><artifactId>jpush-client</artifactId><version>3.1.3</version></dependency><!-- pdf打印<dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.4.2</version></dependency><dependency><groupId>com.itextpdf.tool</groupId><artifactId>xmlworker</artifactId><version>5.4.1</version></dependency>   --><!-- 配置jacson --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0.pr2</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.0.pr2</version></dependency><dependency><groupId>org.codehaus.jackson</groupId><artifactId>jackson-core-asl</artifactId><version>1.9.13</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0.pr2</version></dependency><dependency><groupId>org.codehaus.jackson</groupId><artifactId>jackson-mapper-asl</artifactId><version>1.9.13</version></dependency><!-- 日志 --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.14</version></dependency><!-- excel导出 --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.9</version></dependency><!-- xml解析 --><dependency><groupId>org.jdom</groupId><artifactId>jdom</artifactId><version>1.1.3</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.0.1</version><scope>provided</scope></dependency><!-- 银联支付<dependency><groupId>com.unionpay</groupId><artifactId>acp</artifactId><version>1.0.0</version><scope>system</scope><systemPath>${project.basedir}/lib/upacp_sdk-1.0.0.jar</systemPath></dependency>--><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>p6spy</groupId><artifactId>p6spy</artifactId><version>2.1.4</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><!-- hibernate-validator --><dependency><groupId>org.hibernate</groupId><artifactId>hibernate-validator</artifactId><version>5.4.1.Final</version></dependency><!--pagehelper所需依赖--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>4.1.6</version></dependency><dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>0.9.5</version></dependency><!--引入lombok--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.12.6</version><scope>provided</scope></dependency><!--引入短信发送所需依赖--><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency><!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5</version></dependency><!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpcore</artifactId><version>4.4.1</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>4.5.12</version></dependency></dependencies><!--指定当前工程jdk的版本--><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><source>1.7</source><target>1.7</target></configuration></plugin></plugins><resources><resource><directory>src/main/java</directory><includes><include>**/*.xml</include></includes></resource></resources></build></project>

前端页面：

registerpage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() +request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en"><base href="<%=basePath %>"><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="<%=basePath %>/static/css/front/base.css"><link rel="stylesheet" href="<%=basePath %>/static/css/front/register.css"><style type="text/css">tr>td:nth-child(1){width: 330px;}tr>td:nth-child(2){width: 220px;}</style><script type="text/javascript" src="<%=basePath%>/static/js/front/jquery-1.8.2.min.js"></script><script type="text/javascript" src="<%=basePath%>/static/js/front/jsonHandler.js"></script>
</head>
<body>
<header id="headNav"><div class="innerNav clear"><a class="fl" href="#"><img src="<%=basePath %>/static/images/front/loginlogo.jpg" alt=""></a><div class="headFont fr"><span>您好，欢迎光临1号店！<a href="<%=basePath%>/pages/front/loginpage.jsp">请登录</a></span><a class="helpLink" href="#"><i class="runbun"></i>帮助中心<i class="turnb"></i></a></div><div class="outHelp"><ul class="helpYou" style="display: none;"><li><a href="#">包裹跟踪</a></li><li><a href="#">常见问题</a></li><li><a href="#">在线退换货</a></li><li><a href="#">在线投诉</a></li><li><a href="#">配送范围</a></li></ul></div></div>
</header>
<section id="secTab"><div class="innerTab"><h2>1号店注册</h2><form action="javascript:void(0)" id="fm1"><table width="550px"><tr><td><div class="tableItem"><span class="userPhone">手机号</span><input name="phone" type="text" pattern="1[358789]\d{9}" required placeholder="请输入手机号"/></div></td><td><span id="phoneMsg" style="size: 15px;color: red;"></span></td></tr><tr><td><div class="clear"><div class="tableItem onlyItem fl"><span class="userPhone">验证码</span><input class="" name="smsCode" type="text" pattern="\d{4,6}" required placeholder="请输入验证码"/></div><input type="button" value="获取验证码" class="tableText fr" style="cursor: pointer" id="getSMSCode" href="javascript:void(0)"/></div></td><td></td></tr><tr><td><div class="tableItem"><span class="setPass">设置密码</span><input name="pwd" type="password" pattern="\w{8,16}" required placeholder="密码长度为8-16位数字、字母或下划线"/></div></td><td><span id="pwdMsg" style="font-size: 15px;color: red"></span></td></tr><tr><td><div class="tableItem"><span class="turePass">确认密码</span><input name="checkPwd" type="password" pattern="\w{8,16}" required placeholder="确认密码"/></div></td><td><span id="checkPwdMsg" style="size: 15px;color: red;"></span></td></tr><tr><td><p class="clickRegist">点击注册，表示您同意1号店 <a href="#">《服务协议》</a></p></td><td></td></tr><tr><td><button class="tableBtn">同意协议并注册</button></td><td></td></tr></table></form></div>
</section>
<footer id="footNav"><p><a href="#">沪ICP备13044278号</a>|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a></p><p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
<script type="text/javascript">$(function () {//同意协议并注册触发单击事件$(".tableBtn").click(function () {var dataJSON= $("#fm1").serializeObject();$.ajax({url:"<%=basePath%>/front/register.do",type:"post",dataType:"JSON",data:dataJSON,success:function (rs) {//如果Ajax执行成功，后台返回给Ajax的结果var status=rs.status;if(status==0){//注册成功window.location.href="<%=basePath%>/pages/front/loginpage.jsp"}else{//注册失败var msg=rs.msg;alert(msg)}},error:function (rs) {alert("亲，操作失误，请重试！")}});});//单击获取验证码$("#getSMSCode").click(function () {//获取手机号码var phone=$("input[name=phone]").val();//判断手机号码格式var len=phone.length;var regex=new RegExp(/1[356789]\d{9}/);var flag=regex.test(phone)if(flag){$.ajax({url:"<%=basePath%>/front/addSmsCode.do",type:"post",dataType:"JSON",data:{"phone":phone},success:function (rs) {//如果Ajax执行成功，后台返回给Ajax的结果if(rs){//开始倒计时，如果电信发送成功则开始倒计时！var num=180;var f = setInterval(function () {if(num==0){//倒计时结束//还原按钮上的文本$("#getSMSCode").val("获取验证码")//取消按钮禁用$("#getSMSCode").removeAttribute("disabled");$("#getSMSCode").css({background:"#57565F"})num=180;//让定时器结束clearInterval(f);}else{//还处于倒计时中//改变button按钮上的文本内容$("#getSMSCode").val("重新发送（"+num+")");//禁用按钮$("#getSMSCode").attr("disabled","disabled");$("#getSMSCode").css({background:"lightgray"})//将数值自减num--;}},1000)}},error:function (rs) {alert("亲，操作失误，请重试！")}});}else{//手机号格式不正确$("#phoneMsg").html("<img src='<%=basePath%>/static/images/front/error.png'>手机格式错误！")//让光标在手机输入框中获取焦点$("input[name=phone]").focus();}})//给密码添加一个键盘箭筒事件$("input[name=pwd]").keyup(function () {var pwd=$(this).val()var regex=new RegExp(/\w{8,16}/);var flag= regex.test(pwd);if(flag){//格式正确$("#pwdMsg").html("<img src='<%=basePath%>/static/images/front/ok.png'>")}else{//格式错误$("#pwdMsg").html("<img src='<%=basePath%>/static/images/front/error.png'>密码格式错误")}})/* 给确认密码添加一个键盘按键松开的事件*/$("input[name=checkPwd]").keyup(function () {//获取密码框中的值var pwd=$("input[name=pwd]").val();//获取确认密码框中的值var checkPwd=$(this).val();//比较两者的值是否相等if(pwd!=checkPwd){console.log("11111")$("#checkPwdMsg").html("<img src='<%=basePath%>/static/images/front/error.png'>两次密码不一致，请重新输入！").css("color","red")}else{$("#checkPwdMsg").html("<img src='<%=basePath%>/static/images/front/ok.png'>")}});//给手机号添加一个键盘监听事件$("input[name=phone]").keyup(function () {var phone=$(this).val();var len=phone.length;if(len==11){$("#phoneMsg").html("<img src='<%=basePath%>/static/images/front/ok.png'>")$.ajax({url:"<%=basePath%>/front/getPhoneIsExist.do",type:"post",dataType:"JSON",data: {"phone":phone},success:function (rs) {if(rs){$("#phoneMsg").html("<img src='<%=basePath%>/static/images/front/error.png'>手机号已被注册！")}},error:function (rs) {alert("亲，操作失误，请重试！")}})}else{//手机号码格式不正确$("#phoneMsg").html("<img src='<%=basePath%>/static/images/front/error.png'>手机号码格式不正确！")}})});
</script>
</body>
</html>

后台核心代码：

Dao层IndexMapper.java

public interface IndexMapper {//判断手机号是否存在@Select("SELECT COUNT(*) FROM front_users WHERE phone=#{0}")//此处必须用#{0}而不能用#{phone}，#{0}代表下面的phone/*** 查询验证码*/int selectPhone(String phone);@Select("SELECT DATE_FORMAT(createDate,'%Y-%m-%d %H:%i:%s') FROM front_smscode WHERE phone=#{0} AND smsCode=#{1}")String selectSMSCode(String phone,String smsCode);/*** 注册用户* @param phone* @param pwd* @return*/@Insert("INSERT INTO front_users SET phone=#{0},pwd=#{1},createDate=NOW()")int insertWebUser(String phone, String pwd);/*** 添加短信验证码记录* @param phone* @param smsCode* @return*/@Insert("INSERT INTO front_smscode SET phone=#{0},smsCode=#{1},createDate=#{2}")int insertSMSCode(String phone,String smsCode,String createDate);
}

业务层IndexService.java

public interface IndexService {boolean findPhone(String phone);/*** 查询验证码*/String findSMSCode(String phone,String smsCode);/*** 注册用户* @param phone* @param pwd* @return*/boolean saveWebUser(String phone, String pwd);/*** 添加短信验证码记录* @param phone* @param smsCode* @return*/boolean saveSMSCode(String phone,String smsCode);
}

业务层实现类IndexServiceImpl.jsp

@Service
@Transactional(readOnly = false)
public class IndexServiceImpl implements IndexService {@Autowiredprivate IndexMapper indexMapper;@Overridepublic boolean findPhone(String phone) {return indexMapper.selectPhone(phone)==1?true:false;}@Overridepublic String findSMSCode(String phone, String smsCode) {return indexMapper.selectSMSCode(phone, smsCode);}@Overridepublic boolean saveWebUser(String phone,String pwd) {//对密码进行加密。糊涂.jarreturn indexMapper.insertWebUser(phone, SecureUtil.md5(pwd))==1;}@Overridepublic boolean saveSMSCode(String phone, String smsCode) {String systemDate=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());return indexMapper.insertSMSCode(phone, smsCode,systemDate)==1;}
}

控制层IndexController.java

@Controller
@RequestMapping("/front")
public class IndexController {@Autowiredprivate IndexService indexService;/*** 判断手机号是否存在*/@RequestMapping("/getPhoneIsExist")public @ResponseBody boolean getPhoneIsExist(String phone){if(phone==null){return false;}//1、接收参数，判断参数格式String regex="1[356789]\\d{9}";boolean flag1=phone.matches(regex);if(!flag1){return false;}return indexService.findPhone(phone);}@RequestMapping("/addSmsCode")public @ResponseBody boolean addSmsCode(String phone){//1、判断手机号格式if(phone==null){return false;}String regex="1[356789]\\d{9}";boolean flag1=phone.matches(regex);if(!flag1){//格式不正确return false;}//2、判断手机号是否已注册boolean flag2=indexService.findPhone(phone);if(flag2){return false;}Map<String,Object> smsMap=SMSUtils.sendSMS(phone);if(!((boolean)smsMap.get("status"))){return false;}//代码执行到此处，短信发送成功return indexService.saveSMSCode(phone,(String)smsMap.get("smsCode"));}@RequestMapping("/register")public @ResponseBody Map<String,Object> register(String phone,String smsCode,String pwd,String checkPwd){Map<String, Object> resultMap = new HashMap<>();try {resultMap.put("status","0");//校验数据格式if(phone==null||smsCode==null||pwd==null||checkPwd==null){resultMap.put("status","1");resultMap.put("msg","参数不能为空！");return resultMap;}//判断手机号码是否重复boolean flag1=indexService.findPhone(phone);if(flag1){resultMap.put("status","1");resultMap.put("msg","手机号码已被注册！");return resultMap;}//判断两次输入密码是否一致if(!pwd.equals(checkPwd)){resultMap.put("status","1");resultMap.put("msg","两次输入密码不一致，请重试！");return resultMap;}//判断验证码是否有效String smsCodeCreateTime = indexService.findSMSCode(phone, smsCode);if(smsCodeCreateTime==null){resultMap.put("status","1");resultMap.put("msg","验证码输入错误！");return resultMap;}SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date smsCodeDate = sdf.parse(smsCodeCreateTime);//将短信发送的时间转换成毫秒数long smsTime= smsCodeDate.getTime();//获取系统时间long systemTime = System.currentTimeMillis();long cha=systemTime-smsTime-1800*1000;if(cha>0){resultMap.put("status","1");resultMap.put("msg","验证码已失效，请重新获取！");return resultMap;}//可以将数据插入到数据中去boolean flag2 = indexService.saveWebUser(phone, pwd);if(!flag2){resultMap.put("status","1");resultMap.put("msg","注册失败,数据库错误！");return resultMap;}return resultMap;} catch (Exception e) {// e.printStackTrace();resultMap.put("status","1");resultMap.put("msg","程序走丢！");return resultMap;}}
}

登录与图片轮播

前端页面Loginpage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() +request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head><base href="<%=basePath %>"><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="<%=basePath %>/static/css/front/base.css"><link rel="stylesheet" href="<%=basePath %>/static/css/front/load.css"><script type="text/javascript" src="<%=basePath%>/static/js/front/jquery-1.8.2.min.js"></script><script type="text/javascript" src="<%=basePath%>/static/js/front/jsonHandler.js"></script>
</head>
<body><header id="headNav"><div class="innerNav clear"><a class="fl" href="#"><img src="<%=basePath %>/static/images/front/loginlogo.jpg" alt=""/></a><div class="headFont fr"><span>您好，欢迎光临1号店！<a href="<%=basePath%>/pages/front/registerpage.jsp">请注册！</a></span><a class="helpLink" href="www.baidu.com"><i class="runbun"></i>帮助中心<i class="turnb"></i></a></div><div class="outHelp"><ul class="helpYou" style="display: none;"><li><a href="#">包裹跟踪</a></li><li><a href="#">常见问题</a></li><li><a href="#">在线退换货</a></li><li><a href="#">在线投诉</a></li><li><a href="#">配送范围</a></li></ul></div></div></header><section id="secBody"><div class="innerBody clear"><img class="fl" src="<%=basePath %>/static/images/front/loadimg.jpg" alt=""/><div class="tableWrap fr"><form action="javascript:void(0)" id="fm1"><div class="tableTap clear"><h3 class="fl">1号店用户登录</h3><a class="fr" href="<%=basePath%>/pages/front/registerpage.jsp">注册账号</a></div><div class="tableItem"><i class="userHead"></i><input type="text" name="phone" pattern="1[356789]\d{9}" placeholder="请输入手机号" required /></div><div class="tableItem"><i class="userLock"></i><input type="password" pattern="\w{8,16}" name="pwd" placeholder="密码长度为8—16位字母、下划线或数字" required/></div><div class="tableAuto clear"><a class="autoMatic fl" href="#"><input class="loadGiet"  type="checkbox"/>自动登录</a><a class="fr" href="#">忘记密码？</a></div><button class="tableBtn">登录</button></form><h2 class="moreWeb">更多合作网站账号登录</h2><div class="outType clear"><ul class="loadType clear"><li class="fl"><a href="#"></a></li><li class="fl"><a href="#"></a></li><li class="fl"><a href="#"></a></li><li class="fl"><a href="#"></a></li><li class="loadMore fr">更多合作网站<i></i></li></ul></div><ul class="typeWeb clear"><li class="fl"><i></i><a href="#">百度</a></li><li class="fl"><i></i><a href="#">百度</a></li><li class="fl"><i></i><a href="#">百度</a></li><li class="fl"><i></i><a href="#">百度</a></li><li class="fl"><i></i><a href="#">百度</a></li></ul></div></div></section><script type="text/javascript">$(function () {$(".tableBtn").click(function () {$.ajax({url:"<%=basePath%>/front/getLogin.do",type:"POST",dataType:"JSON",data:$("#fm1").serializeObject(),success:function (rs) {if(rs){//登录成功window.location.href="<%=basePath%>/front/toIndex.do";}else{//登录失败alert("用户名或密码错误，请重试！")}},error:function (rs) {alert("亲，您操作有误，请重试！")}})})})</script><footer id="footNav"><p><a href="#">沪ICP备13044278号</a>|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a></p><p>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</p></footer>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String baseImg="http://localhost:6060/";
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() +request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en"><base href="<%=basePath %>"><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="<%=basePath %>/static/css/front/style.css"/><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><title>一号店</title>
</head>
<body>
<!--网页头部-->
<header><div class="soubg"><div class="sou fl"><div class="s_city_b"><span>送货至：四川</span></div></div><div class="fr top_right"><div class="fl"><c:choose><c:when test="${sessionScope.phone!=null}">欢迎${sessionScope.phone}登录一号店！&nbsp; | &nbsp;<a href="#">我的订单</a>&nbsp; |</c:when><c:otherwise>你好! 请<a href="<%=basePath %>/pages/front/loginpage.jsp">登录</a><a href="<%=basePath %>/pages/front/registerpage.jsp" style="color:#ff4e00;">免费注册</a>&nbsp; | &nbsp;<a href="#">我的订单</a>&nbsp; |</c:otherwise></c:choose></div><ul class="ss"><li class="ss_list"><a href="#">收藏夹</a></li><li class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div></li><li class="ss_list"><a href="#">网站导航</a></li></ul><span class="fl">&nbsp;&nbsp; | &nbsp;关注我们：</span><span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span><span class="fr">&nbsp;&nbsp; | &nbsp;<a href="#">手机版&nbsp;<img src="<%=basePath %>/static/images/front/s_tel.png" align="absmiddle"/></a></span></div></div><div class="top"><div class="logo"><a href="#"><img src="<%=basePath %>/static/images/front/logo.png"/></a></div><div class="search"><form><input type="search" value="" placeholder="请输入关键字" class="s_ipt"/><input type="submit" value="搜索" class="s_btn"/></form><div class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></div></div><div class="i_car"><div class="car_t">购物车</div></div></div>
</header>
<!--网页主题部分-->
<section class="center clear"><!--商品列表、焦点图--><div class="clear"><div class="menu_bg"><div class="menu"><!--Begin 商品分类详情 Begin--><nav class="nav"><div class="nav_t">全部商品分类</div><div class="leftNav"><!--左边购物列表导航--><ul><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav1.png"/></span><span class="fl">进口食品、生鲜</span></div><!--目前不显示，鼠标移入显示--><div class="zj"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav2.png"/></span><span class="fl">食品、饮料、酒</span></div><div class="zj" style="top:-40px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力2</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav3.png"/></span><span class="fl">母婴、玩具、童装</span></div><div class="zj" style="top:-80px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力3</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav4.png"/></span><span class="fl">家居、家庭清洁、纸品</span></div><div class="zj" style="top:-120px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力4</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav5.png"/></span><span class="fl">美妆、个人护理、洗护</span></div><div class="zj" style="top:-160px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力5</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav6.png"/></span><span class="fl">女装、内衣、中老年</span></div><div class="zj" style="top:-200px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力6</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav7.png"/></span><span class="fl">鞋靴、箱包、腕表配饰</span></div><div class="zj" style="top:-240px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力7</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav8.png"/></span><span class="fl">男装、运动</span></div><div class="zj" style="top:-280px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力8</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav9.png"/></span><span class="fl">手机、小家电、电脑</span></div><div class="zj" style="top:-320px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力9</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="<%=basePath %>/static/images/front/nav10.png"/></span><span class="fl">礼品、充值</span></div><div class="zj" style="top:-360px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力10</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="<%=basePath %>/static/images/front/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="<%=basePath %>/static/images/front/n_img2.jpg" width="236" height="200"/></a></div></div></li></ul></div></nav><!--End 商品分类详情 End--><nav><ul class="menu_r"><li class="active"><a href="">首页</a></li><li class="active"><a href="">自营超市</a></li><li><a href="">1号团</a></li><li><a href="">1号超市</a></li><li><a href="">女装</a></li><li><a href="">美妆</a></li><li><a href="">1号海购</a></li><li><a href="">团购</a></li></ul></nav><a href="#" class="m_ad"><img src="<%=basePath %>/static/images/front/phone.png" alt=""/></a></div></div><!--焦点图--><div class="banner"><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner"><c:forEach items="${requestScope.bannerList}" var="map" varStatus="num"><c:choose><c:when test="${num.count==1}"><div style="width: 700px;height: 401px" class="item active" οnclick="window.location.href='${map.href}'"><img src="<%=baseImg%>/${map.imgUrl}" alt="First slide" style=" width:700px; height:401px"></div></c:when><c:otherwise><div style="width: 700px;height: 401px" class="item" οnclick="window.location.href='${map.href}'"><img src="<%=baseImg%>/${map.imgUrl}" alt="Second slide" style=" width:700px; height:401px"></div></c:otherwise></c:choose></c:forEach></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#myCarousel"data-slide="next">&rsaquo;</a></div></div><!--新闻列表--><div class="inews"><div class="news_t"><h3 class="fl">快讯</h3><span class="fr"><a href="#">更多 ></a></span></div><ul><li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li><li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li><li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li><li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li><li><span>【公告】</span><a href="#">家电低至五折</a></li></ul><div class="charge_t"><h3>1号钱包</h3><p>收益日结，收益赚High！</p><img src="<%=basePath %>/static/images/front/oneAD.jpg" alt=""/></div></div></div><!--Begin 热门商品 Begin--><div class="content clear "><div class="hot"><div class="img"><img src="<%=basePath %>/static/images/front/l_img.jpg" width="188" height="188"/></div><div class="pri_bg"><span class="price fl">￥53.00</span><span class="fr">16R</span></div></div><div class="hot_pro"><div id="feature"><ul class="featureUL"><li class="featureBox"><div class="h_icon"><img src="<%=basePath %>/static/images/front/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="<%=basePath %>/static/images/front/hot1.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>德国进口</h2>德亚全脂纯牛奶200ml*48盒</a></div><div class="price"><strong>￥<span>189</span></strong> &nbsp; 26R</div></li><li class="featureBox"><div class="h_icon"><img src="<%=basePath %>/static/images/front/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="<%=basePath %>/static/images/front/hot2.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>iphone 6S</h2>Apple/苹果 iPhone 6s Plus公开版</a></div><div class="price"><strong>￥<span>5288</span></strong> &nbsp; 25R</div></li><li class="featureBox"><div class="h_icon"><img src="<%=basePath %>/static/images/front/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="<%=basePath %>/static/images/front/hot3.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>倩碧特惠组合套装</h2>倩碧补水组合套装8折促销</a></div><div class="price"><strong>￥<span>368</span></strong> &nbsp; 18R</div></li><li class="featureBox"><div class="h_icon"><img src="<%=basePath %>/static/images/front/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="<%=basePath %>/static/images/front/hot4.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>品利特级橄榄油</h2>750ml*4瓶装组合 西班牙原装进口</a></div><div class="price"><strong>￥<span>280</span></strong> &nbsp; 30R</div></li></ul><a class="h_prev" href="#">Previous</a><a class="h_next" href="#">Next</a></div></div></div><!--广告--><div class="content"><img src="<%=basePath %>/static/images/front/mban_2.jpg"/></div><!--Begin 进口 生鲜 Begin--><section class="content clear"><div class="floorTitle "><span class="floor_num">1F</span><span class="fl">进口 <b>·</b> 生鲜</span><div class="i_mores fr"><a href="#">进口咖啡</a><a href="#">进口酒</a><a href="#">进口母婴</a><a href="#">新鲜蔬菜</a><a href="#">新鲜水果</a></div></div><div class="main"><div class="fresh_left"><div class="fre_ban"><div id="imgPlay1"><ul class="imgs" id="actor1"><li><a href="#"><img src="<%=basePath %>/static/images/front/fre_r.jpg" width="211" height="286"/></a></li></ul><div class="prevf">上一张</div><div class="nextf">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">进口水果</a><a href="#">奇异果</a><a href="#">西柚</a><a href="#">海鲜水产</a><a href="#">品质牛肉</a><ahref="#">奶粉</a><a href="#">鲜活禽蛋</a><a href="#">进口酒</a><a href="#">进口奶粉</a><a href="#">鲜活禽蛋</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">贝思客 草莓先生&蓝莓小姐</a></div><div class="price"><span>￥98.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">微笑果园SMILE 智利进口绿奇异果</a></div><div class="price"><span>￥84.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 进口美食</a></div><div class="price"><span>￥98.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 进口美食</a></div><div class="price"><span>￥24.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 纯牛奶</a></div><div class="price"><span>￥142.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">莫斯利安</a></div><div class="price"><span>￥62.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/fre_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="<%=basePath %>/static/images/front/fre_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="<%=basePath %>/static/images/front/fre_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 进口 生鲜 End--><!--Begin 个人美妆 Begin--><section class="content clear"><div class="floorTitle "><span class="floor_num">2F</span><span class="fl">个人美妆</span><div class="i_mores fr"><a href="#">洗发护发</a><a href="#">面膜</a><a href="#">洗面奶</a><a href="#">香水</a><a href="#">沐浴露</a></div></div><div class="main"><div class="make_left"><div class="make_ban"><div id="imgPlay3"><ul class="imgs" id="actor3"><li><a href="#"><img src="<%=basePath %>/static/images/front/make_r.jpg" width="211" height="286"/></a></li></ul><div class="prev_m">上一张</div><div class="next_m">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">洗发护发</a><a href="#">牙刷牙膏</a><a href="#">面膜</a><a href="#">补水面膜</a><a href="#">香水</a><ahref="#">面霜</a><a href="#">洗面奶</a><a href="#">脱毛膏</a><a href="#">沐浴露</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">洗衣液</a></div><div class="price"><span>￥60.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">洗发水</a></div><div class="price"><span>￥160.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">男士洗发水</a></div><div class="price"><span>￥120.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">男士设计 洗面奶</a></div><div class="price"><span>￥90.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/make_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="<%=basePath %>/static/images/front/make_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="<%=basePath %>/static/images/front/make_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 个人美妆 End--><div class="content"><img src="<%=basePath %>/static/images/front/mban_2.jpg" width="1200" height="110"/></div><!--Begin 母婴玩具 Begin--><section class="content"><div class="floorTitle"><span class="floor_num">3F</span><span class="fl">母婴玩具</span><div class="i_mores fr"><a href="#">营养品</a><a href="#">孕妈背带裤</a><a href="#">儿童玩具</a><a href="#">婴儿床</a><a href="#">喂奶器</a></div></div><div class="main"><div class="baby_left"><div class="baby_ban"><div id="imgPlay4"><ul class="imgs" id="actor4"><li><a href="#"><img src="<%=basePath %>/static/images/front/baby_r.jpg" width="211" height="286"/></a></li><li><a href="#"><img src="<%=basePath %>/static/images/front/baby_r.jpg" width="211" height="286"/></a></li><li><a href="#"><img src="<%=basePath %>/static/images/front/baby_r.jpg" width="211" height="286"/></a></li></ul><div class="prev_b">上一张</div><div class="next_b">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">孕妈必备</a><a href="#">儿童玩具</a><a href="#">重装童鞋</a><a href="#">辅助食品</a><a href="#">奶粉</a><ahref="#">鲜活禽蛋</a><a href="#">维生素</a><a href="#">重装童鞋</a><a href="#">辅助食品</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">儿童推车</a></div><div class="price"><span>￥560.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">妈咪纸尿裤</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">儿童玩具 挖掘机</a></div><div class="price"><span>￥160.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">纸尿裤</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">儿童推车</a></div><div class="price"><span>￥86.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">奶粉</a></div><div class="price"><span>￥660.00</span></div><div class="img"><a href="#"><img src="<%=basePath %>/static/images/front/baby_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="<%=basePath %>/static/images/front/baby_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="<%=basePath %>/static/images/front/baby_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 母婴玩具 End--></section>
<!--网页底部-->
<footer class="center"><!-- Footer --><div class="b_btm_bg b_btm_c"><ul class="b_btm"><li><a><img src="<%=basePath %>/static/images/front/b1.png" width="62" height="62"/></a><div><h2>正品保障</h2>正品行货 放心购买</div></li><li ><a><img src="<%=basePath %>/static/images/front/b2.png" width="62" height="62"/></a><div><h2>满38包邮</h2>满38包邮 免运费</div></li><li><a><img src="<%=basePath %>/static/images/front/b3.png" width="62" height="62"/></a><div><h2>天天低价</h2>天天低价 畅选无忧</div></li><li><a><img src="<%=basePath %>/static/images/front/b4.png" width="62" height="62"/></a><div><h2>准时送达</h2>收货时间由你做主</div></li></ul></div><div class="b_nav"><dl><dt><a href="#">新手上路</a></dt><dd><a href="#">售后流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">订购方式</a></dd><dd><a href="#">隐私声明</a></dd><dd><a href="#">推荐分享说明</a></dd></dl><dl><dt><a href="#">配送与支付</a></dt><dd><a href="#">货到付款区域</a></dd><dd><a href="#">配送支付查询</a></dd><dd><a href="#">支付方式说明</a></dd></dl><dl><dt><a href="#">会员中心</a></dt><dd><a href="#">资金管理</a></dd><dd><a href="#">我的收藏</a></dd><dd><a href="#">我的订单</a></dd></dl><dl><dt><a href="#">服务保证</a></dt><dd><a href="#">退换货原则</a></dd><dd><a href="#">售后服务保证</a></dd><dd><a href="#">产品质量保证</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">网站故障报告</a></dd><dd><a href="#">购物咨询</a></dd><dd><a href="#">投诉与建议</a></dd></dl><div class="b_tel_bg"><a href="#" class="b_sh1">新浪微博</a><a href="#" class="b_sh2">腾讯微博</a><p>服务热线：<br/><span>400-123-4567</span></p></div><div class="b_er"><div class="b_er_c"><img src="<%=basePath %>/static/images/front/er.gif" /></div><img src="<%=basePath %>/static/images/front/ss.png"/></div></div><div class="btmbg"><div class="btm">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,Technical Support: Dgg Group <br/><img src="<%=basePath %>/static/images/front/b_1.gif"/><img src="<%=basePath %>/static/images/front/b_2.gif"/><img src="<%=basePath %>/static/images/front/b_3.gif"/><img src="<%=basePath %>/static/images/front/b_4.gif"/><img src="<%=basePath %>/static/images/front/b_5.gif"/><img src="<%=basePath %>/static/images/front/b_6.gif"/></div></div><!--Footer -->
</footer>
</body>
</html>

后台代码：

IndexMapper.java

 /*** 登录* @param phone* @param pwd* @return*/@Select("SELECT COUNT(*) FROM front_users WHERE phone=#{0} AND pwd=#{1}")int selectLogin(String phone,String pwd);/*** 查询轮播图片* @return*/@Select("SELECT * FROM front_banner")List<Map<String,Object>> selectBanners();

业务层IndexService.java

 /*** 登录* @param phone* @param pwd* @return*/boolean findLogin(String phone,String pwd);/*** 查询轮播图片* @return*/List<Map<String,Object>> findBanners();

业务层实现类IndexServiceImpl.java

 @Overridepublic boolean findLogin(String phone, String pwd) {return indexMapper.selectLogin(phone,SecureUtil.md5(pwd))==1;}@Overridepublic List<Map<String, Object>> findBanners() {return indexMapper.selectBanners();}

控制层IndexController.java

  @RequestMapping("/getLogin")public @ResponseBody boolean getLogin(String phone, String pwd, HttpSession session){try {//1、对数据进行校验//2、数据格式正确后才调用业务层进行查询操作if(phone==null||pwd==null){return false;}boolean flag1=phone.matches("1[356789]\\d{9}");boolean flag2=pwd.matches("\\w{8,9}");if(!flag1||!flag2){return false;}boolean flag3=indexService.findLogin(phone, pwd);if(flag3){//登录成功session.setAttribute("phone",phone);}return flag3;} catch (Exception e) {e.printStackTrace();return false;}}/*** 转发到index.jsp页面* @return*/@RequestMapping("/toIndex")public String toIndex(HttpServletRequest request){//1、调用业务层查询轮播图信息List<Map<String, Object>> bannerList = indexService.findBanners();request.setAttribute("bannerList",bannerList);//2、调用业务层，带横向导航条过去//3、调用业务层，带纵向导航条过去return "/front/index.jsp";}

以上为参考代码，如有不理解请在下方留言！

@Select(“SELECT * FROM front_banner”)
List<Map<String,Object>> selectBanners();


业务层IndexService.java~~~java/*** 登录* @param phone* @param pwd* @return*/boolean findLogin(String phone,String pwd);/*** 查询轮播图片* @return*/List<Map<String,Object>> findBanners();

业务层实现类IndexServiceImpl.java

 @Overridepublic boolean findLogin(String phone, String pwd) {return indexMapper.selectLogin(phone,SecureUtil.md5(pwd))==1;}@Overridepublic List<Map<String, Object>> findBanners() {return indexMapper.selectBanners();}

控制层IndexController.java

  @RequestMapping("/getLogin")public @ResponseBody boolean getLogin(String phone, String pwd, HttpSession session){try {//1、对数据进行校验//2、数据格式正确后才调用业务层进行查询操作if(phone==null||pwd==null){return false;}boolean flag1=phone.matches("1[356789]\\d{9}");boolean flag2=pwd.matches("\\w{8,9}");if(!flag1||!flag2){return false;}boolean flag3=indexService.findLogin(phone, pwd);if(flag3){//登录成功session.setAttribute("phone",phone);}return flag3;} catch (Exception e) {e.printStackTrace();return false;}}/*** 转发到index.jsp页面* @return*/@RequestMapping("/toIndex")public String toIndex(HttpServletRequest request){//1、调用业务层查询轮播图信息List<Map<String, Object>> bannerList = indexService.findBanners();request.setAttribute("bannerList",bannerList);//2、调用业务层，带横向导航条过去//3、调用业务层，带纵向导航条过去return "/front/index.jsp";}

以上为参考代码，如有不理解请在下方留言！

后续持续更新功能的完善，谢谢支持！