JavaWeb开发（十五）实战-生鲜后台管理系统（二）注册、登录、记住密码

1. 生鲜后台管理系统-注册功能

1.1. 注册功能

（1）创建注册RegisterServlet，接收form表单中的参数。
（2）service创建一个userService处理业务逻辑。
（3）RegisterServlet将参数传递给servie层。
（4）Dao层创建一个userDao操作数据库。
（5）userService调用dao层userDao将用户注册信息加入到数据库中。
（6）注册成功后RegisterServlet调用请求转发到login、jsp界面。

1.2. 步骤

在这里插入图片描述

（1）创建RegisterServlet

package com.zzs.szsd.web;
import com.zzs.szsd.bean.User;
import com.zzs.szsd.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "RegisterServlet",urlPatterns = "/register")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response)
            throws ServletException, IOException {
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        String email = request.getParameter("email");
        User user=new User();
        user.setName(name);
        user.setPassword(password);
        user.setEmail(email);
        UserService userService=new UserService();
        boolean register = userService.register(user);
        if (register) {
           response.sendRedirect(request.getContextPath()+"/login.jsp");
        }else {
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("注册失败");
        }

    }
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response)
            throws ServletException, IOException {
    }
}

（2）创建UserService

package com.zzs.szsd.service;
import com.zzs.szsd.bean.User;
import com.zzs.szsd.dao.UserDao;
import java.sql.SQLException;
public class UserService {
    /**
     * @method:register 用户注册
     * @params:[name, password, email]
     * @return: boolean
     */
    //1. 判断注册用户是否存在
    public boolean register(User user) {
        boolean register=false;
        UserDao userDao = new UserDao();
        boolean checkUser = userDao.checkUser(user.getName());
        //2. 如果不存在就将用户信息添加到数据库
        if (checkUser) {
             register = userDao.register(user);
        }
        return register;
    }
    /**
     * @method:login 用户登录
     * @params:[name, password]
     * @return: void
     */
    public User login(String name, String password) throws SQLException {
        UserDao userDao=new UserDao();
        User user = userDao.login(name, password);
        return  user;
    }
}

（3）创建UserDao

package com.zzs.szsd.dao;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import com.zzs.szsd.bean.User;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import java.sql.SQLException;
public class UserDao {
    /**
     * @method:checkUser 检查用户是否存在
     * @params:[name]
     * @return: boolean
     */
    public boolean checkUser(String name){
        try {
            ComboPooledDataSource dataSource=new ComboPooledDataSource();
            QueryRunner queryRunner=new QueryRunner(dataSource);
            String sql="select name from user where name=?";
            User user = queryRunner.query(sql, new BeanHandler<User>(User.class),name);
            //如果没有查询到数据 说明这个用户名没有注册过
            if (user==null) {
                return  true;
            }else {
                return  false;
            }
        } catch (SQLException e) {
            e.printStackTrace();
            return  false;
        }
    }
    /**
     * @method:register 用户注册
     * @params:[name, password, email]
     * @return: boolean
     */
    public boolean register(User user) {
        try {
            ComboPooledDataSource dataSource=new ComboPooledDataSource();
            QueryRunner queryRunner=new QueryRunner(dataSource);
            String sql="insert into user values(null,?,?,?)";
            int row = queryRunner.update(sql, user.getName(), user.getPassword(), user.getEmail());
            //行数大于零说明注册成功
            if (row>0) {
                return  true;
            }else {
                return  false;
            }
        } catch (SQLException e) {
            e.printStackTrace();
            return  false;
        }
    }
    /**
     * @method:login 查询数据库
     * @params:[name, password]
     * @return: void
     */
    public User login(String name, String password) throws SQLException {
       ComboPooledDataSource dataSource=new ComboPooledDataSource();
       QueryRunner queryRunner=new QueryRunner(dataSource);
       String sql="select * from user where name=? and password=?";
        User user = queryRunner.query(sql, new BeanHandler<User>(User.class),name,password);
        return  user;
    }
}

（4）创建User实体类

package com.zzs.szsd.bean;

public class User {
    private int id;
    private String name;
    private String password;
    private String email;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
}

（5）修改c3p0-config.xml
在这里插入图片描述

<?xml version="1.0" encoding="utf-8" ?>
<c3p0-config>
    <!-- 默认配置，如果没有指定则使用这个配置 -->
    <default-config>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/fresh?useSSL=false</property>
        <property name="user">root</property>
        <property name="password">admin123</property>
        <!-- 初始化池大小 -->
        <property name="initialPoolSize">10</property>
        <!-- 最大空闲时间 -->
        <property name="maxIdleTime">30</property>
        <!-- 最多有多少个连接 -->
        <property name="maxPoolSize">15</property>
        <!-- 最少几个连接 -->
        <property name="minPoolSize">5</property>
        <!-- 每次最多可以执行多少个批处理语句 -->
        <property name="maxStatements">50</property>
    </default-config>
    <!-- 命名的配置 -->
    <named-config name="51zixue"><!--这里是设置配置文件的名字-->
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/fresh?useSSL=false</property>
        <property name="user">root</property><!--mysql的登陆名-->
        <property name="password">admin123</property><!--如果没密码就可以设置成<property name="password"></property>-->
        <property name="acquireIncrement">5</property><!-- 如果池中数据连接不够时一次增长多少个 -->
        <property name="initialPoolSize">10</property>
        <property name="minPoolSize">5</property>
        <property name="maxPoolSize">15</property>
        <property name="maxStatements">0</property>
        <property name="maxStatementsPerConnection">5</property> <!-- he's important, but there's only one of him -->
    </named-config>
</c3p0-config>

（6）login.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script type="text/javascript" src="static/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="static/js/login.js"></script>
    <link href="static/css/login2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>
    生鲜管理系统<sup>V2017</sup>
</h1>

<div class="login" style="margin-top: 50px;">
    <div class="header">
        <div class="switch" id="switch">
            <a class="switch_btn_focus" id="switch_qlogin"
               href="javascript:void(0);" tabindex="7">快速登录</a> <a
                class="switch_btn" id="switch_login" href="javascript:void(0);"
                tabindex="8">快速注册</a>
            <div class="switch_bottom" id="switch_bottom"
                 style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>
    <div class="web_qr_login" id="web_qr_login"
         style="display: block; height: 235px;">

        <!--登录-->
        <div class="web_login" id="web_login">
            <div class="login-box">
                <div class="login_form">
                    <form action="user"
                          accept-charset="utf-8" id="login_form" class="loginForm"
                          method="post">
                        <input type="hidden" name="method" value="login"/>
                        <input type="hidden" name="did" value="0"/> <input type="hidden"
                                                                           name="to" value="log"/>
                        <div class="uinArea" id="uinArea">
                            <label class="input-tips" for="u">帐号：</label>
                            <div class="inputOuter" id="uArea">
                                <input type="text" id="u" name="name" value="${cookie.name.value}" class="inputstyle"/>
                            </div>
                        </div>
                        <div class="pwdArea" id="pwdArea">
                            <label class="input-tips" for="p">密码：</label>
                            <div class="inputOuter" id="pArea">

                                <input type="password" id="p" name="password" value="${cookie.password.value}" class="inputstyle"/>
                            </div>
                        </div>

                        <div style="margin-left: 45px;margin-top: 10px">
                            <input style="vertical-align: middle;" type="checkbox" value="yes" name="remember">记住密码<br/>

                        </div>

                        <div style="padding-left: 50px; margin-top: 20px;">
                            <input type="submit" value="登 录" style="width: 150px;"
                                   class="button_blue"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--登录end-->
    </div>
    <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none;">
        <div class="web_login">
            <form name="form2" id="regUser" accept-charset="utf-8"
                  action="register" method="post">
                <input type="hidden" name="to" value="reg"/> <input type="hidden"
                                                                    name="did" value="0"/>
                <ul class="reg_form" id="reg-ul">
                    <div id="userCue" class="cue">快速注册请注意格式</div>
                    <li><label for="user" class="input-tips2">用户名：</label>
                        <div class="inputOuter2">
                            <input type="text" id="user" name="name" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>
                    <li><label for="passwd" class="input-tips2">密码：</label>
                        <div class="inputOuter2">
                            <input type="password" id="passwd" name="password" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>
                    <li><label for="passwd2" class="input-tips2">确认密码：</label>
                        <div class="inputOuter2">
                            <input type="password" id="passwd2" name="password2" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>

                    <li><label for="email" class="input-tips2">邮箱：</label>
                        <div class="inputOuter2">
                            <input type="email" id="email" name="email" class="inputstyle2"/>
                        </div>
                    </li>
                    <li>
                        <div class="inputArea">

                            <input type="submit" id="reg"
                                   style="margin-top: 10px; margin-left: 85px;"
                                   class="button_blue" value="同意协议并注册"/> <a href="#" class="zcxy"
                                                                            target="_blank.">注册协议</a>
                        </div>
                    </li>
                    <div class="cl"></div>
                </ul>
            </form>
        </div>
    </div>
    <!--注册end-->
</div>
</body>
</body>
</html>

1.3. 效果

在这里插入图片描述

2. 生鲜后台管理系统-登录功能

2.1. 登录功能

（1）创建注册LoginServlet，接收form表单中的参数。
（2）LoginServlet将参数传递给servie层。
（3）userService调用dao层，userDao将用户注册信息加入到数据库中。
（4）登录成功后跳转到分类界面。

2.2. 步骤

（1）新建LoginServlet

package com.zzs.szsd.web;
import com.zzs.szsd.bean.User;
import com.zzs.szsd.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
@WebServlet(name = "LoginServlet",urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        UserService userService=new UserService();
        User user=null;
        try {
            //调用service中登录方法
            user = userService.login(name, password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        System.out.println("wed=w="+user);
        if (user!=null){
            //登录成功跳转生鲜种类列表界面
            response.sendRedirect(request.getContextPath()+"/category-list.jsp");
        }else {
            //登录失败提示
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("用户登录失败");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

（2）新建login.jsp

在这里插入图片描述

// An highlighted block
var foo = 'bar';

（3）新建category-list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>index</title>
	<link rel="stylesheet" href="static/css/bootstrap.min.css">
	<style type="text/css">
		body{ font-family: 'Microsoft YaHei';}
		/*.panel-body{ padding: 0; }*/
	</style>
</head>
<body>
<div class="jumbotron">
	<div class="container">
  		<h3>——生鲜管理系统</h3>
  		
	</div>
</div>
<div class="container">
	<div class="main">
		<div class="row">
			<!-- 左侧内容 -->
			<div class="col-md-3">
				<div class="list-group">
					<a href="${pageContext.request.contextPath}/category-list.jsp" class="list-group-item text-center active">生鲜列表</a>
					<a href="${pageContext.request.contextPath}/category-add.jsp" class="list-group-item text-center ">新增生鲜</a>
				</div>
			</div>
			<!-- 右侧内容 -->
			<div class="col-md-9">
				<!-- 成功提示框 -->
				<div class="alert alert-success alert-dismissible" role="alert">
					<button type="button" class="close" data-dismiss="alert"><span aria-hidden="false">&times;</span><span class="sr-only">Close</span></button>
					<strong>成功！</strong> 操作成功提示
				</div>
				<!-- 失败提示框 -->
				<div style="display: none" class="alert alert-danger alert-dismissible" role="alert">
					<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<strong>失败！</strong> 操作失败提示
				</div>
				<!-- 自定义内容 -->
				<div class="panel panel-default">
					<div class="panel-heading">生鲜列表</div>
					<div class="panel-body">
						<table class="table table-striped table-responsive table-hover">
							<thead>
								<tr>
									<th>编号</th>
									<th>名称</th>
									<th>添加时间</th>
									<th>类别</th>
									<th>产地</th>
									<th width="120">操作</th>
								</tr>
							</thead>
							<tbody>
							<c:forEach items="${page.list}" var="category">
								<tr>
									<th>${category.c_id}</th>
									<td>${category.c_name}</td>
									<td>${category.createtime}</td>
									<c:if test="${category.type==0}" >
										<td>未知</td>
									</c:if>
									<c:if test="${category.type==1}" >
										<td>猪牛羊肉</td>
									</c:if>
									<c:if test="${category.type==2}" >
										<td>海鲜水产</td>
									</c:if>
									<td>${category.place}</td>


									<td>
										<%--<a href="">详情</a>--%>
										<a href="${pageContext.request.contextPath}/category?method=deleteCategory&c_id=${category.c_id}">删除</a>
										<a href="${pageContext.request.contextPath}/category-update.jsp?c_id=${category.c_id}&c_name=${category.c_name}&type=${category.type}&place=${category.place}">修改</a>
									</td>
								</tr>
							</c:forEach>


							</tbody>
						</table>
					</div>
				</div>

				<%--<nav>--%>
					<%--<ul class="pagination pull-right">--%>
					<%--<li  class="previous"><a href="#">&laquo;</a></li>--%>
						<%--<c:forEach begin="1" end="${pageBean.totalPage}" var="page">--%>
							<%--<li><a href="#">${page}</a></li>--%>
							<%--<!-- 判断是否是当前页 -->--%>
							<%--&lt;%&ndash;<c:if test="${page==pageBean.currentPage }">&ndash;%&gt;--%>
								<%--&lt;%&ndash;<li class="active"><a href="javascript:void(0);">${page}</a></li>&ndash;%&gt;--%>
							<%--&lt;%&ndash;</c:if>&ndash;%&gt;--%>
							<%--&lt;%&ndash;<c:if test="${page!=pageBean.currentPage }">&ndash;%&gt;--%>
								<%--&lt;%&ndash;<li><a href="${pageContext.request.contextPath}/productListByCid?cid=${cid}&currentPage=${page }">${page }</a></li>&ndash;%&gt;--%>
							<%--&lt;%&ndash;</c:if>&ndash;%&gt;--%>
						<%--</c:forEach>--%>

						<%--<li><a href="#">&raquo;</a></li>--%>
					<%--</ul>--%>

				<%--</nav>--%>

				<!--分页 -->
				<nav>
					<ul class="pagination pull-right">
						<li  class="previous"><a href="#">&laquo;</a></li>
						<c:forEach begin="1" end="${page.totalPage}" var="Page">
							<li><a href="${pageContext.request.contextPath}/category?method=getCategoryList&currentPage=${Page}&currentCount=10">${Page}</a></li>
						</c:forEach>
						<li><a href="#">&raquo;</a></li>
					</ul>

				</nav>







				<!-- 分页结束 -->
				<%--<ul class="pagination pull-right">--%>
					<%--<li  class="previous"><a href="#">&laquo;</a></li>--%>
					<%--<c:forEach begin="1" end="${pageBean.totalPage+1}" var="page">--%>
						<%--<li><a href="${pageContext.request.contextPath}/category?method=getCategoryList&currentPage=${page}&currentCount=10">${page}</a></li>--%>
					<%--</c:forEach>--%>
					<%--<li><a href="#">&raquo;</a></li>--%>
				<%--</ul>--%>
			</div>
		</div>
  	</div>
</div>
<!-- 尾部 -->
<div class="jumbotron" style=" margin-bottom:0;margin-top:105px;">
	<div class="container">
	<span>&copy; 2016 Saitmob</span>
	</div>
</div>
	<script src="static/js/jquery-3.1.0.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
</body>
</html>

2.3. 效果

在这里插入图片描述

3. 生鲜后台管理系统-记住密码功能

3.1. 记住密码

（1）界面中添加checkbox控件。
（2）如果用户登录成功，这时候就去获取控件是否被选中。
（3）如果选中那么我们需要将用户名和密码。
（4）保存在cookie中保存到cookie中同时需要对cookie做持久化，防止浏览器关闭的时候cookie被销毁
（5）登录界面的jsp中需要获取cookie中保存的信息，并将获取到的信息填入到form表单中。
（6）这样就完成了记住密码的功能。

3.2. 步骤

（1）新建LoginServlet

package com.zzs.szsd.web;
import com.zzs.szsd.bean.User;
import com.zzs.szsd.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
@WebServlet(name = "LoginServlet",urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response)
            throws ServletException, IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");

        UserService userService=new UserService();
        User user=null;
        try {
            //调用service中登录方法
            user = userService.login(name, password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        if (user!=null){
            //登录成功后我们再获取是否保存密码的信息，如果失败了保存密码就没有意义了
            String remember = request.getParameter("remember");
            if (remember.equals("yes")){
                // 将用户名和密码加入到cookie中
                Cookie nameCookie = new Cookie("name", name);
                Cookie passwordCookie = new Cookie("password", password);
                //设置cookie的有效期 防止销毁
                nameCookie.setMaxAge(60*10);
                passwordCookie.setMaxAge(60*10);
                //将cookie发送给客户端保存
                response.addCookie(nameCookie);
                response.addCookie(passwordCookie);
            }
            //登录成功跳转生鲜种类列表界面
            response.sendRedirect(request.getContextPath()+"/category-list.jsp");
        }else {
            //登录失败提示
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("用户登录失败");

        }

    }
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response)
            throws ServletException, IOException {

    }
}

（2）新建login.jsp
在这里插入图片描述

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script type="text/javascript" src="static/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="static/js/login.js"></script>
    <link href="static/css/login2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>
    生鲜管理系统<sup>V2017</sup>
</h1>

<div class="login" style="margin-top: 50px;">
    <div class="header">
        <div class="switch" id="switch">
            <a class="switch_btn_focus" id="switch_qlogin"
               href="javascript:void(0);" tabindex="7">快速登录</a> <a
                class="switch_btn" id="switch_login" href="javascript:void(0);"
                tabindex="8">快速注册</a>
            <div class="switch_bottom" id="switch_bottom"
                 style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>
    <div class="web_qr_login" id="web_qr_login"
         style="display: block; height: 235px;">

        <!--登录-->
        <div class="web_login" id="web_login">
            <div class="login-box">
                <div class="login_form">
                    <form action="login"
                          accept-charset="utf-8" id="login_form" class="loginForm"
                          method="post">
                        <input type="hidden" name="method" value="login"/>
                        <input type="hidden" name="did" value="0"/> <input type="hidden"
                                                                           name="to" value="log"/>
                        <div class="uinArea" id="uinArea">
                            <label class="input-tips" for="u">帐号：</label>
                            <div class="inputOuter" id="uArea">
                                <input type="text" id="u" name="name" value="${cookie.name.value}" class="inputstyle"/>
                            </div>
                        </div>
                        <div class="pwdArea" id="pwdArea">
                            <label class="input-tips" for="p">密码：</label>
                            <div class="inputOuter" id="pArea">

                                <input type="password" id="p" name="password" value="${cookie.password.value}" class="inputstyle"/>
                            </div>
                        </div>

                        <div style="margin-left: 45px;margin-top: 10px">
                            <input style="vertical-align: middle;" type="checkbox" value="yes" name="remember">记住密码<br/>

                        </div>

                        <div style="padding-left: 50px; margin-top: 20px;">
                            <input type="submit" value="登 录" style="width: 150px;"
                                   class="button_blue"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--登录end-->
    </div>
    <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none;">
        <div class="web_login">
            <form name="form2" id="regUser" accept-charset="utf-8"
                  action="register" method="post">
                <input type="hidden" name="to" value="reg"/> <input type="hidden"
                                                                    name="did" value="0"/>
                <ul class="reg_form" id="reg-ul">
                    <div id="userCue" class="cue">快速注册请注意格式</div>
                    <li><label for="user" class="input-tips2">用户名：</label>
                        <div class="inputOuter2">
                            <input type="text" id="user" name="name" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>
                    <li><label for="passwd" class="input-tips2">密码：</label>
                        <div class="inputOuter2">
                            <input type="password" id="passwd" name="password" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>
                    <li><label for="passwd2" class="input-tips2">确认密码：</label>
                        <div class="inputOuter2">
                            <input type="password" id="passwd2" name="password2" maxlength="16"
                                   class="inputstyle2"/>
                        </div>
                    </li>

                    <li><label for="email" class="input-tips2">邮箱：</label>
                        <div class="inputOuter2">
                            <input type="email" id="email" name="email" class="inputstyle2"/>
                        </div>
                    </li>
                    <li>
                        <div class="inputArea">

                            <input type="submit" id="reg"
                                   style="margin-top: 10px; margin-left: 85px;"
                                   class="button_blue" value="同意协议并注册"/> <a href="#" class="zcxy"
                                                                            target="_blank.">注册协议</a>
                        </div>
                    </li>
                    <div class="cl"></div>
                </ul>
            </form>
        </div>
    </div>
    <!--注册end-->
</div>
</body>
</body>
</html>