注册案例:
要求:
1，用servlet来获取提交的注册表单的数据(在页面要进行数据的校验即使用js校验)
2，使用BeanUtils工具将获取的数据封装到实体类里
3 , 将实体类传给dao类的方法
4, 在DAO类里将收到的数据插入到数据里
5, 根据返回的影响行数来判断注册是否成功
6，如果注册成功，跳转一个成功的servlet进行信息提示，如果失败，跳转一个失败的servlet进行提示。
1.建立数据库,建表
2.导包,建立util类(数据库的工具类)
package com.qin.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* Created by SunYuqin in 2018/9/14
* Code without comments is soulless
* Description:
**/
public class JDBCUtils {
private static DataSource ds;
static {
try {
//加载配置文件druid.properties
Properties pro = new Properties();
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//初始化DataSource对象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
//获取datasource对象
public static DataSource getDataSource() {
return ds;
}
//获取connection对象
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
3.建立持久层dao包,并建立UserDao类,创建addUser方法
package com.qin.dao;
import com.qin.domain.RegisterUser;
import com.qin.util.JDBCUtils;
import org.apache.commons.lang.StringUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.List;
/**
* Created by SunYuqin in 2018/9/15
* Code without comments is soulless
* Description:
**/
public class UserDao {
//获取jdbctemplate对象
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
//add方法
public int addUser(RegisterUser registerUser) {
String sql = "insert into registeruser values(null,?,?,?,?,?,?,?,?)";
String hobby = StringUtils.join(registerUser.getHobby(), ",");
int update = template.update(sql, registerUser.getUsername(), registerUser.getPassword(), registerUser.getEmail(),
registerUser.getName(), registerUser.getPhone(), registerUser.getGender(),
registerUser.getBirth(), hobby);
return update;
}
//查询方法
public List<RegisterUser> selectAll() {
String sql = "select * from registeruser";
List<RegisterUser> maps = template.query(sql, new BeanPropertyRowMapper<>(RegisterUser.class));
return maps;
}
}
4.在domain包中建立实体类RegisterUser(属性值一定要与form表单,以及数据库中的键对应,方便阅读以及使用BeanUtils工具类)
package com.qin.domain;
import java.sql.Date;
import java.util.Arrays;
/**
* Created by SunYuqin in 2018/9/15
* Code without comments is soulless
* Description:
**/
public class RegisterUser {
private String username;
private String password;
private String email;
private String name;
private String phone;
private String gender;
private Date birth;
private String[] hobby;
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 getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Date getBirth() {
return birth;
}
public void setBirth(Date birth) {
this.birth = birth;
}
public String[] getHobby() {
return hobby;
}
public void setHobby(String[] hobby) {
this.hobby = hobby;
}
@Override
public String toString() {
return "RegisterUser{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
", name='" + name + '\'' +
", phone=" + phone +
", gender='" + gender + '\'' +
", birth=" + birth +
", hobby=" + Arrays.toString(hobby) +
'}';
}
}
5.建立servlet,用来对表单传的值进行处理
package com.qin.servlet;
import com.qin.dao.UserDao;
import com.qin.domain.RegisterUser;
import org.apache.commons.beanutils.BeanUtils;
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;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取表单中的数据
request.setCharacterEncoding("utf-8");
Map<String, String[]> parameterMap = request.getParameterMap();
RegisterUser registerUser = new RegisterUser();
try {
BeanUtils.populate(registerUser,parameterMap);
UserDao dao = new UserDao();
int count = dao.addUser(registerUser);
if (count>0){
//跳转
request.getRequestDispatcher("/successServlet").forward(request,response);
}else {
request.getRequestDispatcher("/failServlet").forward(request,response);
}
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
6.分别建立successServlet以及failServlet
success
package com.qin.servlet;
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("/successServlet")
public class SuccessServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("注册成功!!!");
request.setCharacterEncoding("utf-8");
request.getRequestDispatcher("/getallServlet").forward(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
fail
package com.qin.servlet;
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("/failServlet")
public class FailServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("注册失败!!!");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
//获取所有数据库值的servlet
package com.qin.servlet;
import com.qin.dao.UserDao;
import com.qin.domain.RegisterUser;
import org.apache.commons.lang.StringUtils;
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;
import java.util.List;
@WebServlet("/getallServlet")
public class GetAllServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取所有的记录
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("<head>\n" +
" <meta charset=\"utf-8\">\n" +
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n" +
" <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->\n" +
" <title>Bootstrap HelloWorld</title>\n" +
"\n" +
" <!-- Bootstrap -->\n" +
" <link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">\n" +
" <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->\n" +
" <script src=\"js/jquery-3.2.1.min.js\"></script>\n" +
" <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->\n" +
" <script src=\"js/bootstrap.min.js\"></script>\n" +
"</head>");
response.getWriter().write("<div class='container'>");
response.getWriter().write("<table class=\"table table-striped table-hover table-bordered\">");
response.getWriter().write("<header align='center'><font size='13'>数据库中的记录表</font></header>");
response.getWriter().write("<tr align='center'>\n" +
" <td>username</td>\n" +
" <td>password</td>\n" +
" <td>email</td>\n" +
" <td>name</td>\n" +
" <td>phone</td>\n" +
" <td>gender</td>\n" +
" <td>birthday</td>\n" +
" <td>hobby</td>\n" +
" </tr>");
UserDao dao = new UserDao();
List<RegisterUser> list = dao.selectAll();
for (RegisterUser user : list) {
response.getWriter().write("<tr align='center'>\n" +
" <td>" + user.getUsername() + "</td>\n" +
" <td>" + user.getPassword() + "</td>\n" +
" <td>" + user.getEmail() + "</td>\n" +
" <td>" + user.getName() + "</td>\n" +
" <td>" + user.getPhone() + "</td>\n" +
" <td>" + user.getGender() + "</td>\n" +
" <td>" + user.getBirth() + "</td>\n" +
" <td>" + StringUtils.join(user.getHobby(), ",") + "</td>\n" +
" </tr>");
}
response.getWriter().write("</table>");
response.getWriter().write("</div>");
}
}
7.对表单的action进行设置,启动tomcat 开始测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
#sunbtn {
padding-left: 150px;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="/day14_register/registerServlet" method="post" id="form1">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user_name"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="password_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<span id="email_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
<span id="name_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right">
<input type="text" name="phone" id="tel" placeholder="请输入手机号">
<span id="tel_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birth" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label>爱好</label></td>
<td class="td_right">
<input type="checkbox" name="hobby" value="swim" > 游泳
<input type="checkbox" name="hobby" value="run"> 跑步
<input type="checkbox" name="hobby" value="game"> 游戏
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="sunbtn"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
<script>
window.onload = function () {
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("email").onblur = checkEmail;
document.getElementById("name").onblur = checkName;
document.getElementById("tel").onblur = checkTel;
document.getElementById("form1").onsubmit = function () {
return checkUsername() && checkPassword() && checkEmail() &&checkName() && checkTel();
}
};
//校验username
function checkUsername() {
var username = document.getElementById("username").value;
var reg = /^\w{3,12}$/;
var flag = reg.test(username);
var user_name = document.getElementById("user_name");
if (flag){
user_name.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
user_name.innerHTML = "<font color='red'>用户名格式不正确</font>"
}
return flag;
};
//校验password
function checkPassword(){
var password = document.getElementById("password").value;
var reg = /^\w{3,12}$/;
var flag = reg.test(password);
var pass_word = document.getElementById("password_1");
if (flag){
pass_word.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
pass_word.innerHTML = "<font color='red'>密码格式不正确</font>"
}
return flag;
};
//校验email
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^\w{3,13}@\w{1,3}.\w{2,3}$/;
var flag = reg.test(email);
var email_1 = document.getElementById("email_1");
if (flag){
email_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
email_1.innerHTML = "<font color='red'>邮箱格式不正确</font>"
}
return flag;
};
//校验name
function checkName(){
var name = document.getElementById("name").value;
var reg = /^[\u4e00-\u9fa5]{2,15}$/;
var flag = reg.test(name);
var name_1 = document.getElementById("name_1");
if (flag){
name_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
name_1.innerHTML = "<font color='red'>姓名格式不正确</font>"
}
return flag;
};
//校验手机号
function checkTel(){
var tel = document.getElementById("tel").value;
var reg = /^1[3456789]\d{9}$/;
var flag = reg.test(tel);
var tel_1 = document.getElementById("tel_1");
if (flag){
tel_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
tel_1.innerHTML = "<font color='red'>手机号格式不正确</font>"
}
return flag;
};
</script>
</body>
</html>