我一直陷于这个错误中,并且我尝试从许多站点上阅读为什么会出现此错误,但是我不知道如何根据我的具体情况解决我的问题。当我转到网页时,在console.log上收到未捕获的TypeError。它不会显示我的员工列表。它说有一个:
Uncaught TypeError: empl is not iterable
at displayAllEmployees (ViewEmployees.js:38) and
at XMLHttpRequest.xhr.onreadystatechange
这是我的JS文件,它将从我的servlet请求我的雇员列表
let requestUrl = "http://localhost:8080/ERS/api/employee"; let token = sessionStorage.getItem("token"); if (!token) {
window.location.href = "http://localhost:8080/ERS/tokennull"} else {
let tokenArr = token.split(":");
if (tokenArr.length === 2) {
let baseUrl = "http://localhost:8080/ERS/api/employee?id=";
sendAjaxGet(baseUrl + tokenArr[0],displayAllEmployees);
} else {
window.location.href = "http://localhost:8080/ERS/error";
}
function sendAjaxGet(url,callback) {
let xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
callback(this);
}
} xhr.setRequestHeader("Authorization",token); xhr.send(); }
这是上面尝试解析响应的同一个JS文件中的函数。console.log中的“ empl”变量在此处。我使用for(let of)来遍历我的列表,但我不喜欢这样做。它应该为从我的数据库中检索到的每个员工添加一个新的表行。
function displayAllEmployees(employee) {
let empl = JSON.parse(employee.response);
let table = document.getElementById("empl-table");
console.log('you reached line 36');
for(let emp of empl){
let newRow = document.createElement("tr");
newRow.innerHTML = `<td>${empl.employeeID}</td><td>${empl.fullName}</td><td>${empl.username}</td><td>${empl.passWord}</td>
<td>${empl.isManager}</td>`;
table.appendChild(newRow);
} }
这是我的FrontController Servlet,它接收来自客户端的请求。
public class FrontController extends DefaultServlet {
private static final long serialVersionUID = 1L;
private RequestHelper requestHelper = new RequestHelper();
public FrontController() {
super();
}
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
String path = request.getServletPath();
if (path.startsWith("/static/")) {
super.doGet(request,response);
} else {
requestHelper.processGet(request,response);
}
}
这是我的请求助手,它将检查客户端请求位于哪个端点,然后转到适当的委托类并调用正确的方法。在这种情况下,它将转到“员工”切换选项。
public class RequestHelper {
private ViewDelegate viewDelegate = new ViewDelegate();
private EmployeeDelegate employeeDelegate = new EmployeeDelegate();
private ReimbursementDelegate reimDelegate = new ReimbursementDelegate();
private AuthDelegate authDelegate = new AuthDelegate();
public RequestHelper() {
super();
}
public void processGet(HttpServletRequest request,HttpServletResponse response)
throws IOException,ServletException {
String path = request.getServletPath();
if (path.startsWith("/api/")) {
if (!authDelegate.isAuthorized(request)) {
response.sendError(401);
return;
}
String record = path.substring(5);
switch (record) {
case "employee":
employeeDelegate.getEmployees(request,response);
break;
case "reimbursement":
reimDelegate.getReimbursement(request,response);
break;
我的EmployeeDelegate类检查授权标头中索引1上的键/值,该键/值表示布尔值isManager,并验证用户是经理还是普通员工。如果boolStr == true,则应检索该列表,否则它将检查我的授权令牌中的ID(用户ID = [0],isManager = [1])。
当我要求通过其ID获取1位特定员工的所有信息时,它确实起作用。只是不适用于所有员工的名单。
public class EmployeeDelegate {
private EmployeeDao employeeDao = new EmployeeDaoImpl();
public void getEmployees(HttpServletRequest request,HttpServletResponse response) throws IOException {
String idStr = request.getParameter("id");
String boolStr = request.getHeader("Authorization").split(":")[1];
if (boolStr == "true") {
List<Employee> employee = employeeDao.getallEmployees();
try (PrintWriter pw = response.getWriter();) {
pw.write(new ObjectMapper().writeValueAsString(employee));
}
} else {
if (idStr.matches("^\\d+$")) {
Employee e = employeeDao.getEmployeeById(Integer.parseInt(idStr));
if (e == null) {
response.sendError(404,"No user with given ID");
} else {
try (PrintWriter pw = response.getWriter()) {
pw.write(new ObjectMapper().writeValueAsString(e));
}
}
} else {
response.sendError(400,"Invalid ID param");
}
}
}
这是我的AuthDelegate类,供您参考,该类将在用户成功登录时创建一个令牌。然后检查该用户是否被授权为管理员。
public class AuthDelegate {
private EmployeeDao employeeDao = new EmployeeDaoImpl();
public boolean isAuthorized(HttpServletRequest request) {
String authToken = request.getHeader("Authorization");
// this will check to see if there is an auth header
if (authToken != null) {
String[] tokenArr = authToken.split(":");
// if the token is formatted the way we expect,we can take the id from it and
// query for that user or grab the boolean for isManager
if (tokenArr.length == 2) {
String idStr = tokenArr[0];
String boolStr = tokenArr[1];
if (idStr.matches("^\\d+$")) {
// check to see if there is a valid user and if that user is the appropriate
// role in their token
Employee e = employeeDao.getEmployeeById(Integer.parseInt(idStr));
if (e != null && e.getisManager() == Boolean.parseBoolean(boolStr)) {
return true;
}
}
}
}
return false;
}
public void authenticate(HttpServletRequest request,HttpServletResponse response) throws IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
Employee e = employeeDao.getEmployeeByusernameAndPassword(username,password);
if (e != null) {
String token = e.getEmployeeID() + ":" + e.getisManager();
System.out.println(token);
response.setStatus(200);
response.setHeader("Authorization",token);
} else {
response.sendError(401);
}
} }
这是我的ViewEmployees页面的HTML文档。当用户单击主屏幕导航栏中的选项卡时,它将显示我数据库中所有雇员的列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>View Employees</title>
<link rel="icon" href="https://img.icons8.com/bubbles/100/000000/star.png" type="image">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
<style>
body {
background-image: url(https://images.pexels.com/photos/1323712/pexels-photo-1323712.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
);
}
</style>
</head>
<body>
<div class="container">
<h1 align="center">View All Employees</h1>
<table id="empl-table" class="table table-striped table-bordered">
<tr>
<th>User Id</th>
<th>Full Name</th>
<th>username</th>
<th>Password</th>
<th>Manager?</th>
</tr>
</table>
</div>
<script type="text/javascript" src="static/scripts/ViewEmployees.js"></script>
</body>
</html>