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="width: 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; width: 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 + "]";
}
}
