最近翻看以前的笔记,想到以前自己学习完servlet+jsp+mysql却怎么也把前后台连接不上，最后自己折腾好几天，终于搭建成功，写这个笔记也算是记录一下，代码是那个时候的代码，现在稍微加工了下。可以照下面步骤先把前后台连接上，有点成就感，给自己打打气加油加油，然后再研究代码怎么写的。毕竟都是从那个时候爬（自学坑太多）过来的。（这段话只是针对你我等小白，大神请自动忽略，谢谢配合）

这次就写最简单的前后台交互，不涉及MVC架构，因此也就不分dao、service、pojo，后面我会再整理一篇按照MVC模式进行交互。

在这里默认你知道什么是Jsp、mysql、servlet、Tomcat服务器。

 

一、搭建环境

创建动态web项目，File---> New--->Dynamic …… 

javaScript实现前后端页面交互 javaweb前后端交互_javaWeb前后台交互

javaScript实现前后端页面交互 javaweb前后端交互_java_02

javaScript实现前后端页面交互 javaweb前后端交互_用户名_03

 

 

javaScript实现前后端页面交互 javaweb前后端交互_javaWeb前后台交互_04

然后Finish完成，动态web项目创建成功。

javaScript实现前后端页面交互 javaweb前后端交互_javaScript实现前后端页面交互_05

二、导入jar包

因为要连接数据库，因此要导入mysql驱动包。一定要刚开始就导入。

有时候写项目时，刚开始没导包，忘记了，最后怎么都连接不上数据库，代码检查好几遍没问题，最后结果是没导包。

javaScript实现前后端页面交互 javaweb前后端交互_javaScript实现前后端页面交互_06

javaScript实现前后端页面交互 javaweb前后端交互_javaWeb前后台交互_07

三、写前端页面

在WebContext文件夹右键，new一个jsp页面，起名index.jsp，finish即可。

javaScript实现前后端页面交互 javaweb前后端交互_javaScript实现前后端页面交互_08

javaScript实现前后端页面交互 javaweb前后端交互_Jsp+Servlet+mysql交互_09

index.jsp页面代码，这里我们只是想实现功能，暂且不谈论页面美不美观，有强迫症的朋友自行添加css和js代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>Insert title here</title>
</head>
<body>
 <form action="login" method="post">
 用户名：<input name="username" type="text" /><br/>
 密码：<input name="password" type="password" /><br/>
 <input type="submit" value="提交" />
 </form>
 </body>
</html>

四、编写后台代码

在src里面新建一个包，包名随意起

包里建个DBConnection类

package demo;

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

public class DBConnection {

	// 设置成私有的
	private static final String driver = "com.mysql.jdbc.Driver";// 数据库驱动
	private static final String url = "jdbc:mysql://localhost:3306/login";   //"login"是指你的数据库名称 3306是端口
	private static final String username = "root";         //  数据库用户名                                 
	private static final String password = "root";         //  数据库密码
	private static Connection conn = null;                 //  连接对象
	// 静态代码块加载数据库驱动
	static {
		try {
			Class.forName(driver);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 单例模式返回数据库连接对象
	public static Connection getConnection() throws Exception {
		if (conn == null) {
			conn = DriverManager.getConnection(url, username, password);
			return conn;
		}
		return conn;
	}

	public static void main(String[] args) {
		try {
			Connection conn = DBConnection.getConnection();
			if (conn != null) {
				System.out.println("数据库连接正常");
			} else {
				System.out.println("数据库连接异常");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

写完上面的代码就可以测试下java代码是否连接上数据库、

javaScript实现前后端页面交互 javaweb前后端交互_javaScript实现前后端页面交互_10

控制台运行结果：

javaScript实现前后端页面交互 javaweb前后端交互_javaWeb前后台交互_11

到这里该写serevlet代码了

五、编写loginServlet类

 

package demo;

/**
 * 这个类主要的功能是获取前端页面用户输入的用户名和密码 然后调用LoginSuccess方法进行用户名和密码与数据库中数据进行匹配
 * 并进行跳转，用户名和密码正确跳转login_success.jsp，错误跳转login_failed.jsp
 */
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//  登录方法
public class loginServlet implements javax.servlet.Servlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws Exception  {
		String username = request.getParameter("username");// 取得用户名
		String password = request.getParameter("password");// 取得密码
		System.out.println("取得用户名和密码");
		 
		LoginSuccess db = new LoginSuccess(); // 构建登陆对象
		boolean canLogin = db.LoginSuccess(username, password);// 取得用户名和密码
		if (canLogin) {// 根据登陆情况，跳转页面
			System.out.println("用户名和密码正确");
			response.sendRedirect("login_success.jsp");
		} else {
			response.sendRedirect("login_failed.jsp");
			System.out.println("用户名和密码错误");
		}
	}
	public void destroy() {
	}
	public ServletConfig getServletConfig() {
		return null;
	}
	public String getServletInfo() {
		return null;
	}
	public void init(ServletConfig arg0) throws ServletException {
	}

	public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
		HttpServletRequest rq = (HttpServletRequest) request;
		HttpServletResponse rs = (HttpServletResponse) response;
		try {
			doPost(rq, rs);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

LoginSuccess类：

package demo;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

//  调用数据库，进行查询用户名和密码
public class LoginSuccess{
	public boolean LoginSuccess(String username, String password) throws Exception {
		boolean returnValue = false;
		String sql = "SELECT * FROM user";
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;

		try {
			conn = DBConnection.getConnection();
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while (rs.next()) {
				String userName = rs.getString("username");
				String passWord = rs.getString("password");
				if (userName.equals(username) && passWord.equals(password)) {
					//   如果用户名和密码都和数据库的一样，就返回true
					returnValue = true;
					break;
				}
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return returnValue;

	}
}

写到这里，java代码完了么？  已经写完了，但是连接接jsp和servlet的桥梁还没有搭建起来，这时候启动Tomcat，进行跳转肯定是404错误，因为还没有配置web.xml

web.xml代码：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>javaWebDemo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  		<servlet-name>loginServlet</servlet-name>
  		<servlet-class>demo.loginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  		<servlet-name>loginServlet</servlet-name>
  		<url-pattern>/login</url-pattern>
  </servlet-mapping>
</web-app>

写到这里已经基本上完成了，最后再写两个页面就是你登录成功或者失败将进行跳转的页面。

我就截图两个名称：

javaScript实现前后端页面交互 javaweb前后端交互_java_12

这两个名称一定要和loginServlet类里面要跳转页面的名称保持一致。

这是登录成功的界面。

javaScript实现前后端页面交互 javaweb前后端交互_Jsp+Servlet+mysql交互_13

最后放张我的整体结构图，其实也没什么结构，没有分包什么的。

javaScript实现前后端页面交互 javaweb前后端交互_用户名_14

数据库代码，本来很简单就不想放，但是考虑到这个完整性，还是放进来。

CREATE TABLE `user` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

六、总结

    写到这里前后台交互，基本上这个流程是完成了，代码逻辑看起来有点乱乱的，但现在没有分包，也没有进行JDBC部分代码提取，后面我会再整理一篇笔记按照MVC模式进行交互。

 

如果你完全复制我的代码，还报错，这个时候很有可能是环境问题，因为我都是测试了好几遍完全正确才截图的，有问题欢迎留言讨论。