技术支持: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。
登录功能大致就实现了
注册功能我就先放到下一篇博客了