一.案例需求
学生可以在网页上互相在线交流学习心得。由两个界面组成,首先显示登录界面。输入的账号或者密码错误,显示错误,单击返回登录页面链接,返回登录界面。登录成功,显示聊天界面。输入聊天信息,点击发送,可以将信息显示在所有已经登录用户的页面上。界面下方显示的是聊天信息和当前在线的用户。页面上还有一个退出登录的链接。单击它则退出登录。
二.系统分析
2.1页面结构
将页面显示和动作处理分开
页面 | 作用 |
---|---|
loginForm.jsp 和loginAction.jsp | loginForm.jsp显示登录界面,提交到loginAction.jsp;loginAction验证登录是否成功;成功则跳转到chatForm.jsp |
chatForm.jsp和chatAction.jsp | chatForm.jsp显示聊天界面,提交到chatAction.jsp;chatForm.jsp获取消息内容;处理信息后跳转到chatForm.jsp |
msgs.jsp | 显示所有用户的聊天信息,显示在线名单,该页面每个一段时间自动刷新,以iframe形式嵌入chatForm.jsp |
logoutAction.jsp | 负责处理退出登录的操作 |
2.2状态保存
问题: 如何能够保证消息和在线人员名单能够显示在所有用户的界面上呢?
答: 可以将消息和在线人员的名单保存在application对象内。每次有用户上线,就想application内的在线名单内添加该用户的上线消息。用户下线,就从application内移除该用户的上线消息。用户提交信息,就向application内的消息集合添加该用户提交的消息。用户登录成功后,应该将用户信息保存在session内。msgs.jsp需要定时刷新,获取application对象中的内容,更新页面。
三.开发过程
3.1准备数据
用MySQL数据库创建的school数据库,里面创建一个名为t_customer的表。如下:
随便插入一些数据,如下:
3.2编写DAO和VO
在DAO中验证用户的合法身份,用户信息用VO封装。代码如下:
CustomerDao.java
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import vo.Customer;
public class CustomerDao {
private Connection conn = null;
public void initConnection() throws Exception{
Class.forName("com.mysql.cj.jdbc.Driver");//加载驱动
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school?useSSL=false&serverTimezone=GMT", "root", "123456");
}
//根据账号查询Customer对象
public Customer getCustomerByAccount(String account) throws Exception{
Customer cus = null;
initConnection();
String sql = "select * from t_customer where account = ?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1, account);
ResultSet rs = ps.executeQuery();
if(rs.next()){
cus = new Customer();
cus.setAccount(rs.getString("account"));
cus.setPassword(rs.getString("Password"));
cus.setCname(rs.getString("cname"));
}
ps.close();
conn.close();
return cus;
}
}
Customer.java
package vo;
public class Customer {
private String account;
private String password;
private String cname;
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
}
3.3编写loginForm.jsp和loginAction.jsp
loginForm.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>loginForm</title>
</head>
<body>
<%
//初始化application
ArrayList customers = (ArrayList)application.getAttribute("customers");
if(customers == null){
customers = new ArrayList();
application.setAttribute("customers", customers);
}
ArrayList msgs = (ArrayList)application.getAttribute("msgs");
if(msgs == null){
msgs = new ArrayList();
application.setAttribute("msgs", msgs);
}
%>
欢迎登录在线交流系统
<form action = "loginAction.jsp" name = "form1" method = "post">
输入账号:<input type = "text" name = "account"><br>
输入密码:<input type = "password" name = "password" >
<input type = "submit" value = "登录">
</form>
</body>
</html>
loginAction.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ page import = "dao.CustomerDao" %>
<%@ page import = "vo.Customer" %>
<html>
<head>
<title>loginAction</title>
</head>
<body>
<%
request.setCharacterEncoding("gb2312");
String account = request.getParameter("account");
String password = request.getParameter("password");
CustomerDao cdao = new CustomerDao();
Customer customer = cdao.getCustomerByAccount(account);
if(customer == null || customer.getPassword().equals(password)){
%>
登录失败,<a href = "loginForm.jsp">返回登录页面</a>
<%
}
else{
session.setAttribute("customer", customer);
ArrayList customers = (ArrayList)application.getAttribute("customers");
ArrayList msgs = (ArrayList)application.getAttribute("msgs");
customers.add(customer);
msgs.add(customer.getCname() + "上线啦!");
response.sendRedirect("chatForm.jsp");
}
%>
</body>
</html>
3.4编写chatForm.jsp和chatAction.jsp
chatForm.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ page import = "vo.Customer" %>
<html>
<head>
<title>chatForm</title>
</head>
<body>
<%
Customer customer = (Customer)session.getAttribute("customer");
%>
欢迎<%= customer.getCname() %>聊天<br>
<form action = "chatAction.jsp" name = "form1" method = "post">
输入聊天信息:<input type = "text" name = "msg" size = "40">
<input type = "submit" value = "发送">
</form>
<a href = "loginAction.jsp">退出登录</a>
<hr>
<iframe src = "msgs.jsp" width = "100%" height = "80%" frameborder = "0"></iframe>
</body>
</html>
解释:
<iframe src = "msgs.jsp" width = "100%" height = "80%" frameborder = "0"></iframe>
表示使用iframe嵌入了msgs.jsp
chatAction.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ page import = "vo.Customer" %>
<html>
<head>
<title>chatAction</title>
</head>
<body>
<%
Customer customer = (Customer)session.getAttribute("customer");
%>
<%
request.setCharacterEncoding("gb2312");
String msg = request.getParameter("msg");
ArrayList msgs = (ArrayList)application.getAttribute("msgs");
if(msgs != null && !msg.equals("")){
msgs.add(customer.getCname() + "说:" + msg);
reponse.sendRedirect("chatForm.jsp");
%>
</body>
</html>
3.5编写msgs.jsp
msgs.jsp是定时显示聊天信息和在线名单。代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ page import = "vo.Customer" %>
<html>
<head>
<title>msgs</title>
</head>
<body>
<%
response.setHeader("Refresh", "10");//刷新
%>
<table width = "80%" border = "0" align = "center">
<tr align = "center" bgcolor = "yellow">
<td width = "75%">消息</td>
<td width = "75%">当前在线</td>
</tr>
<tr bgcolor = "pink">
<td>
<%
ArrayList msgs = (ArrayList)application.getAttribute("msgs");
for(int i = msgs.size()-1; i >= 0; i--){
out.println(msgs.get(i) + "<br>");
}
%>
</td>
</tr>
</table>
</body>
</html>
3.6编写loginoutAction.jsp
<html>
<head>
<title>logoutAction</title>
</head>
<body>
<%
Customer customer = (Customer)session.getAttribute("customer");
ArrayList customers = (ArrayList)application.getAttribute("customers");
customers.remove(customer);
ArrayList msgs = (ArrayList)application.getAttribute("msgs");
msgs.add(customer.getCname() + "下线啦!");
session.invalidate();
response.sendRedirect("loginForm.jsp");
%>
</body>
</html>
登录地址,进入loginForm即可。
摘自《Java Web 开发与应用》,主编郭克华,副主编宋虹,清华大学出版社
欢迎评论啊~~