HTML（前端）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端與數據庫交互</title>
<style type="text/css"> @import url("Style0.css"); </style>
<script type="text/javascript" src="0.js"></script>
<script>
function Check(){ if(document.Form.Name.value=="") { alert("姓名不能為空！"); return false; } else if(document.Form.psword.value.length<6||document.Form.psword.value.length>10) { alert("密碼長度應在6-10位！"); return false; } else if(document.Form.radio0.value!="男"&&document.Form.radio0.value!="女") { alert("請選擇性別為男或者女，人妖請聯系程序員！\n call 13856854188"); return false; } else
return true; } </script>
</head>
<body bgcolor=pink>
<form action="test" method="post" name="Form" onsubmit="return Check()">
<p align="center"><br><br><br><br><br><br><br><br>
<input type="text" name="Name" value="姓名" class=describe0 onfocus="Input()" onblur="Verify()"><br><br>
<input type="password" name="psword" value="password" class=describe0 onfocus="Input()" onblur="Verify()"><br><br>
<input type="radio" name="radio0" value="男" class=radioclass><font size=5 color="red" face="楷體">男 <input type="radio" name="radio0" value="女">女</font><br><br>
<input type="submit" value="登錄" class=describe0></p>
</form>
</body>
</html>
CSS樣式：
@charset "UTF-8"; .describe0{ color:red; background-color:pink; height:40px; text-align:center; font-size:25px; font-family:楷體; cursor:help; /*必須分號隔開*/
} .describe1{ color:green; height:400px; width:400px; text-align:center;
}
JS控制：
function Input(){ if(document.Form.Name.value=="姓名"){ document.Form.Name.value=""; } if(document.Form.psword.value=="password"){ document.Form.psword.value=""; } }
SEVERLET(服務器):
package Java_web.Java_web0; import java.io.IOException; //import java.io.PrintWriter; //import java.sql.Connection; //import java.sql.ResultSet;
import java.sql.SQLException; //import java.sql.Statement;
import javax.servlet.ServletException; //import javax.servlet.ServletRequest; //import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import Java_web.Java_web1.Dbbase; public class servlet0 extends HttpServlet{ /** * */
private static final long serialVersionUID = 1L; /*法1： * private static final long serialVersionUID = 1L; @Override public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException { // TODO Auto-generated method stub req.setCharacterEncoding("utf-8"); res.setContentType("text/html;charset=utf-8"); PrintWriter print=res.getWriter(); String psword=req.getParameter("psword"); String Name=req.getParameter("Name"); //調用方法 Dbbase db = new Dbbase(); Connection con = null ; try { con=db.communicate(); } catch (ClassNotFoundException | SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } Statement seach=null; try { seach=(Statement)con.createStatement(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } String sql="select * from table0 where username='"+Name+"'and password='"+psword+"'"; ResultSet result = null; try { result=seach.executeQuery(sql); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } try { if(result.next()) { print.println("<html><head><title>前端與數據庫交互</title></head><body bgcolor=pink><meta http-equiv='Content-Type;content=text/html;charset=utf-8'>"); print.println("<br><br><br><br><br><br><br><br><div align=center><font face='楷體' size=6 color=red>前端與數據庫交互<br>姓名："+Name+"<br>密碼："+psword+"</font></div></body></html>"); print.close(); } else { print.println("<html><head><title>前端與數據庫交互</title></head><body bgcolor=pink><meta http-equiv='Content-Type;content=text/html;charset=utf-8'>"); print.println("<br><br><br><br><br><br><br><br><div align=center><font face='楷體' size=6 color=red>數據庫中沒有所查詢用戶！</font></div></body></html>"); print.close(); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } }*/
//法2：
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub
req.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); String Name=req.getParameter("Name"); String psword=req.getParameter("psword"); Dbbase db=new Dbbase(); boolean flag=false; try { flag=db.test(Name,psword); } catch (ClassNotFoundException | SQLException e) { // TODO Auto-generated catch block
e.printStackTrace(); } if(flag) {//如果前端傳遞的參數存在，就轉發到后台主頁面//轉發
req.getRequestDispatcher("main.jsp").forward(req, resp); } else {//如果不存在，重新回到登錄頁面//重定向
resp.sendRedirect("0.jsp");//打開新0.jsp頁面,是重新定向，前后頁面不是一個request。 //req.getRequestDispatcher("0.jsp").forward(req, resp);//刷新頁面，是請求轉發，前后頁面共享一個request ;
} } }
DATABASE（數據庫）：
package Java_web.Java_web1; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class Dbbase { //法1：
/*public Connection communicate() throws ClassNotFoundException, SQLException { Class.forName("com.mysql.cj.jdbc.Driver");//數據庫驅動 Connection con = (Connection) DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/first_database?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong","root","123456"); return con; }*/
//法2：
public Statement cheack() throws SQLException, ClassNotFoundException { Class.forName("com.mysql.cj.jdbc.Driver");//數據庫驅動
Connection con = (Connection) DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/first_database?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong","root","123456"); Statement st=null; st=(Statement)con.createStatement(); return st; } public Boolean test(String Name,String psword) throws ClassNotFoundException, SQLException { String sql="select * from table0 where username='"+Name+"'and password='"+psword+"'"; ResultSet result = null; Statement st=this.cheack(); result=st.executeQuery(sql); if(result.next()) return true; else
return false; } }
上面數據庫和服務器里用了兩種寫法，注意對應，法1被注釋掉了。
跳轉頁面（0.jsp）：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body bgcolor=pink>
<br><br><br><br><br><br><br><br><div align=center><font face='楷體' size=6 color=red>登錄失敗，數據庫中無此用戶！</font></div>
</body>
</html>
跳轉頁面（main.jsp）：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端與數據庫交互</title>
</head>
<body bgcolor=pink>
<br><br><br><br><br><br><br><br><div align=center><font face='楷體' size=6 color=red>登陸成功，該用戶在數據庫中查得！</font></div>
</body>
</html>
WEB.XML（配置文件）：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>0</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>servlet0</servlet-name>
<servlet-class>Java_web.Java_web0.servlet0</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet0</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>
</web-app>
數據庫表：
圖 1
工程路徑及文件存放路徑：
圖 2
注意要在lib目錄下添加jar包，下面為此工程用到的庫，其中就有上面的jar包mysql-connector-java-8.0.15.jar,要注意mysql版本不一樣jar包則不同，jdbc命令略有不同，我的mysql是8.0，注意保持一致。
圖 3
界面：
圖 4
圖 5
圖 6