1.准备工作

在Java Web与MySQL数据相连接之前，我们需要做一些准备工作，保证连接后的没有什么问题，当然以下的操作都是保证你的电脑上安装了Tomcat为前提的，如果还没有安装的同学们可以去百度一下教程，有很多详细的教程。

1.1 建立MySQL数据库

html怎么连接java文件 html和java怎么连起来_MySQL


我使用的是MySQL Workbench，大家可以看到账号和密码都放在了名字叫做letterwish这个数据库中，里面建立了一张表——user，表中有account和pwd两列数据。账号和密码分别是oushile和oushile123，如图所示。

html怎么连接java文件 html和java怎么连起来_JSP_02

1.2建立login.JSP页面

1.在Eclipse建立中建立Dynamic Web Project（如果是MyEclipse就是差不多的Web Project）

html怎么连接java文件 html和java怎么连起来_html怎么连接java文件_03

2.在WebContent里面New一个JSP File，取名叫login.jsp

html怎么连接java文件 html和java怎么连起来_JSP_04


在写login.jsp前，我们也需要做一些准备的工作，比如说定义一个js，因为当用户输入空密码和空账号之前，我们需要弹窗提醒用户。

<script type = "text/javascript" >
function myFunction()
{	
	 var sUserName = document.log.username.value;
	 var sPassword = document.log.pwd.value ;
	if(sUserName.length==0)
    alert("账号不能为空哦！");
	if(sPassword.length==0)
	    alert("密码不能为空哦！");
}
</script>

以上就是js的定义，接下来贴上login.jsp的代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE>
<html>
<head>
<meta  charset="utf-8">
<title>Insert title here</title>
<script type = "text/javascript" >
function myFunction()
{	
	 var sUserName = document.log.username.value;
	 var sPassword = document.log.pwd.value ;
	if(sUserName.length==0)
    alert("账号不能为空哦！");
	if(sPassword.length==0)
	    alert("密码不能为空哦！");
}
</script>
</head>

<body>
		<form name="log" method="post" action="LoginServlet" >
     <pre>              登录
         账号:  <input type="text" name="username">
         密码:  <input type="password" name="pwd">
         <input type="submit" onclick="myFunction()" value="OK" ><input type="submit" value="Forget Password"></pre>
        </form>
        </body>
    
    <script>
</body>
</html>

大家观察login.jsp里面的<form>标签，action的名字叫做LoginServlet，意思就是说，当你点击名为OK的这一个按钮的时候，整个表单就会被发送到LoginServlet.java这个文件里面做一些处理，所以我们紧接着要定义一个Servlet，叫做LoginServlet.java

下面贴上LoginServlet.java的代码

import java.io.IOException;

import java.sql.*;
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 javax.servlet.http.HttpSession;


/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
   
	// JDBC 驱动名及数据库 URL
    static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";  
    static final String DB_URL = "jdbc:mysql://localhost:3306/letterwish";
 
    // 数据库的用户名与密码，需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "Oushile123.";
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    	

        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        String pwd = request.getParameter("pwd");
        //System.out.println(username+":"+pwd);
        Connection conn = null;
        Statement stmt = null;
        try {
       	 // 注册 JDBC 驱动
            Class.forName("com.mysql.jdbc.Driver");
        
            // 打开链接
           // System.out.println("连接数据库...");
            conn = DriverManager.getConnection(DB_URL,USER,PASS);
        
            // 执行查询
            //System.out.println(" 实例化Statement对象...");
            stmt = conn.createStatement();
            
            String sql = "SELECT * FROM user where account='" + username + "' and pwd= '" + pwd + "'";
        	ResultSet rs = stmt.executeQuery(sql);
      
        	 if(rs.next()){
              //  System.out.println("Success!");
                response.sendRedirect("success.html");
}
        	 else {
        		 response.sendRedirect("defeat.html");
			}
        	 // 完成后关闭
             rs.close();
             stmt.close();
             conn.close(); 
        }catch(SQLException se){
            // 处理 JDBC 错误
            se.printStackTrace();
        }catch(Exception e){
            // 处理 Class.forName 错误
            e.printStackTrace();
        }finally{
            // 关闭资源
            try{
                if(stmt!=null) stmt.close();
            }catch(SQLException se2){
            }// 什么都不做
            try{
                if(conn!=null) conn.close();
            }catch(SQLException se){
                se.printStackTrace();
            }
        }
   	

    }

}

大家以注意的一点，上面代码段中

static final String PASS = "Oushile123.";

大家要把这一段改成自己的MySQL数据库密码哦。

static final String DB_URL = "jdbc:mysql://localhost:3306/letterwish";

大家要把这一段中的letterwish改成自己的MySQL数据库名字哦。

大家看上述代码中的

response.sendRedirect("success.html");

意思就是，当登录成功，网页会自动跳转到一个名字叫做success.html的文件中，接下来在WebContent中定义一个名字叫做success.html的文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>登录成功！</p>
</body>
</html>

response.sendRedirect(“defeat.html”);也是一样的道理，当登录失败，就会跳转到defeat这个界面。
defeat.html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>账号或密码错误！请重新<a href="login.jsp">登录</a>
</p>
</body>
</html>

最后回到login.jsp，按下Run的绿色按钮，开始测试吧！