开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
唔，看到标题，有点奇怪，再看一遍。 为什么一共普通的注册登录需要拿出来说呢，那不是大家都会？
好吧》今天俺们从javaweb方面，入手我们的注册登录。
常见用户注册登录流程如下：
合计合计，我们需要这些界面
LoginPageServlet 用于显示登录页面，默认是首页。需要通过out.print输出哦。
这个部分也可以抽离成jsp，不过俺暂时不用jsp。
过程介绍：
默认首页是我们的登录界面，但是可能你没有账号，那么我们就通过一个超链接跳转到注册界面，在注册界面注册后，把内容提交到registerServlect里面。在registerServlect里面通过链接数据库进行内容插入。如果插入成功，跳转登录界面，否则留在注册界面。有了账号就开始登录，登录通过表单把内容传递到loginServlect里面，然后链接数据库进行查询，如果有当前账号密码，就登录成功，跳转成功界面，如果没有，留在登录界面。并且可以通过setAttribute在成功界面显示名字，并且在成功界面添加超链接跳转到注销。
登录界面如下
- 登录界面提供用户输入用户名、密码、验证码、并提供一个checkbook表单控件，让用户选择是否把以上登录信息保存在本地
- 使用cookie获取客户端保存登录信息（包括用户名字和密码，并显示在相应组件里面）
- 提供注册超链接，其地址：regester.html
- out.print里面其实就是html内容，可以先在html里面书写好，然后复制通过其输出
regester.html
表单地址：register
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<!-- /register-->
<!--enctype="multipart/form-data"-->
<form action="register" method="post">
用户名：<input type="text" name="uname"><br>
密码：<input type="password" name="upwd"><br>
性别： <input type="radio" name="usex" value="男">男
<input type="radio" name="usex" value="女">女<br>
年龄：
<select name="uage">
<option value="00后" >00后</option>
<option value="90后" >90后</option>
<option value="80后" >80后</option>
<option value="70后" >70后</option>
<option value="其他" >其他</option>
</select>
<br>
爱好:
<input type="checkbox" name="uhobby" value="阅读">阅读
<input type="checkbox" name="uhobby" value="音乐">音乐
<input type="checkbox" name="uhobby" value="运动">运动
<input type="checkbox" name="uhobby" value="其他">其他<br>
<!--头像-->
<!-- <input type="file" name="avater"> <br>-->
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
registerServlect
- 链接数据库
//链接数据库
String url = "jdbc:mysql://localhost:3306/test1?characterEncoding=utf8";
String jdbcuser = "root";
String jdbcpsw = "my";
// 加载驱动
try {Class.forName("com.mysql.cj.jdbc.Driver").newInstance();
/*得到链接*/
Connection con=DriverManager.getConnection(url,jdbcuser,jdbcpsw);
String sql="insert into register(username,pwd,sex,age,hobby) values(?,?,?,?,?)";
PreparedStatement psta=con.prepareStatement(sql);
psta.setString(1,username);
psta.setString(2,password);
psta.setString(3,sex);
psta.setString(4,age);
psta.setString(5,hobby);
// 执行sql
rows=psta.executeUpdate();
psta.close();
con.close();
} catch (Exception e) {
e.printStackTrace();
}
进行逻辑处理
当rows=1，并且名字表示null，表示注册成功，跳转登录页面，并且通过弹窗提示
if(rows==1){
resp.setContentType("text/html");
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
PrintWriter out=resp.getWriter();
if(username==""){
out.println("<script>alert('注册失败');"+"window.location.href='register.html'</script>");
}
out.println("<script>if(confirm('注册成功，是否登录？'))"+
"{window.location.href='loginPage'}"+
"else{window.location.href='register'}</script>");
}else {
resp.sendRedirect("register.html");
}
登录页面：
验证码如何制作？
我们可以看到验证码其实就是我们输出的一个图片，如何在前端界面输出图片？
int width=50; int height=22;设置画布宽高
BufferedImage bufferedImage=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);初始化画布
Graphics g=bufferedImage.getGraphics();得到画笔
g.setColor(new Color(0xffcc));
g.fillRect(1,1,width,height);
g.setColor(Color.red);
g.drawString(validCode,4,17);
validCode需要输出的string类型。
通过设置颜色等，进行绘画
ImageIO.write(bufferedImage,"png",resp.getOutputStream());把结果返回到网页
我们知道需要进行验证码校验，那么后端如何获取前端数据？通过 save保存验证码是会话范围
HttpSession ses=req.getSession();
ses.setAttribute("validCode",validCode);
到这里，这个实验大致思路就非常清晰了，以后的登录注册都可以参考这个。
