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>| 合字B1.B2-20130004 |<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 {
@Autowired
private IndexMapper indexMapper;
@Override
public boolean findPhone(String phone) {
return indexMapper.selectPhone(phone)==1?true:false;
}
@Override
public String findSMSCode(String phone, String smsCode) {
return indexMapper.selectSMSCode(phone, smsCode);
}
@Override
public boolean saveWebUser(String phone,String pwd) {
//对密码进行加密。糊涂.jar
return indexMapper.insertWebUser(phone, SecureUtil.md5(pwd))==1;
}
@Override
public 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 {
@Autowired
private 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>| 合字B1.B2-20130004 |<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}登录一号店！ | <a href="#">我的订单</a> |
</c:when>
<c:otherwise>
你好! 请<a href="<%=basePath %>/pages/front/loginpage.jsp">登录</a>
<a href="<%=basePath %>/pages/front/registerpage.jsp" style="color:#ff4e00;">免费注册</a> | <a href="#">我的订单</a> |
</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"> | 关注我们：</span>
<span class="s_sh">
<a href="#" class="sh1">新浪</a>
<a href="#" class="sh2">微信</a>
</span>
<span class="fr"> |
<a href="#">手机版
<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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</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">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</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> 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> 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> 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> 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><a
href="#">奶粉</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><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>￥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><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>￥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
@Override
public boolean findLogin(String phone, String pwd) {
return indexMapper.selectLogin(phone,SecureUtil.md5(pwd))==1;
}
@Override
public 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
@Override
public boolean findLogin(String phone, String pwd) {
return indexMapper.selectLogin(phone,SecureUtil.md5(pwd))==1;
}
@Override
public 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";
}
以上为参考代码，如有不理解请在下方留言！
后续持续更新功能的完善，谢谢支持！