目录
9.异步校验用户名是否存在(使用AJAX) 这里烂尾了,望注意,后续会把所有代码都上传到GitHub
1.总目标
实现注册,选的部门信息从数据库中读取真实数据,
注册时,使用JS对两次输入的密码一致校验
通过异步校验来判断用户是否存在
注册失败后,返回注册页面,之前输入的信息保存
2.实现静态视图
注册页面
1.新增register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>CoolMeeting会议管理系统</title>
<link rel="stylesheet" href="styles/common.css" />
<style type="text/css">
</style>
</head>
<body>
<div class="page-header">
<div class="header-banner">
<img src="images/header.png" alt="CoolMeeting" />
</div>
<div class="header-title">欢迎访问天才英俊会议管理系统</div>
</div>
<div class="page-content">
<div class="content-nav">人员管理 > 员工注册</div>
<form>
<fieldset>
<legend>员工信息</legend>
<table class="formtable" style="width:50%">
<tr>
<td>姓名：</td>
<td><input type="text" id="employeename" maxlength="20" /></td>
</tr>
<tr>
<td>账户名：</td>
<td><input type="text" id="accountname" maxlength="20" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" maxlength="20"
placeholder="请输入6位以上的密码" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="confirm" maxlength="20" /></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text" id="phone" maxlength="20" /></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" id="email" maxlength="20" /></td>
</tr>
<td>所在部门：</td>
<td><select name="deptid">
<option value="1">技术部</option>
<option value="2">财务部</option>
<option value="3">人事部</option>
</select></td>
</tr>
<tr>
<td colspan="6" class="command"><input type="button"
class="clickbutton" value="注册" /> <input type="reset"
class="clickbutton" value="重置" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<div class="page-footer">
<hr />
更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a> <img
src="images/footer.png" alt="CoolMeeting" />
</div>
</body>
</html>修改login.jsp
修改完后,在login.jsp点击[注册]
3.实现DAO层
实现注册有关的功能 ,实体Employee类已经有了
现在准备数据访问层
在DAO那里新增两个方法
selectByUserName():通过用户名查询(用户名不能重复)
insert():向员工表插入一条记录
main()方法里进行测试
DAO新增的代码
/**
* 方法二:
* 通过用户名查询，返回Employee对象，把查到的所有属性返回，以便后续使用。
* 如果返回值为null，表示用户名不存在
* 查询用户名是否存在
* @param username
* @return
*/
public Employee selectByUsername(String username){
conn=ConnectionFactory.getConnection();
Employee employee=null;
try {
PreparedStatement st=null;
String sql="select * from employee where username='"+username+"'";
st = conn.prepareStatement(sql);
ResultSet rs =st.executeQuery(sql);
if(rs.next()==true){
employee=new Employee();
employee.setEmployeeid(rs.getInt("employeeid"));
employee.setEmployeename(rs.getString("employeename"));
employee.setUsername(rs.getString("username"));
employee.setPhone(rs.getString("phone"));
employee.setEmail(rs.getString("email"));
employee.setStatus(rs.getString("status"));
employee.setDepartmentid(rs.getInt("status"));
employee.setPassword(rs.getString("password"));
employee.setRole(rs.getString("role"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
ConnectionFactory.closeConnection();
}
return employee;
}
/**
* 方法三:
* 向表employee中插入记录，其中status和role使用默认值
* @param employee
*/
public void insert(Employee employee){
conn=ConnectionFactory.getConnection();
String sql="insert into employee"
+
"(employeename,username,password,phone,email,departmentid,status,role)" +
" values(?,?,?,?,?,?,?,?)";
try {
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1,employee.getEmployeename());
pstmt.setString(2,employee.getUsername());
pstmt.setString(3,employee.getPassword() );
pstmt.setString(4,employee.getPhone() );
pstmt.setString(5,employee.getEmail());
pstmt.setInt(6,employee.getDepartmentid());
//注册成功后，默认为正在审核，status为0
pstmt.setString(7,"0");
//注册时，默认为员工角色，role值为2
pstmt.setString(8,"2");
pstmt.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
ConnectionFactory.closeConnection();
}
}
4.实现service方法
在原service类上添加注册方法register()
用户名不存在则插入记录,注册成功
service新增代码
/**
* 注册功能，如果账号名存在，注册失败，返回0，否则注册成功，返回1
* @param employee
* @return
*/
public int regist(Employee employee){
int flag=0;
Employee e=dao.selectByUsername(employee.getUsername());
if(e==null){
flag=1;
dao.insert(employee);
}
return flag;
}mian测试成功
5.在控制层把视图和业务逻辑连接起来
view->service 用controller
新建一个控制类,RegistServlet
1.设置请求的编码格式:因为姓名一般是中文的
2.调用Servlce的Registe()方法,根据返回值的不同来判断注册成功或失败
3.跳转时,要有提示信息返回
注册成功->登陆页面
注册失败->原页面且提示失败原因
开始修改代码,
1.修改registe.jsp
2.添加脚本,显示提示信息
3.新增一个servlet类
RegisteServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置请求的编码格式保证中文编码正确
request.setCharacterEncoding("utf-8");
// 或许注册页面填写的请求参数
String employeename=request.getParameter("employeename");
String username=request.getParameter("username");
String password=request.getParameter("password");
int deptid=Integer.parseInt(request.getParameter("deptid"));
String phone=request.getParameter("phone");
String email=request.getParameter("email");
Employee employee=new Employee(employeename,username,password,deptid,email,phone,"0","2");
EmployeeService service=new EmployeeService();
int flag=service.regist(employee);
if(flag==1){
request.setAttribute("msg", "注册成功，正在审核。");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
request.setAttribute("msg", "用户名已存在，请重新注册。");
request.getRequestDispatcher("register.jsp").forward(request, response);
}
}
修改web.xml
运行regist页面
尚存问题:
1.部门还不能自动存入
2.注册失败的时候,重新注册的时候,之前输入的内容都消失了
6.实现动态部门,让部门是数据库中真实的信息
1.创建一个实体类Department ,封装部门信息
2.数据类 DepartmentDAO 实现查询所有部门信息并且返回到集合
3.创建Servlet来返回部门信息 到jsp
点注册的时候就需要查询数据库了,
1.新增Department类,
2.新增DepartmentDAO类
package com.meeting.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.meeting.util.ConnectionFactory;
import com.meeting.vo.Department;
public class DepartmentDAO {
// DAO类关联连接工厂类
private Connection conn;
// 查询所有部门信息，返回到集合中
public List<Department> selectAll(){
conn=ConnectionFactory.getConnection();
List<Department> departmentsList=new ArrayList<Department>();
try {
Statement st=null;
String sql="select * from department";
st = conn.createStatement();
ResultSet rs =st.executeQuery(sql);
Department department;
while(rs.next()){
department=new Department();
department.setDepartmentid(rs.getString("departmentid"));
department.setDepartmentname(rs.getString("departmentname"));
departmentsList.add(department);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
ConnectionFactory.closeConnection();
}
return departmentsList;
}
/**
* @param args
*/
public static void main(String[] args) {
DepartmentDAO dao=new DepartmentDAO();
List<Department> list=dao.selectAll();
for(Department d:list){
System.out.println(d);
}
}
}
3.新建ViewAllDepartmentsServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
DepartmentDAO dao=new DepartmentDAO();
//查询所有部门信息
List<Department> departmentsList=dao.selectAll();
// 把部门请求保存到请求属性
request.setAttribute("departmentsList", departmentsList);
String code=request.getParameter("code");
if(code!=null&&code.equals("regist")){
request.getRequestDispatcher("register.jsp").forward(request, response);
}
4.修改login.jsp
5.registe.jsp
<%@ page language="java" import="java.util.*,com.meeting.vo.*" pageEncoding="utf-8"%>
<html>
<head>
<title>CoolMeeting会议管理系统</title>
<link rel="stylesheet" href="styles/common.css" />
<style type="text/css">
</style>
</head>
<body>
<div class="page-header">
<div class="header-banner">
<img src="images/header.png" alt="CoolMeeting" />
</div>
<div class="header-title">欢迎访问Cool-Meeting会议管理系统</div>
</div>
<div class="page-content">
<div class="content-nav">人员管理 > 员工注册</div>
<form action="RegistServlet" method="post">
<fieldset>
<legend>员工信息</legend>
<%String msg=(String)request.getAttribute("msg"); %>
<%if(msg!=null){ %>
<tr>
<td>提示信息:</td>
<td>
<font color='red'> <%=msg %></font>
</td>
</tr>
<%} %>
<table class="formtable" style="width:50%">
<tr>
<td>姓名：</td>
<td><input type="text" id="employeename" name="employeename" maxlength="20" /></td>
</tr>
<tr>
<td>账户名：</td>
<td><input type="text" id="username" name="username" maxlength="20" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" name="password" maxlength="20"
placeholder="请输入6位以上的密码" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="confirm" name="password" maxlength="20" /></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text" id="phone" name="phone" maxlength="20" /></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" id="email" name="email" maxlength="20" /></td>
</tr>
<td>所在部门：</td>
<td><select name="deptid">
<%List<Department> departmentsList=(List<Department>)(request.getAttribute("departmentsList"));
for(Department department:departmentsList){
%>
<option value="<%=department.getDepartmentid()%>"><%=department.getDepartmentname() %></option>
<%} %>
</select></td>
</tr>
<tr>
<td colspan="6" class="command">
<input type="submit" class="clickbutton" value="注册" />
<input type="reset" class="clickbutton" value="重置" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<div class="page-footer">
<hr />
更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a> <img
src="images/footer.png" alt="CoolMeeting" />
</div>
</body>
</html>
7.注册失败之后仍然显示已经填入的信息
1.在注册页面添加脚本
2.修改Servlet中登陆失败的分支,在那里把部门信息再查一遍,不然注册失败后,跳回注册页面,并不会再次遍历数据库中的
部门列表
registe.jsp代码
<%@ page language="java" import="java.util.*,com.chinasofti.meeting.vo.*" pageEncoding="utf-8"%>
<html>
<head>
<title>CoolMeeting会议管理系统</title>
<link rel="stylesheet" href="styles/common.css" />
<style type="text/css">
</style>
</head>
<body>
<div class="page-header">
<div class="header-banner">
<img src="images/header.png" alt="CoolMeeting" />
</div>
<div class="header-title">欢迎访问Cool-Meeting会议管理系统</div>
</div>
<div class="page-content">
<div class="content-nav">人员管理 > 员工注册</div>
<form action="RegistServlet" method="post">
<fieldset>
<legend>员工信息</legend>
<%String msg=(String)request.getAttribute("msg"); %>
<%if(msg!=null){ %>
<tr>
<td>提示信息:</td>
<td>
<font color='red'> <%=msg %></font>
</td>
</tr>
<%} %>
<table class="formtable" style="width:50%">
<tr>
<td>姓名：</td>
<%String employeename=request.getParameter("employeename") ;
if(employeename==null){
employeename="";
}
%>
<td><input type="text" id="employeename" name="employeename" maxlength="20" value="<%=employeename%>"/></td>
</tr>
<tr>
<td>账户名：</td>
<%String username=request.getParameter("username") ;
if(username==null){
username="";
}
%>
<td><input type="text" id="username" name="username" maxlength="20" value="<%=username%>"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" name="password" maxlength="20"
placeholder="请输入6位以上的密码" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="confirm" name="password" maxlength="20" /></td>
</tr>
<tr>
<td>联系电话：</td>
<%String phone=request.getParameter("phone") ;
if(phone==null){
phone="";
}
%>
<td><input type="text" id="phone" name="phone" maxlength="20" value="<%=phone%>"/></td>
</tr>
<tr>
<td>电子邮件：</td>
<%String email=request.getParameter("email") ;
if(email==null){
email="";
}
%>
<td><input type="text" id="email" name="email" maxlength="20" value="<%=email%>"/></td>
</tr>
<td>所在部门：</td>
<td><select name="deptid">
<%String departmentid=request.getParameter("deptid") ;
if(departmentid==null){
departmentid="";
}
%>
<%List<Department> departmentsList=(List<Department>)(request.getAttribute("departmentsList"));
for(Department department:departmentsList){
%>
<option value="<%=department.getDepartmentid()%>"
<% if(department.getDepartmentid().equals(departmentid)){out.print("selected");}%>>
<%=department.getDepartmentname() %>
</option>
<%} %>
</select></td>
</tr>
<tr>
<td colspan="6" class="command">
<input type="submit" class="clickbutton" value="注册" />
<input type="reset" class="clickbutton" value="重置" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<div class="page-footer">
<hr />
更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a> <img
src="images/footer.png" alt="CoolMeeting" />
</div>
</body>
</html>
修改RegisteServlet
测试:(已经填过的信息被保留)
8.密码一致校验
用js来校验,在输入的时候就校验
测试:
校验联系电话,电子邮件还没有弄,可以用JQuery
9.异步校验用户名是否存在(使用AJAX)
输入用户名的时候直接告诉用户名是否存在 这样用户体验更好
使用AJAX
1.编写Servlet来进行异步校验
ValidateUsernameServlet.java
package com.meeting.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.meeting.dao.EmployeeDAO;
import com.meeting.vo.Employee;
public class ValidateUsernameServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
boolean flag=true;
String message="";
EmployeeDAO dao=new EmployeeDAO();
Employee e=dao.selectByUsername(request.getParameter("username"));
if(e==null){
message="用户名可以使用";
}else{
flag=false;
message="用户名已经存在，请选择使用其他用户名";
}
response.setContentType("text/xml;charset=gb2312");
PrintWriter out = response.getWriter();
response.setHeader("Cache-Control","no-cache");
out.println("<?xml version='1.0' encoding='"+"gb2312"+"' ?>");
out.println("<response>");
out.println("<passed>" + Boolean.toString(flag) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
}
2.修改registe.jsp
输入完用户名之后,加一个事件
添加ajax脚本
新建ValidateUsernameServlet
代码后续放上来吧,太多了,很累
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
