网站的登录功能,通常要进行两次请求响应,如下图所示。
蓝色对应第一次请求、响应,表示的是请求服务器得到登录页面。
红色对应第二次请求、响应,表示的是在登录页面上输入了账号、密码,点击登录按钮,将用户名、密码发送到后端Java程序,JAVA程序通过JDBC访问数据库进行查询。
下面进行具体开发:
1.在数据库中开发user表,并添加上测试数据,如下图所示:
2.Java项目中规划好User、UserController、UserDao类,和login.jsp:
3.实体类非常简单,属性和数据表user一一对应即可。
package entity; public class User { private int id; private String username; private String password; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
4.控制器类,需要设计一个type属性,通过取值showLogin、doLogin决定是展示登录页面和是进行登录处理。
@WebServlet("/user") public class UserController extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String type = request.getParameter("type"); if (type.equals("showLogin")) { showLogin(request, response); } else if (type.equals("doLogin")) { doLogin(request, response); } } //略 }
private void showLogin(HttpServletRequest request, HttpServletResponse response) { try { request.getRequestDispatcher("WEB-INF/login.jsp").forward(request, response); } catch (ServletException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }
5.login.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="java.util.*,entity.*"%> <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <style> #main { width: 600px; margin: 120px auto; } #mes { color: red; text-align: center; margin-bottom: 20px; } </style> </head> <body> <div id="main"> <div id="mes"> <% String mes = (String) request.getAttribute("mes"); if (mes == null) { mes = ""; } out.print(mes); %> </div> <form class="form-horizontal" action="user"> <input type="hidden" name="type" value="doLogin" /> <div class="form-group"> <label class="col-sm-2 control-label">账号</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="请输入账号" name="username"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="请输入密码" name="password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">登录</button> </div> </div> </form> </div> </body> </html>
6.测试:
访问user?type=showLogin,可返回如下界面:
1.UserController中添加doLogin方法:
private void doLogin(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String username = request.getParameter("username"); String password = request.getParameter("password"); User user = new User(); user.setUsername(username); user.setPassword(password); UserDao userDao = new UserDao(); User u = userDao.search(user); if (u != null) { response.sendRedirect("stu"); } else { request.setAttribute("mes", "用户名或密码不正确"); request.getRequestDispatcher("WEB-INF/login.jsp").forward(request, response); } }
2.UserDao中添加search方法:
public User search(User user) { User u = null; // 1.导入jar包到lib文件夹下 try { // 2.加载驱动 Class.forName("com.mysql.jdbc.Driver"); // 3.建立连接 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school_qgc_1", "root", "123456"); // 4.建立SQL执行器 Statement stat = conn.createStatement(); // 5.执行sql语句,得到结果集 ResultSet rs = stat.executeQuery("select * from user where username='" + user.getUsername() + "' and password='" + user.getPassword() + "'"); // 6.处理结果集 while (rs.next()) { u = new User(); u.setId(rs.getInt("id")); u.setUsername("username"); } // 7.关闭连接 conn.close(); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return u; }
3.登录失败目前效果是转发回登录页面,并在页面上使用红字做提示:
4.可以使用jQuery做优化,实现当在账号文本框中键入文字时候,触发提示信息消失,增强用户体验度:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("[name='username']").keyup(function(){ $("#mes").text(""); }) }) </script>
目前仅仅是完成了登录功能,尚未对其进行权限验证,即系统仍可以通过直接访问stu,实现对系统资源的访问,我们将在下一篇文章中,实现对权限的控制。