技术支持:JAVA、JSP
服务器:TOMCAT 7.0.86
编程软件:IntelliJ IDEA 2021.1.3 x64
登陆页面如下
在这个页面中我们实现了一个登录页面和一个注册页面的Jsp文件,和两个java 的服务层文件
分别是web包下的denglu.jsp和zhuce.jsp以及实现网页的服务层代码LoginServlet和zhuceServlet
除此之外我们还会应用到我们的dao层,即dao包,是我们用来实现一些方法的地方,我们把一些会用到的方法都丢到了dao层
同时还会用到我们的实体类,实体类中有Student,因为我们是面对学生,所以学生登录,注册的一些账号,密码信息都会放到Student中供我们来调用
以及我们的Util包,是用来比如在注册时我们要来连接我们的数据库文件,于是util包就会把我们要连接的参数信息都丢到这个包中,也是以供调用。
denglu.jsp
我们在web目录下右键新建一个jsp的文件,取名denglu.jsp(或者其他你也可以)
<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8" %>
<%@page import="java.util.*,java.text.*,entiy.*" %>
<!DOCTYPE html>
<html>
<head>
<title>交易网登录</title>
<script>
// 检查是否有错误信息参数,如果有则显示弹框提示
<% if ("1".equals(request.getParameter("error"))) { %>
window.onload = function() {
alert("您的账号或密码输入错误,请重试。");
}
<% } %>
</script>
<style>
h1{
font-size: 40px;
color: blanchedalmond;
text-align: center;
font-family: 'Courier New', Courier, monospace;
font-style: italic;
}
</style>
</head>
<body>
<h1 name="top">交易网</h1>
<table align="center" cellspacing="0">
<tr>
<td>
<table cellpadding="0">
<tr>
<!-- 使用相对路径引用图片 -->
<td><img src="img/3.jpg"></td>
</tr>
<tr>
<td>
<ul>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页,实现发送、阅读邮件立即同步普通登录手机号登录</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0">
<form action="Login" method="post">
<tr>
<td>
<table cellpadding="30">
<tr>
<td colspan="2" align="center"><strong>登录</strong></td>
</tr>
<tr>
<td>昵称:
<input type="text" id="name" name="name">
</td>
</tr>
<tr>
<td>账号:
<input type="text" id="idname" name="idname">
</td>
</tr>
<tr>
<td>密码:
<input type="password" id="pd" name="pd">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="登录" onclick="f1();" />
<!-- 注册按钮改用正确的 <a> 标签 -->
<a href="zhuce.jsp"><input type="button" value="注册" onclick="f2();"></a>
</td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</td>
</tr>
<tr>
<td align="right">关于交易网</td>
</tr>
</table>
</body>
</html>
这段代码的基本思路我于是从7个角度来阐述
-
页面结构和设计:
- 使用了HTML和CSS进行页面的基本结构和样式设计。
- 使用了JavaScript来增强用户交互和错误提示功能。
-
页面基本信息设置:
<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8" %>
:设置页面的编码和内容类型。<%@page import="java.util.*,java.text.*,entity.*" %>
:导入Java类库,以便后续Java代码中可以使用相关类。
-
页面内容:
<title>
标签设置页面标题为“交易网登录”。<script>
标签内部的JavaScript代码用于在页面加载时检查是否有错误信息参数,并在需要时显示警告框提示用户。
-
页面样式:
<style>
标签内部定义了标题<h1>
的样式,包括字体大小、颜色、对齐方式等。
-
页面布局:
- 使用了表格
<table>
进行页面内容的布局。 - 包括左侧包含图片和文本信息的列和右侧登录表单的列。
- 使用了表格
-
登录表单:
<form>
标签的action
属性指向 "Login",表示表单提交时将数据发送到名为 "Login" 的服务。- 包含昵称、账号、密码输入框和登录按钮。
- 注册按钮使用
<a>
标签包裹,指向 "zhuce.jsp" 页面,点击时可以跳转到注册页面。
-
服务连接:
- 表单的
action="Login"
属性指向一个名为 "Login" 的服务。当用户填写表单并点击登录按钮时,浏览器会将表单数据提交到这个服务。 - 在服务端(可能是一个Java Servlet或类似的服务),可以处理用户提交的数据,进行验证、身份认证等操作,并返回相应的结果给用户。
- 表单的
总结来说,实现了一个简单的登录页面,使用了HTML、CSS和JavaScript构建页面样式和基本交互。表单数据提交到服务端的 "Login" 服务,服务端负责处理用户登录逻辑。
LoginSerlvet
我们在src根目录下,先新建一个Servlet包,再在包下新建一个java文件,叫LoginServlet
package Servlet;
import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class LoginServlet extends HttpServlet {
// 数据库连接信息(这里假设你使用MySQL数据库)
private String jdbcURL = "jdbc:mysql://localhost:3306/sdjyy";
private String jdbcUsername = "root";
private String jdbcPassword = "asd123";
protected void doPost(
HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 获取登录页面提交的账号和密码
String username = request.getParameter("idname");
String password = request.getParameter("pd");
System.out.println(username);
System.out.println(password);
// 假设这里是你的登录逻辑,可以是数据库验证等
boolean isValidUser = false;
try {
isValidUser = checkUser(username, password);
} catch (Exception e) {
e.printStackTrace();
}
// 这里进行账号密码验证的逻辑,比如查询数据库
// 注意:这里应该使用 PreparedStatement 或其他安全方式来避免 SQL 注入攻击
// 示例中简单输出账号密码到控制台
System.out.println("Username: " + username);
System.out.println("Password: " + password);
if (isValidUser) {
// 登录成功,重定向到商品页面
HttpSession session = request.getSession();
session.setAttribute("username", username);
response.sendRedirect("list");
} else {
// 登录失败,可以返回到登录页面或者给出错误信息
response.sendRedirect("denglu.jsp?error=1"); // 假设带有错误参数
}
}
// 模拟用户验证,实际情况应根据你的业务逻辑实现
private boolean checkUser(String username, String password) throws Exception {
try {
// 加载数据库驱动程序
Class.forName("com.mysql.jdbc.Driver");
// 连接数据库
Connection connection = DriverManager.getConnection(jdbcURL, jdbcUsername, jdbcPassword);
// 查询语句
String sql = "SELECT * FROM users WHERE idname = ? AND pd = ?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1, username);
statement.setString(2, password);
System.out.println(username);
System.out.println(password);
// 执行查询
ResultSet result = statement.executeQuery();
// 如果查询到结果集,说明用户名和密码匹配
if (result.next()) {
return true;
}
// 关闭连接
connection.close();
} catch (SQLException | ClassNotFoundException e) {
e.printStackTrace();
}
// 如果没有查询到结果或者出现异常,则验证失败
return false;
}
}
1. 导入必要的类库和包
这点就不必多说了
2. LoginServlet 类继承 HttpServlet
- LoginServlet 类继承自 HttpServlet,表示它是一个Servlet,用于处理HTTP请求。
- 定义了数据库连接信息,包括URL、用户名和密码,方便我们来接,所以我们要先在我们写这些代码之前,新建一个数据库,这是我的一个连接方式,sdjyy是我的数据库名,users则是我的数据表名
3. 实现 doPost 方法处理 POST 请求
doPost
方法处理用户提交的登录表单数据。- 从请求中获取用户名和密码,并调用
checkUser
方法进行验证。 - 如果验证成功,将用户名存入 session,并重定向到名为 "list" 的页面。即list就是我登录成功之后的进入的主页面。
- 如果验证失败,重定向回登录页面 "denglu.jsp" 并附带错误参数。
4. checkUser 方法实现用户验证逻辑
checkUser
方法用于连接数据库并执行用户名和密码的验证。- 使用 PreparedStatement 来避免 SQL 注入攻击。
- 如果查询到结果集,即表示用户名和密码匹配,返回 true;否则返回 false。
然后我仔细看了一下,登录功能实现的一个是没有引入dao包,所以这里我就先不把dao包,entity包放出来
网页和服务层写下之后,还有最重要的WEB-INF包中的web.xml文件
web.xml
它是 Java Web 应用程序中一个重要的配置文件,用于配置Servlet、过滤器、监听器等组件及其映射关系。
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>Servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/Login</url-pattern>
</servlet-mapping>
<servlet>
元素用于定义 Servlet 的名称和实现类。<servlet-mapping>
元素用于指定 Servlet 的映射 URL。
登录功能大致就实现了
注册功能我就先放到下一篇博客了