register.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>注册</title>
6 <link rel="stylesheet" type="text/css" href="css/common.css">
7 <link rel="stylesheet" href="css/register.css">
8 <!--导入jquery-->
9 <script src="js/jquery-3.3.1.js"></script>
10 <script>
11 /*
12 表单校验：
13 1.用户名：单词字符，长度8到20位
14 2.密码：单词字符，长度8到20位
15 3.email：邮件格式
16 4.姓名：非空
17 5.手机号：手机号格式
18 6.出生日期：非空
19 7.验证码：非空
20 */
21
22 function checkUsername() {
23 //1.获取用户名值
24 var username = $("#username").val();
25 //2.定义正则
26 var reg_username = /^\w{8,20}$/;
27 //3.判断，给出提示信息
28 var flag = reg_username.test(username);
29 if(flag){
30 //用户名合法 --> 加一个绿色边框
31 // $("#username").css("border",""); //或者清空边框样式恢复原样也行
32 $("#username").css("border","1px solid green");
33 }else{
34 //用户名非法 --> 加一个红色边框
35 $("#username").css("border","1px solid red");
36 }
37 return flag;
38 }
39
40 function checkPassword() {
41 //1.获取值
42 var password = $("#password").val();
43 //2.定义正则
44 var reg_password = /^\w{8,20}$/;
45 //3.判断，给出提示信息
46 var flag = reg_password.test(password);
47 if(flag){
48 //合法 --> 加一个绿色边框
49 $("#password").css("border","1px solid green");
50 }else{
51 //非法 --> 加一个红色边框
52 $("#password").css("border","1px solid red");
53 }
54 return flag;
55 }
56
57 //tips：选中代码区域 快捷键ctrl+r 输入需要被替换的词和替换词 进行局部代码替换
58 function checkEmail() {
59 //1.获取值
60 var email = $("#email").val();
61 //2.定义正则
62 var reg_email = /^\w+@\w+\.\w+$/;
63 //3.判断，给出提示信息
64 var flag = reg_email.test(email);
65 if(flag){
66 //合法 --> 加一个绿色边框
67 $("#email").css("border","1px solid green");
68 }else{
69 //非法 --> 加一个红色边框
70 $("#email").css("border","1px solid red");
71 }
72 return flag;
73 }
74
75 function checkName() {
76 //1.获取值
77 var name = $("#name").val();
78 //2.判断是否为空
79 var flag = false;
80 if (name!=null && name!=""){
81 flag = true;
82 }
83 //3.给出提示信息
84 if(flag){
85 $("#name").css("border","1px solid green");
86 }else{
87 $("#name").css("border","1px solid red");
88 }
89 return flag;
90 }
91
92 function checkTelephone() {
93 //1.获取值
94 var telephone = $("#telephone").val();
95 //2.定义正则
96 var reg_telephone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
97 //3.判断，给出提示信息
98 var flag = reg_telephone.test(telephone);
99 if(flag){
100 //合法 --> 加一个绿色边框
101 $("#telephone").css("border","1px solid green");
102 }else{
103 //非法 --> 加一个红色边框
104 $("#telephone").css("border","1px solid red");
105 }
106 return flag;
107 }
108
109 function checkBirthday() {
110 //1.获取值
111 var birthday = $("#birthday").val();
112 //2.判断是否为空
113 var flag = false;
114 if (birthday!=null && birthday!=""){
115 flag = true;
116 }
117 //3.给出提示信息
118 if(flag){
119 $("#birthday").css("border","1px solid green");
120 }else{
121 $("#birthday").css("border","1px solid red");
122 }
123 return flag;
124 }
125
126 function checkCode() {
127 //1.获取值
128 var code = $("#check").val();
129 //2.判断是否为空
130 var flag = false;
131 if (code!=null && code!=""){
132 flag = true;
133 }
134 //3.给出提示信息
135 if(flag){
136 $("#check").css("border","1px solid green");
137 }else{
138 $("#check").css("border","1px solid red");
139 }
140 return flag;
141 }
142
143 $(function () {
144 //1、当表单提交时，调用所用校验方法
145 $("#registerForm").submit(function () {
146 /*//如果这个匿名函数没有返回值或者返回true，则表单提交；如果返回flase，则不提交
147 return checkUsername() && checkPassword() && checkEmail() && checkName() && checkCode() && checkBirthday() && checkTelephone();*/
148
149 /*在此使用异步提交表单是为了获取服务器响应的数据。
150 因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，
151 只能通过ajax获取响应数据*/
152 //1.发送数据到服务器
153 if(checkUsername() && checkPassword() && checkEmail() && checkName() && checkCode() && checkBirthday() && checkTelephone()){
154 //校验通过,发送ajax请求，提交表单的数据
155 $.post(
156 "registUserServlet",
157 $(this).serialize(), //用户填写的数据；.serialize()序列化表单内容为字符串，如username=zhangsan&password=123
158 function (data) {
159 //处理服务器响应的数据data：一个ResultInfo对象
160 if(data.flag){
161 //注册成功，跳转成功页面
162 location.href="register_ok.html";
163 }else{
164 //注册失败,给errorMsg-div添加提示信息
165 $("#errorMsg").html(data.errorMsg);
166 }
167 },
168 "json"
169 );
170 }
171 //2.验证失败，不让页面跳转
172 return false;
173 });
174
175 //2、当某个组件失去焦点时，调用对应的校验方法
176 $("#username").blur(checkUsername);
177 $("#password").blur(checkPassword);
178 $("#email").blur(checkEmail);
179 $("#name").blur(checkName);
180 $("#check").blur(checkCode);
181 $("#birthday").blur(checkBirthday);
182 $("#telephone").blur(checkTelephone);
183 });
184 </script>
185 </head>
186 <body>
187 <!--引入头部-->
188 <div id="header"></div>
189
190 <!-- 主体 -->
191 <div class="rg_layout">
192 <div class="rg_form clearfix">
193 <div class="rg_form_left">
194 <p>新用户注册</p>
195 <p>USER REGISTER</p>
196 </div>
197 <div class="rg_form_center">
198 <div id="errorMsg" style="color: red;text-align: center"></div>
199 <!--注册表单-->
200 <form id="registerForm" action="user" method="get">
201 <!--提交处理请求的标识符-->
202 <input type="hidden" name="action" value="register">
203 <table style="margin-top: 25px;">
204 <tr>
205 <td class="td_left">
206 <label for="username">用户名</label>
207 </td>
208 <td class="td_right">
209 <input type="text" id="username" name="username" placeholder="请输入账号">
210 </td>
211 </tr>
212 <tr>
213 <td class="td_left">
214 <label for="password">密码</label>
215 </td>
216 <td class="td_right">
217 <input type="text" id="password" name="password" placeholder="请输入密码">
218 </td>
219 </tr>
220 <tr>
221 <td class="td_left">
222 <label for="email">Email</label>
223 </td>
224 <td class="td_right">
225 <input type="text" id="email" name="email" placeholder="请输入Email">
226 </td>
227 </tr>
228 <tr>
229 <td class="td_left">
230 <label for="name">姓名</label>
231 </td>
232 <td class="td_right">
233 <input type="text" id="name" name="name" placeholder="请输入真实姓名">
234 </td>
235 </tr>
236 <tr>
237 <td class="td_left">
238 <label for="telephone">手机号</label>
239 </td>
240 <td class="td_right">
241 <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
242 </td>
243 </tr>
244 <tr>
245 <td class="td_left">
246 <label for="sex">性别</label>
247 </td>
248 <td class="td_right gender">
249 <input type="radio" id="sex" name="sex" value="男" checked> 男
250 <input type="radio" name="sex" value="女"> 女
251 </td>
252 </tr>
253 <tr>
254 <td class="td_left">
255 <label for="birthday">出生日期</label>
256 </td>
257 <td class="td_right">
258 <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
259 </td>
260 </tr>
261 <tr>
262 <td class="td_left">
263 <label for="check">验证码</label>
264 </td>
265 <td class="td_right check">
266 <input type="text" id="check" name="check" class="check">
267 <img src="checkCodeServlet" height="32px" alt="" onclick="changeCheckCode(this)">
268 <script type="text/javascript">
269 //图片点击事件
270 function changeCheckCode(img) {
271 img.src="checkCodeServlet?"+new Date().getTime();
272 }
273 </script>
274 </td>
275 </tr>
276 <tr>
277 <td class="td_left">
278 </td>
279 <td class="td_right check">
280 <input type="submit" class="submit" value="注册">
281 <span id="msg" style="color: red;"></span>
282 </td>
283 </tr>
284 </table>
285 </form>
286 </div>
287 <div class="rg_form_right">
288 <p>
289 已有账号？
290 <a href="login.html">立即登录</a>
291 </p>
292 </div>
293 </div>
294 </div>
295
296 <!--引入尾部-->
297 <div id="footer"></div>
298
299 <!--导入布局js，共享header和footer-->
300 <script type="text/javascript" src="js/include.js"></script>
301 </body>
302 </html>
View Code
register_ok.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>注册</title>
6 <link rel="stylesheet" type="text/css" href="css/common.css">
7 <link rel="stylesheet" href="css/register.css">
8 <!--导入jquery-->
9 <script src="js/jquery-3.3.1.js"></script>
10 </head>
11 <body>
12 <!--引入头部-->
13 <div id="header"></div>
14 <!-- 头部 end -->
15 <div style="text-align:center;red:yellow;font-weight:bold;height:150px;padding-top:100px;font-size:30px;">
16 <h4>恭喜，注册成功！请登录您的注册邮箱进行激活您的账号，激活后才能登录。</h4>
17 </div>
18 <!--引入尾部-->
19 <div id="footer"></div>
20 <!--导入布局js，共享header和footer-->
21 <script type="text/javascript" src="js/include.js"></script>
22 </body>
23 </html>
View Code
RegistUserServlet
1 package cn.haifei.travel.web.servlet;
2
3 import cn.haifei.travel.domain.ResultInfo;
4 import cn.haifei.travel.domain.User;
5 import cn.haifei.travel.service.UserService;
6 import cn.haifei.travel.service.impl.UserServiceImpl;
7 import com.fasterxml.jackson.databind.ObjectMapper;
8 import org.apache.commons.beanutils.BeanUtils;
9
10 import javax.servlet.ServletException;
11 import javax.servlet.annotation.WebServlet;
12 import javax.servlet.http.HttpServlet;
13 import javax.servlet.http.HttpServletRequest;
14 import javax.servlet.http.HttpServletResponse;
15 import javax.servlet.http.HttpSession;
16 import java.io.IOException;
17 import java.lang.reflect.InvocationTargetException;
18 import java.util.Map;
19
20 @WebServlet("/registUserServlet")
21 public class RegistUserServlet extends HttpServlet {
22 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
23
24 //验证校验码
25 String checkcode_userinput = request.getParameter("check"); //用户提交的验证码
26 HttpSession session = request.getSession();
27 String checkcode_server = (String)session.getAttribute("CHECKCODE_SERVER");//服务器产生的验证码
28 session.removeAttribute("CHECKCODE_SERVER"); //保证后台产生得验证码一次性使用
29 if (checkcode_server==null || !checkcode_server.equalsIgnoreCase(checkcode_userinput)){
30 //用户输入验证码错误
31 ResultInfo info = new ResultInfo();
32 info.setFlag(false);
33 info.setErrorMsg("验证码错误！");
34 ObjectMapper mapper = new ObjectMapper();
35 String json = mapper.writeValueAsString(info);
36 response.setContentType("application/json;charset=utf-8");
37 //因为json结果是字符串，所以此处用字节流或者字符流都行
38 //response.getOutputStream().write(json.getBytes()); //字节流
39 response.getWriter().write(json); //字符流
40 return;
41 }//用户输入验证码正确执行以下
42
43
44 //1 获取数据
45 Map<String, String[]> map = request.getParameterMap();
46
47 //2 封装对象
48 User user = new User();
49 try {
50 BeanUtils.populate(user, map);
51 } catch (IllegalAccessException e) {
52 e.printStackTrace();
53 } catch (InvocationTargetException e) {
54 e.printStackTrace();
55 }
56
57 //3 调用service完成注册
58 UserService service = new UserServiceImpl();
59 boolean flag = service.regist(user);
60
61 //4 响应结果
62 ResultInfo info = new ResultInfo();
63 if (flag){
64 //注册成功
65 info.setFlag(true);
66 }else {
67 //注册失败
68 info.setFlag(false);
69 info.setErrorMsg("注册失败！");
70 }
71
72 //5 将对象info序列化为json
73 ObjectMapper mapper = new ObjectMapper(); //利用jackson
74 String json = mapper.writeValueAsString(info);
75
76 //6 将json结果写回到客户端
77 response.setContentType("application/json;charset=utf-8");
78 response.getWriter().write(json);
79 }
80
81 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
82 this.doPost(request, response);
83 }
84 }
View Code
ResultInfo
1 package cn.haifei.travel.domain;
2
3 import java.io.Serializable;
4
5 /**
6 * 用于封装后端返回前端数据对象
7 */
8 public class ResultInfo implements Serializable {
9 private boolean flag;//后端返回结果正常为true，发生异常返回false
10 private Object data;//后端返回结果数据对象
11 private String errorMsg;//发生异常的错误消息
12
13 //无参构造方法
14 public ResultInfo() {
15 }
16 public ResultInfo(boolean flag) {
17 this.flag = flag;
18 }
19 /**
20 * 有参构造方法
21 * @param flag
22 * @param errorMsg
23 */
24 public ResultInfo(boolean flag, String errorMsg) {
25 this.flag = flag;
26 this.errorMsg = errorMsg;
27 }
28 /**
29 * 有参构造方法
30 * @param flag
31 * @param data
32 * @param errorMsg
33 */
34 public ResultInfo(boolean flag, Object data, String errorMsg) {
35 this.flag = flag;
36 this.data = data;
37 this.errorMsg = errorMsg;
38 }
39
40 public boolean isFlag() {
41 return flag;
42 }
43
44 public void setFlag(boolean flag) {
45 this.flag = flag;
46 }
47
48 public Object getData() {
49 return data;
50 }
51
52 public void setData(Object data) {
53 this.data = data;
54 }
55
56 public String getErrorMsg() {
57 return errorMsg;
58 }
59
60 public void setErrorMsg(String errorMsg) {
61 this.errorMsg = errorMsg;
62 }
63 }
View Code
CheckCodeServlet
1 package cn.haifei.travel.web.servlet;
2
3 import javax.imageio.ImageIO;
4 import javax.servlet.ServletException;
5 import javax.servlet.annotation.WebServlet;
6 import javax.servlet.http.HttpServlet;
7 import javax.servlet.http.HttpServletRequest;
8 import javax.servlet.http.HttpServletResponse;
9 import java.awt.*;
10 import java.awt.image.BufferedImage;
11 import java.io.IOException;
12 import java.util.Random;
13
14 /**
15 * 验证码
16 */
17 @WebServlet("/checkCodeServlet")
18 public class CheckCodeServlet extends HttpServlet {
19 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
20
21 //服务器通知浏览器不要缓存
22 response.setHeader("pragma","no-cache");
23 response.setHeader("cache-control","no-cache");
24 response.setHeader("expires","0");
25
26 //在内存中创建一个长80，宽30的图片，默认黑色背景
27 //参数一：长
28 //参数二：宽
29 //参数三：颜色
30 int width = 80;
31 int height = 30;
32 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
33
34 //获取画笔
35 Graphics g = image.getGraphics();
36 //设置画笔颜色为灰色
37 g.setColor(Color.GRAY);
38 //填充图片
39 g.fillRect(0,0, width,height);
40
41 //产生4个随机验证码，12Ey
42 String checkCode = getCheckCode();
43 //将验证码放入HttpSession中
44 request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
45
46 //设置画笔颜色为黄色
47 g.setColor(Color.YELLOW);
48 //设置字体的小大
49 g.setFont(new Font("黑体",Font.BOLD,24));
50 //向图片上写入验证码
51 g.drawString(checkCode,15,25);
52
53 //将内存中的图片输出到浏览器
54 //参数一：图片对象
55 //参数二：图片的格式，如PNG,JPG,GIF
56 //参数三：图片输出到哪里去
57 ImageIO.write(image,"PNG",response.getOutputStream());
58 }
59 /**
60 * 产生4位随机字符串
61 */
62 private String getCheckCode() {
63 String base = "0123456789ABCDEFGabcdefg";
64 int size = base.length();
65 Random r = new Random();
66 StringBuffer sb = new StringBuffer();
67 for(int i=1;i<=4;i++){
68 //产生0到size-1的随机值
69 int index = r.nextInt(size);
70 //在base字符串中获取下标为index的字符
71 char c = base.charAt(index);
72 //将c放入到StringBuffer中去
73 sb.append(c);
74 }
75 return sb.toString();
76 }
77 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
78 this.doGet(request,response);
79 }
80 }
View Code
UserService
1 /**
2 * 注册用户
3 * @param user
4 * @return
5 */
6 boolean regist(User user);
7
8 /**
9 * 邮箱链接-激活用户账号
10 * @param code
11 * @return
12 */
13 boolean active(String code);
View Code
UserServiceImpl
1 @Override
2 public boolean regist(User user) {
3 //根据用户名查询用户对象，防止重复用户名
4 User user1 = userDao.findByUsername(user.getUsername());
5 if (user1 != null){
6 System.out.println("用户名已存在，注册失败");
7 return false;
8 }
9
10 //设置激活码，唯一字符串
11 user.setCode(UuidUtil.getUuid());
12 //设置邮件链接激活状态
13 user.setStatus("N");
14 //保存用户信息
15 userDao.save(user);
16 //发送激活邮件链接
17 String content="<a href='http://localhost/travel/activeUserServlet?code=" + user.getCode() + "'>点击激活【黑马旅游网】</a>";
18 MailUtils.sendMail(user.getEmail(),content,"激活邮件");
19 return true;
20 }
21
22 @Override
23 public boolean active(String code) {
24 //1 根据激活码查询用户对象
25 User user = userDao.findByCode(code);
26 if (user != null){
27 //2 调用dao的修改激活状态方法
28 userDao.updateStatus(user);
29 return true;
30 }else {
31 return false;
32 }
33 }
View Code
UserDao
1 /**
2 * 根据用户名查询用户信息
3 * @param username
4 * @return
5 */
6 public User findByUsername(String username);
7
8 /**
9 * 添加用户
10 * @param user
11 * @return
12 */
13 public int save(User user);
14
15 /**
16 * 根据激活码查询用户信息
17 * @param code
18 * @return
19 */
20 User findByCode(String code);
21
22 /**
23 * 更新用户账号的激活状态
24 * @param user
25 */
26 void updateStatus(User user);
View Code
UserDaoImpl
1 @Override
2 public User findByUsername(String username) {
3 User user = null;
4 try {
5 String sql = "select * from tab_user where username = ?";
6 user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
7 } catch (Exception e) {
8 // e.printStackTrace();
9 }
10 return user;
11 }
12
13 @Override
14 public int save(User user) {
15 String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
16 int count = template.update(
17 sql,
18 user.getUsername(),
19 user.getPassword(),
20 user.getName(),
21 user.getBirthday(),
22 user.getSex(),
23 user.getTelephone(),
24 user.getEmail(),
25 user.getStatus(),
26 user.getCode()
27 );
28 return count;
29 }
30
31 @Override
32 public User findByCode(String code) {
33 User user = null;
34 try {
35 String sql = "select * from tab_user where code = ?";
36 user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), code);
37 } catch (DataAccessException e) {
38 // e.printStackTrace();
39 }
40 return user;
41 }
42
43 @Override
44 public void updateStatus(User user) {
45 String sql = "update tab_user set status = 'Y' where uid = ?";
46 /*int count = */template.update(sql, user.getUid());
47 }
View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
