希望能通过 JSP 的学习，帮助自己更好地理解 WEB 开发的基本原理。
JSP是前后端融合的技术
JSP 写出来，就是一个 HTML 的文本文件。
其中大部分是 HTML 语法，掺杂了部分由 <% %> 包裹着的 JAVA 语法。
其中，HTML 语法直接被浏览器解析和执行；
而 JAVA 语法，则被 Tomcat 服务器的 JSP 引擎转换成 Servlet 可执行类。
如此一个 JSP 便同时实现了前端、后端的融合。
登录和注册的步骤
一般情况下，我们在未注册的情况下，登录一个网站，不考虑第三方登录和短信验证的情况下，一般会经历这几个步骤：
1. 点击登录
此时，网站会获取你填写的登录信息，拿到数据库去查找，看看是否有这个用户，密码是否正确等。
2. 登录失败
因为我们没有注册过，所以网站在数据库中没法找到用户名，就会告诉我们登录失败。
3. 注册
此时，网站一般会提示用户注册新账号，跳转到注册界面。
用户填写符合网站要求的 ID 和密码，并确认密码
网站将用户的 ID 和密码存放到数据库里。
4. 注册成功
如果用户注册的 ID 和数据库已有 ID 不冲突，那么网站会提示注册成功
5. 再次登录
此时，用户使用新注册的 ID 和对应密码登录，并且还可以选择 “记住密码”
6. 登录成功
网站在数据库中查找用户 ID 和密码，因为我们刚刚注册了，所以此时是能够找到的，允许用户登录，显示登陆后的界面。
难点
用 JSP 实现用户登录和注册的难点主要有
- 数据库操作
- 注册时调用 javascript 函数确认两次输入密码是否相同
- 使用 AJAX 无刷新检测用户名是否已存在
1. 数据库操作
主要参考了
这篇
BaseDao
BaseDao 类是最基本的数据库操作类，要完成 connect 和 closeAll 方法
BaseDao.java
connect方法
public void connect(){
try{
Class.forName("com.mysql.cj.jdbc.Driver");
connection = DriverManager.getConnection(url,name,password);
statement = connection.createStatement();
}catch (Exception e){
e.printStackTrace();
}
}
该方法使用 JDBC 方式，进行了数据库的连接
connection = DriverManager.getConnection(url,name,password);
- url 是连接的主机号和端口号以及数据库名称和连接时的相关参数，例如
jdbc:mysql://localhost:3306/snake_game?characterEncoding=utf-8 - name 是该数据库的管理员账号名称 一般是
root - password 一般是
123456
关于为什么要用 Class.forName("com.mysql.cj.jdbc.Driver")
可以参考这篇博客
UserDao
UserDao 类是针对 User 实体类的数据库操作类，它是 BaseDao 的子类，继承了 BaseDao 的数据库连接和关闭方法以及相关的变量成员。
为了实现用户的
- 登录
- 注册
- 检查 ID 是否重复
等功能需求
UserDao 类发展出了多种方法
如
- doLogin
- doSignup
- checkId
以 doLogin 方法为例
doLogin
public User doLogin(String id,String password){
User user = null;
try{
super.connect();
String sql = "select * from user where id=? and password=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,id);
preparedStatement.setString(2,password);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
user = new User();
user.setId(resultSet.getString(1));
user.setPassword(resultSet.getString(2));
}
}catch (Exception e){
e.printStackTrace();
}finally {
super.closeAll();
}
return user;
}
每次进行查询前，先调用父类方法连接数据库；
接着调用父类成员 connection 获取 preparedStatement 成员以进行SQL操作；
2. javascript 检验两次密码是否相同
话不多说，直接上代码
<script>
function confirmPassword(){
var password1 = $("input[name='password1']").val();
var password2 = $("input[name='password2']").val();
if(password1!==password2){
document.getElementById("confirm").innerHTML="两次密码不同";
}else {
document.getElementById("confirm").innerHTML="相同";
}
}
</script>
<body>
<h1>注册</h1>
<form action="signup_process.jsp" method="post">
您的id <input type="text" name="user" id="user">
密码 <input type="password" name="password1"> <br>
确认密码 <input type="password" name="password2" onblur="confirmPassword()">
<div id="confirm"></div>
<br>
<input type="submit" value="注册">
</form>
</body>
3. AJAX 无刷新检测 ID 是否重复
主要参考了，这个
需要 AJAX + Servlet 类配合
话不多说，上代码
signup.jsp
<script>
function checkId() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState===4 && xmlHttp.status===200){
var data = xmlHttp.responseText;
callBack(data);
}
};
var param = document.getElementById("user").value;
console.log("param="+param);
xmlHttp.open("GET","/jsp_learning_war_exploded/check?id="+param,true);
xmlHttp.send(null);
}
function callBack(param) {
if(param==="0"){
document.getElementById("id").innerHTML="OK"
}else {
document.getElementById("id").innerHTML="用户ID重复"
}
}
</script>
<body>
<h1>注册</h1>
<form action="signup_process.jsp" method="post">
您的id <input type="text" name="user" id="user" onblur="checkId()">
<div id="id">
</div>
<br>
密码 <input type="password" name="password1"> <br>
确认密码 <input type="password" name="password2" onblur="confirmPassword()">
<div id="confirm"></div>
<br>
<input type="submit" value="注册">
</form>
</body>
UserDao.java 的 CheckId 方法
public int checkId(String id){
int result = 0;
try{
super.connect();
String sql = "select * from user where id=?";
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,id);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
result ++;
}
}catch (Exception e){
e.printStackTrace();
}finally {
super.closeAll();
}
return result;
}
显示效果
