1.创建一个Dynamic Web Project命名为MyProject

2.在WebContent文件下创建一个文件夹命名为resource存放我们需要的资源(JQuery等)

3.在WebContent文件下创建一个HTML文件命名为Login.html,作为登录页面。

 4.编写Login.html内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resource/Js/Jquery.js"></script>
</head>
<body>
	用户名:<input type="text" id="username"/><br><br>
	密码:<input type="password" id="password"/><br><br>
	<input type="button" id="button" value="登录"/>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("#button").click(function() {
			var username=$("#username").val();
			var password=$("#password").val();
            $.ajax({
				type:"get",
				url:"/MyServlet/",
				success:function(value){
					console.log(value);
				}
			});
		});
	});
</script>
</html>

 5.在JavaResources文件夹src下创建package命名为com.qcby;然后再创建servlet命名为LoginServlet

 6.打开LoginServlet.java找到@WebServlet("/LoginServlet"),把双引号里面的内容填到Login.html里面的url:"/MyServlet/"的双引号内。

url:"/MyServlet/LoginServlet",

7.继续编写Login.html的url,把用户名和密码也传到后端。?表示分隔符,&表示与连接,username="+username+"&password="+password这句是参数对。

url:"/MyServlet/LoginServlet?username="+username+"&password="+password,

8.前端基本上编写完毕,继续编写后端LoginServlet.java文件,接收前端数据。location.href进行的是get请求,所有后端编写doGet方法就可以了。接收数据之后打印,查看数据传输是否有误。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		System.out.println(username+"\t"+password);
	}

9.在数据库中够创建user表,用来验证该用户是否存在。

CREATE TABLE user(
id int PRIMARY KEY,
username VARCHAR(11),
password VARCHAR(18)
)

10.向表中插入用户数据。

INSERT INTO user(id,username,password) VALUES
(1,'AGi','12345'),
(2,'admin','12345'),
(3,'alix','12345');

11.下载与mysql版本相对应的jdbc包,复制到WebContent文件WEB-INF下的lib里面。

 

12.在JavaResources文件夹src下创建package命名为com.sql。在com.sql包下创建class命名为DBConnection内容如下

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {
	public static void main(String[] args) {
	}
	
	String driver = "com.mysql.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/DBS库名?useUnicode=true&characterEncoding=utf-8";
	String user = "root";
	String password = "PASSWORD密码";
	public Connection conn;
	
	public DBConnection() {
		try {
			Class.forName(driver);
			conn = (Connection) DriverManager.getConnection(url, user, password);//
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void close() {
		try {
			this.conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

注意】把url里面的DBS库名改为自己的数据库名。例如我的数据库名称为luoxue,url写成如下

String url = "jdbc:mysql://localhost:3306/luoxue?useUnicode=true&characterEncoding=utf-8";

PASSWORD密码改为数据库密码。

13.在com.sql包下创建class命名为MysqlUtil内容如下

package com.sql;

import java.sql.ResultSet;
import java.sql.Statement;

public class MysqlUtil {

	public static void main(String[] args) {
	}

	public static int getCount(String sql) {
		int sum = 0;
		DBConnection db = new DBConnection();
		try {
			Statement stmt = (Statement) db.conn.createStatement();
			ResultSet rs = (ResultSet) stmt.executeQuery(sql);
			while (rs.next()) {
				sum += rs.getInt(1);
			}
			rs.close();
			db.close();
		} catch (Exception e) {
			// TODO: handle exception
		}
		return sum;
	}
}

【注意】com.sql包中的两个class是用来操作数据库的。

13.继续编写LoginServlet.java文件。在toGet方法中进行数据库查询操作,要登录的用户在user表里面则返回成功,否则返回失败

String sql="select count(*) from user where username='"+username+"' and password='"+password+"';";
int count=MysqlUtil.getCount(sql);
		
String message="";
if(count==1) {
	message="登录成功";
}
else {
	message="登录失败";
}
String json="{\"code\":"+count+",\"message\":\""+message+"\"}";
System.out.println(json);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().append(json);

14.登录成功之后进入下一页,因此在WebContent文件WEB-INF下创建文件夹WebPages,在WebPages里新建一个HTML文件命名为newPage.html。在newPage.html里随便写点东西。

注意】 为了安全把newPage放在WEB-INF文件夹下,因为WEB-INF文件夹有受限访问特性,此文件下的其他文件不能直接通过地址进行访问,只能通过后端进行访问。

 15.继续编写Login.html,实现跳转。

success:function(value){
	if (value.code==1) {
		location.href="/MyServlet/RouterSeervlet?path=newPage";
        //RouterSeervlet下面要新建
	}else{
		alert(value.message);
	}
}

16.在com.qcby包下创建一个servlet,命名为RouterSeervlet.java。WEB-INF文件夹下文件通过此文件进行访问。

17. 编写RouterSeervlet.java的doGet方法。这里用的是【注意注释

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String path=request.getParameter("path");
        /*在Login.html的location.href="/MyServlet/RouterSeervlet?path=newPage"的参数对名字
        为path,所以getParameter("path")用的也是path*/
		request.getRequestDispatcher("/WEB-INF/WebPages/"+path+".html").forward(request, response);
	}

18.这时还是可以通过没有登录的情况下访问newPage,所以需要加一个过滤器来过滤掉没有登录情况下发送的请求,因此需要创建过滤器。在JavaResources文件夹src下创建package命名为com.filter,在此包下创建一个Filter命名为LoginFilter。

 19.在编写LoginFilter.java之前要在LoginServlet上建立会话,在成功登录的情况下加会话

if(count==1) {
	message="登录成功";
	request.getSession().setAttribute("username", username);
    //添加的会话
}else {
	message="登录失败";
}

20.编写LoginFilter.java,首先更改注解@WebFilter("/LoginFilter")为如下

@WebFilter("/*")

意思就是接收任何请求

21.继续编写LoginFilter.java的doFilter方法。【注意注释

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		// TODO Auto-generated method stub
		String requestURI=((HttpServletRequest)request).getRequestURI();

		if(requestURI.contains("resource")||requestURI.contains("Login")) {
			//resource我们前面所创建的存放资源的文件夹,Login只要请求中包含登录有关的就放行;String.contain(str)字符串中有无子串
			chain.doFilter(request, response);//满足条件可以往下进行
		}else {
			Object username=((HttpServletRequest)request).getSession().getAttribute("username");
			//在LoginServlet加的会话,加的时候参数名时username,去的时候也得使用username这个参数名
			if(username==null) {
				((HttpServletResponse)response).sendRedirect("/Login.html");
				//如果参数为空,不在登录状态那么不能往下进行,回到登录页面
			}else {//在登录状态,那么放下进行
				chain.doFilter(request, response);
			}	
		}
	}

完成登录操作。

22.为了我们自己的数据安全需要退出登录。因此在newPage.html中添加一个可以实现发送请求的标签,或者写一段Ajax都行。我用的是a标签

<a href="/MyServlet/LogoutServlet">退出登录</a>
<!--只发请求,不用传输数据,目的文件时LogoutServlet-->

23.在com.qcby包下新建一个servlet命名为LogoutServlet。

 24.编写LogoutServlet.java文件,退出登录通过去除登录成功的时候添加的会话来实现,然后跳转到登录页面,完成退出登录。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getSession().removeAttribute("username");
		response.sendRedirect("/MyServlet/Login.html");
	}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐