做一个简单的前后端交互登录系统

想做一个简单的前后端交互的登录系统，前端用jquery ajax请求，后端用java servlet。

前端页面做这样：

首先，创建数据库：

然后在MyEclipse 里面搭建项目，包和类的框架。

大致框架截图如下：

User.java类里面主要代码有：

    private int id; 
	private String name;
	private String password;

然后生成get和set方法。

BaseConnection.java里面的代码主要有：

public class BaseConnection {
public static Connection getConnection(){
	Connection conn =null;
	try {
		Class.forName("com.mysql.jdbc.Driver");
		conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db_database10","root","root");
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return conn;
}
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		Connection conn = BaseConnection.getConnection();
		System.out.println(conn);
	}

}

这个是JDBC连接数据库。

findUser.java是主要的查询类，是Servlet. 代码如下：

代码分为三部分： doGet  checkUser  doPost

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	public void checkUser(HttpServletRequest request,HttpServletResponse response)
			throws ServletException, IOException{
		try{
		Connection conn = BaseConnection.getConnection();
		Statement stmt = conn.createStatement();
		String user = new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8");
//如果页面上输入的用户名为中文，则传输到后端来会乱码，这个是用来转码。
		String password = request.getParameter("password");
		String result = "";
		String sql = "select*from tb_user where userName = '"+user+"'and password='"+password+"' ;"; 
//主要的数据库查询语句，判断用户名和密码是否匹配，如果匹配，则能查询到结果，如果不匹配，则查询为空。
		System.out.println(sql);
		ResultSet rs = stmt.executeQuery(sql);
		if(rs.next()){
			result = "0";
		}else{
			result = "1";
		}
		String string ="successCallback("+JSON.toJSONString(result,true).toString()+")";
		 response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.write(string);
		System.out.println(string);
		out.flush();
		out.close();
		}catch(SQLException e){
			e.printStackTrace();
		}
	}
public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.checkUser(request, response);
	}

在这个项目中后端需要下载两个驱动：mysql-jdbc.jar, org.json.jar. 下载下来通过鼠标点击项目右键，Build Path ——>add  external  archives添加。

添加后如下图：

然后web.xml里面还要修改：

 <servlet-mapping> 里面 <url-pattern>/FindUser</url-pattern>

下面是前端部分的代码：

<div class="login_main">
			<h3>后台登录</h3>
			<input type="text" class="inputText" placeholder="请输入用户名"/>
			<input type="password" class="inputText" placeholder="请输入密码"/>
			<input type="button" class="inputBtn" value="登录" />
		</div>

h3{
			text-align: center;
			font-family: "agency fb";
		}
		input{
			width: 300px;
			height: 45px;
			margin: 10px auto;
			font-size: 16px;
			box-sizing: border-box;
			outline: none;
		}
		.inputText{
			border: solid cadetblue 1px;
			padding-left: 10px;
		}
		.inputBtn{
			background: cadetblue;
			color: white;
			border:none;
		}
		.login_main{
			width: 300px;
			margin: 0 auto;
			overflow: hidden;
		}

$(function(){
				var btn = $("input").eq(2);
				btn.click(function(){
					var useNameVal = $("input").eq(0).val();
					var pswdVal = $("input").eq(1).val();//点击事件先获取input输入框中的值
					findUser(useNameVal,pswdVal);//调用下面的findUser函数，里面传参数：userName和password.
				})
				function findUser(useNameVal,pswdVal){
					$.ajax({
						type:"post",
						url:"http://localhost:8080/Practice2/FindUser?action=checkUser",
						async:true,
						dataType:"jsonp",
						jsonpCallback:"successCallback",
						data:{name:useNameVal,password:pswdVal},
						success:function(result){//后台返回result
							console.log(result);
							if(result=="0"){ //返回值为0表示账号与密码匹配正确
								alert("恭喜登录成功！");
								window.location.href="newFile.html";
							}else{//否则匹配不正确，登录失败。
								alert("抱歉，账号和密码不匹配！");
							}
						},
						error:function(){
							alert("对不起，请求出错！");
						}
					});
				}
			})

这样就做成了一个简单的前后端连接的登录系统。只有用户名和密码匹配才能登陆哦。新手上路，还望大神多多指教。