1 注册html代码
1 register.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head></head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>会员注册</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <!-- 引入自定义css文件 style.css --> <link rel="stylesheet" href="css/style.css" type="text/css" /> <style> body { margin-top: 20px; margin: 0 auto; } .carousel-inner .item img { width: 100%; height: 300px; } font { color: #3164af; font-size: 18px; font-weight: normal; padding: 0 10px; } </style> </head> <body> <!-- 引入header.jsp --> <jsp:include page="/header.jsp"></jsp:include> <div class="container" style=" 100%; background: url('image/regist_bg.jpg');"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8" style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;"> <font>会员注册</font>USER REGISTER <form class="form-horizontal" style="margin-top: 5px;" action="/WEB15/register" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="请输入密码"> </div> </div> <div class="form-group"> <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-6"> <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-6"> <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="usercaption" class="col-sm-2 control-label">姓名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="usercaption" name="name" placeholder="请输入姓名"> </div> </div> <div class="form-group opt"> <label for="inlineRadio1" class="col-sm-2 control-label">性别</label> <div class="col-sm-6"> <label class="radio-inline"> <input type="radio" name="sex" id="inlineRadio1" value="male"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="inlineRadio2" value="female"> 女 </label> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">出生日期</label> <div class="col-sm-6"> <input type="date" class="form-control" name="birthday"> </div> </div> <div class="form-group"> <label for="date" class="col-sm-2 control-label">验证码</label> <div class="col-sm-3"> <input type="text" class="form-control"> </div> <div class="col-sm-2"> <img src="./image/captcha.jhtml" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" width="100" value="注册" name="submit" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; 100px; color: white;"> </div> </div> </form> </div> <div class="col-md-2"></div> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </body> </html>
2 footer.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <div class="container-fluid"> <div style="margin-top:50px;"> <img src="img/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" /> </div> <div style="text-align: center;margin-top: 5px;"> <ul class="list-inline"> <li><a href="info.jsp">关于我们</a></li> <li><a>联系我们</a></li> <li><a>招贤纳士</a></li> <li><a>法律声明</a></li> <li><a>友情链接</a></li> <li><a>支付方式</a></li> <li><a>配送方式</a></li> <li><a>服务声明</a></li> <li><a>广告声明</a></li> </ul> </div> <div style="text-align: center;margin-top: 5px;margin-bottom:20px;"> Copyright © 2005-2016 传智商城 版权所有 </div> </div>
3 header.jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <!-- 登录 注册 购物车... --> <div class="container-fluid"> <div class="col-md-4"> <img src="img/logo2.png" /> </div> <div class="col-md-5"> <img src="img/header.png" /> </div> <div class="col-md-3" style="padding-top:20px"> <ol class="list-inline"> <li><a href="login.jsp">登录</a></li> <li><a href="register.jsp">注册</a></li> <li><a href="cart.jsp">购物车</a></li> <li><a href="order_list.jsp">我的订单</a></li> </ol> </div> </div> <!-- 导航条 --> <div class="container-fluid"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li> <li><a href="#">电脑办公</a></li> <li><a href="#">电脑办公</a></li> <li><a href="#">电脑办公</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav> </div>
4 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>黑马商城首页</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container-fluid"> <!-- 引入header.jsp --> <jsp:include page="/header.jsp"></jsp:include> <!-- 轮播图 --> <div class="container-fluid"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 轮播图的中的小点 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图的轮播图片 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/1.jpg"> <div class="carousel-caption"> <!-- 轮播图上的文字 --> </div> </div> <div class="item"> <img src="img/2.jpg"> <div class="carousel-caption"> <!-- 轮播图上的文字 --> </div> </div> <div class="item"> <img src="img/3.jpg"> <div class="carousel-caption"> <!-- 轮播图上的文字 --> </div> </div> </div> <!-- 上一张 下一张按钮 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!-- 热门商品 --> <div class="container-fluid"> <div class="col-md-12"> <h2>热门商品 <img src="img/title2.jpg"/></h2> </div> <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;"> <img src="products/hao/big01.jpg" width="205" height="404" style="display: inline-block;"/> </div> <div class="col-md-10"> <div class="col-md-6" style="text-align:center;height:200px;padding:0px;"> <a href="product_info.htm"> <img src="products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;"> </a> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> </div> </div> <!-- 广告条 --> <div class="container-fluid"> <img src="products/hao/ad.jpg" width="100%"/> </div> <!-- 最新商品 --> <div class="container-fluid"> <div class="col-md-12"> <h2>最新商品 <img src="img/title2.jpg"/></h2> </div> <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;"> <img src="products/hao/big01.jpg" width="205" height="404" style="display: inline-block;"/> </div> <div class="col-md-10"> <div class="col-md-6" style="text-align:center;height:200px;padding:0px;"> <a href="product_info.htm"> <img src="products/hao/middle01.jpg" width="516px" height="200px" style="display: inline-block;"> </a> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small03.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small04.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> <div class="col-md-2 yes-right-border" style="text-align:center;height:200px;padding:10px 0px;"> <a href="product_info.htm"> <img src="products/hao/small05.jpg" width="130" height="130" style="display: inline-block;"> </a> <p><a href="product_info.html" style='color:#666'>冬瓜</a></p> <p><font color="#E4393C" style="font-size:16px">¥299.00</font></p> </div> </div> </div> <!-- 引入footer.jsp --> <jsp:include page="/footer.jsp"></jsp:include> </div> </body> </html>
2 RegisterServlet 代码
package register; import java.io.IOException; import java.lang.reflect.InvocationTargetException; import java.sql.SQLException; import java.util.Map; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.beanutils.BeanUtils; import org.apache.commons.dbutils.QueryRunner; import com.ithiema.utils.DataSourceUtils; public class RegisterServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置request的编码---只适合post方式 request.setCharacterEncoding("UTF-8"); //get方式乱码解决 //String username = request.getParameter("username");//乱码 //先用iso8859-1编码 在使用utf-8解码 //username = new String(username.getBytes("iso8859-1"),"UTF-8"); //1、获取数据 //String username = request.getParameter("username"); //System.out.println(username); //String password = request.getParameter("password"); //..... //2、将散装的封装到javaBean //User user = new User(); //user.setUsername(username); //user.setPassword(password); //使用BeanUtils进行自动映射封装 //BeanUtils工作原理：将map中的数据 根据key与实体的属性的对应关系封装 //只要key的名字与实体的属性 的名字一样 就自动封装到实体中 Map<String, String[]> properties = request.getParameterMap(); User user = new User(); try { BeanUtils.populate(user, properties); } catch (IllegalAccessException | InvocationTargetException e) { e.printStackTrace(); } //现在这个位置 user对象已经封装好了 //手动封装uid----uuid---随机不重复的字符串32位--java代码生成后是36位 user.setUid(UUID.randomUUID().toString()); //3、将参数传递给一个业务操作方法 try { regist(user); } catch (SQLException e) { e.printStackTrace(); } //4、认为注册成功跳转到登录页面 response.sendRedirect(request.getContextPath()+"/login.jsp"); } //注册的方法 public void regist(User user) throws SQLException{ //操作数据库 QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "insert into user values(?,?,?,?,?,?,?,?,?,?)"; runner.update(sql,user.getUid(),user.getUsername(),user.getPassword(),user.getName(), user.getEmail(),null,user.getBirthday(),user.getSex(),null,null); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3 User类
package register; public class User { private String uid; private String username; private String password; private String name; private String email; private String sex; private String birthday; public String getUid() { return uid; } public void setUid(String uid) { this.uid = uid; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public String getBirthday() { return birthday; } public void setBirthday(String birthday) { this.birthday = birthday; } @Override public String toString() { return "User [uid=" + uid + ", username=" + username + ", password=" + password + ", name=" + name + ", email=" + email + ", sex=" + sex + ", birthday=" + birthday + "]"; } }