本篇内容:
(1)上一篇是使用同步的请求实现登陆,并由 Servlet 决定登录后下一步作哪些事情,本篇使用 jQuery Ajax 的方式,实现异步登陆,登陆成功后执行的内容在 js 中定义。
(2)在登陆以前,在 js 中验证表单中的,用户名是否为空,密码是否为空,密码是不是 6-12 位,登陆失败后,返回提示信息。
(3)登陆成功后,返回用户表的全部信息,以表格形式展现:
(4)效果截图:javascript
本篇部份内容看起来和上一篇类似,但又不少改动,请认真查看。css
(建议名称一致,建库同上一篇,再介绍一次)html
(1)安装 MySQL 请百度或参考:MySQL 安装 + 入门大全 + 经常使用命令合集前端
(2)打开 cmd ,登陆 mysql 的 root 用户,建立 studb 数据库,建立表 tb_user :java
(3)显示表结构,插入 3 条用户数据:node
(4)数据库 studb,表 tb_user 建立好了。mysql
(1)建立项目和修改目录结构,由于经常使用,因此写在了单独的一篇文章,请查看:Spring 笔记 -05- 建立 Maven Web 项目 + Tomcat 及目录结构配置。jquery
(2)序号(1)中说的,一篇文章,所有须要!ajax
(3)配置 Maven 的配置文件 pom.xml 文件,位置在下面有提示:sql
本篇多加一个 fastjson,请注意!!
请更新为下面的 pom 最新配置:
<dependencies> <!-- 本篇多加一个 fastjson,请注意 --> <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.54</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/javax.servlet.jsp-api --> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.3</version> <scope>provided</scope> </dependency> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.13</version> </dependency> </dependencies>
(4)点击自动导入:
(5)建立以下目录及文件:
(6)下面须要先作一件事,就是在 js 目录中,引入 Bootstrap3 和 jQuery
注意:只能是 Bootstrap3 版本:
配置步骤:
npm install bootstrap3
npm install jQuery
贴代码前,先看一下整个完整的项目目录结构:
前台文件:
后台文件目录结构:
全部文件代码:
(1)findUserInfoForAjax.html 文件,用于登陆成功时跳转,该文件在浏览器打开时,js 会执行一个 findAllUser 方法,先请求 Servlet,而后 Servlet 去查询数据库信息,创 User 实体类,再转换成 json 数据格式,前端处理 json 数据,再显示在页面中:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>findUserInfoForAjax</title> <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css"> <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script> <script> function findAllUser() { $.ajax({ url:"userServletForAjax", method:"get", //dataType:"jsonp", //async:true, success:function (result) { var obj = JSON.parse(result); var str = ""; $.each(obj,function (index,row,ee) { str+="<tr><td>"+row.id+"</td><td>"+row.uname+"</td><td>" +row.upwd+"</td><td>"+row.lastLoginTime+"</td><td>"+row.role+"</td></tr>" }); $("#alluser").html(str); }, error:function () { alert("服务器请求失败") } }) } findAllUser(); </script> </head> <body> <table class="table table-striped table-hover"> <tr> <td>id</td> <td>uname</td> <td>upwd</td> <td>lastLoginTime</td> <td>role</td> </tr> <tbody id="alluser"> </tbody> </table> </body> </html>
(2)login_ajax.html 文件,是登陆的前端界面,在请求 Servlet 以前,会先检查数据的格式,有用户名是否为空,密码是否为空,密码是否为 6-12 位。
当格式正确再去请求,验证数据库中的用户信息是否匹配,成功则跳转到上面的 findUserInfoForAjax.html 文件,不成功提示用户名或密码错误!:
源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登陆</title> <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css"> <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript"> function login() { var uname = $("#uname").val(); var upwd = $("#upwd").val(); if (uname == null || uname == "") { $("#unameMsg").html("用户名不能为空!"); return; } else $("#unameMsg").html(""); if (upwd.length == 0) { $("#upwdMsg").html("密码不能为空!"); return; } else $("#upwdMsg").html(""); if (upwd.length < 6 || upwd.length > 12) { $("#upwdMsg").html("密码应该在 6-12 位之间!"); return; } else $("#upwdMsg").html(""); $.ajax({ url: "Servlet", method: "get", data: { "uname": $("#uname").val(), "upwd": $("#upwd").val(), "role": $("#role").val() }, success: function (result) { if (result == "1") { window.location.href = "findUserInfoForAjax.html"; } else { $("#loginMsg").html("登陆失败,请重试!"); } }, error: function () { alert("请求服务器失败!"); } }); } </script> </head> <body> <br><br> <br><br> <form name="loginForm" id="loginForm"> <div class="center-block" style="width: 45%;height: 350px"> <div class="panel panel-primary"> <div class="panel-heading"> <span class="glyphicon glyphicon-apple"></span>用户登陆 </div> <div class="panel-body"> <div class="text-success" align="center"> <h3>欢迎使用资源统一管理系统</h3> </div> <div class="input-group"> <label class="input-group-addon">用户名</label> <input class="form-control" type="text" id="uname" name="uname" placeholder="请输入用户名"> <label class="input-group-addon text-warning">*</label> </div> <label id="unameMsg" style="color: red"></label><br> <div class="input-group"> <label class="input-group-addon">密 码</label> <input class="form-control" type="password" id="upwd" name="upwd" placeholder="请输入密码"> <label class="input-group-addon text-warning">*</label> </div> <label id="upwdMsg" style="color: red"></label><br> <div class="input-group"> <label class="input-group-addon">权 限</label> <select name="role" class="form-control "> <option value="admin">管理员</option> <option value="teacher">经理</option> <option value="student">用户</option> </select> </div> </div> <div align="center"> <label id="loginMsg" style="color: red"></label> <a href="javascript:login()" class="btn btn-danger"><span class="glyphicon glyphicon-log-in"></span> 登陆</a> <a href="javascript:loginForm.reset()" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span> 重置</a> </div> <br> <div class="panel-footer"> <div align="center"> ©2018-2019 肖朋伟的 CSDN 博客 Copy Right </div> </div> </div> </div> </form> </body> </html>
若是成功引入 Bootstrap3 ,打开服务器,打开本页面,会有下面界面:
(3)User.java 文件(有更新):
package com.pojo; //用来存放用户登陆时,输入输出的信息 public class User { private int id; public int getId() { return id; } public void setId(int id) { this.id = id; } private String uname; private String upwd; private String lastLoginTime; public String getLastLoginTime() { return lastLoginTime; } public void setLastLoginTime(String lastLoginTime) { this.lastLoginTime = lastLoginTime; } private String role; public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getUpwd() { return upwd; } public void setUpwd(String upwd) { this.upwd = upwd; } public String getRole() { return role; } public void setRole(String role) { this.role = role; } }
(4)UserDAO.java 文件(有更新):
package com.dao; import com.dbutil.DBUtils; import com.pojo.User; import java.util.List; public class UserDAO { public List<User> findAllUser(){ DBUtils dbUtils = new DBUtils(); return dbUtils.findAllUser(); } //返回 0 或 1 public int login(User user){ DBUtils dbUtils = new DBUtils(); //与数据库是否匹配,匹配为 1 int temp = dbUtils.login(user); return temp; } }
(5)DBUtils.java 文件:
!!! 成败在与这个文件
package com.dbutil; import com.pojo.User; import java.sql.*; import java.util.ArrayList; import java.util.List; public class DBUtils { Connection conn; //预处理 PreparedStatement pstmt; //结果集 ResultSet rs; public DBUtils(){ try{ Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/studb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC","root","xiaopengwei"); } catch (Exception e){ e.printStackTrace(); } } public int login(User user){ try{ pstmt=conn.prepareStatement("select * from tb_user where uname = ? and upwd = md5(?)"); pstmt.setString(1, user.getUname()); pstmt.setString(2, user.getUpwd()); rs = pstmt.executeQuery(); if (rs.next()) return 1; else return 0; }catch (Exception e){ e.printStackTrace(); } return 0; } //查询数据库中 tb_user 表的全部信息 public List<User> findAllUser() { try { String sql = "select * from tb_user"; //预处理 pstmt = conn.prepareStatement(sql); //执行查询 rs = pstmt.executeQuery(); //实例化 List<User> list = new ArrayList<User>(); while (rs.next()) { User user = new User(); user.setId(rs.getInt(1)); user.setUname(rs.getString(2)); user.setUpwd(rs.getString(3)); user.setLastLoginTime(rs.getString(4)); user.setRole(rs.getString(5)); list.add(user); } return list; } catch (Exception e) { System.out.println(e.getMessage()); } return null; } }
(6)Servlet.java 文件:
package com.loginServlet; import com.pojo.User; import com.service.UserService; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.sql.PreparedStatement; @WebServlet(name = "Servlet",urlPatterns = "/Servlet") public class Servlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doPost"); request.setCharacterEncoding("utf-8"); //获取 post 请求中的两个参数 String uname = request.getParameter("uname"); String upwd = request.getParameter("upwd"); String role = request.getParameter("role"); /*硬编码, 不从数据库获取信息,直接验证 if (uname.equals("admin") && upwd.equals("123456")) { response.sendRedirect("index.jsp"); }else{ response.sendRedirect("loginServlet.html"); }*/ //从服务获取值 UserService userService = new UserService(); User user = new User(); user.setUname(uname); user.setUpwd(upwd); user.setRole(role); if (userService.login(user)) { //向服务器要数据 //登陆成功跳转 index.jsp response.sendRedirect("index.jsp"); }else{ response.sendRedirect("failed.jsp"); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uname = request.getParameter("uname"); String upwd = request.getParameter("upwd"); String role = request.getParameter("role"); System.out.println("doGet"); System.out.println(uname+":"+upwd+"-"+role); UserService userService = new UserService(); User user = new User(); user.setUname(uname); user.setUpwd(upwd); user.setRole(role); boolean login = userService.login(user); PrintWriter out = response.getWriter(); if (login) out.print("1"); else out.print("0"); out.close(); } }
(7)UserServletForAjax.java 文件:
package com.dbutil; import com.pojo.User; import java.sql.*; import java.util.ArrayList; import java.util.List; public class DBUtils { Connection conn; //预处理 PreparedStatement pstmt; //结果集 ResultSet rs; public DBUtils(){ try{ Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/studb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC","root","xiaopengwei"); } catch (Exception e){ e.printStackTrace(); } } public int login(User user){ try{ pstmt=conn.prepareStatement("select * from tb_user where uname = ? and upwd = md5(?)"); pstmt.setString(1, user.getUname()); pstmt.setString(2, user.getUpwd()); rs = pstmt.executeQuery(); if (rs.next()) return 1; else return 0; }catch (Exception e){ e.printStackTrace(); } return 0; } //查询数据库中 tb_user 表的全部信息 public List<User> findAllUser() { try { String sql = "select * from tb_user"; //预处理 pstmt = conn.prepareStatement(sql); //执行查询 rs = pstmt.executeQuery(); //实例化 List<User> list = new ArrayList<User>(); while (rs.next()) { User user = new User(); user.setId(rs.getInt(1)); user.setUname(rs.getString(2)); user.setUpwd(rs.getString(3)); user.setLastLoginTime(rs.getString(4)); user.setRole(rs.getString(5)); list.add(user); } return list; } catch (Exception e) { System.out.println(e.getMessage()); } return null; } }
(8)UserService.java 文件:
package com.service; //服务层,给控制层提供服务 import com.dao.UserDAO; import com.pojo.User; import java.util.List; public class UserService { UserDAO dao = new UserDAO(); //存用户数据 public List<User> findAllUser(){ return dao.findAllUser(); } //参数,处理 User 对象,返回 True 或 False public boolean login(User user){ int temp = dao.login(user); if (temp == 0) return false; else return true; } // DBUtils dbUtils = new DBUtils(); }
(1)MySQL 8.0 版本的 jdbc 个数据版本不匹配
(2)数据库服务没有运行
(3)配置文件数据库信息没有自行更改
(4)文件名自定义时,依赖失败