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