servlet+jdbc+html+css小案例
簡單的web小案例實現MVC小功能，學過一些Javaweb的童鞋們可以自己動手做一做了
實現後的登錄界面是這樣子的
剛開始我確實使用了css，但是由於css還是使用的太菜了，沒用好，所以就沒有將css用上去，見諒
我的思路：
1、先在web root下創建三個.jsp文件
2、創建servlet類，可以直接創建，記得要打開自動配置web.xml文件，在project->Build Automatically打上勾即可
3、編寫loginservlet類，連接jdbc，並且從數據庫中取出數據，判斷用戶登錄的用戶名和密碼是否一致
4、判斷是否一致，從而判斷鏈接的頁面.jsp文件進行鏈接
5、編寫數據庫之類的也要有
開始編寫代碼，思路一定要清晰；
1、我是先寫login1.jsp文件的
具體代碼如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>login</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="/css/login1.css"/>
</head>
<body>
<div class="container">
<div class="nav-top"></div>
<div class="nav-bottom">
<div class="content">
<div class="content-top">
<p id="mangerment">管理員登陸面板</p>
</div>
<div class="content-bottom">
<form action="servlet/loginservlet" method="get">
<p class="pp">賬號 <input class="put" type="text" name="username"/></p>
<p class="pp">密碼 <input class="put" type="password" name="password"/></p>
<input class="btn" type="submit" value="登錄"/>
<input class="btn" type="submit" value="取消"/>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
其中關鍵的代碼：
鏈接的CSS文件進行樣式匹配，由於我的CSS還是不太好，故此做的樣式效果不好，我也就沒用了，註釋掉了，見諒如果自己需要的話可以美化界面，去學習一下CSS挺好的
在一個就是請求方式的action一定要填寫web.xml中的<wrl-padding>中的如圖：
補：css樣式大概做出來了，大致是這樣子
源碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<title>登錄界面</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.container{
width: 100%;
height:100%;
}
.nav-top{
margin: 0px;
padding: 0px;
width: 100%;
height:60px;
background: skyblue;
}
.nav-bottom{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: absolute;
top: 60px;
left: 0px;
background: lightpink;
}
.content{
width: 400px;
height: 270px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -135px;
border: 2px solid #fff;
}
.content-top{
width: 100%;
height: 70px;
border: 1px dotted #000;
margin: 0px;
padding: 0px;
background: skyblue;
text-align: center;
font-size: 25px;
font-family: arial;
line-height: 70px;
}
.content-bottom{
background: #000044;
height: 200px;
width: 100%;
border: 0px solid #fff;
}
.content-bottom .put{
width: 100%;
height: 40px;
text-align: center;
font-size: 16px;
font-family: arial;
border: 0px solid #000;
padding: 10px;
line-height: 40px;
color: white;
}
.pp{
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
line-height: 40px;
border: 0px solid #000;
}
.title{
width: 80px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-family: arial;
}
</style>
</head>
<body>
<div class="container">
<div class="nav-top"></div>
<div class="nav-bottom">
<div class="content">
<div class="content-top">管理員登錄界面</div>
<div class="content-bottom">
<div class="put">用戶名：<input type="text" name="username"/></div>
<div class="put">密碼： <input type="password" name="password"></div>
<div class="pp"><input class="title" type="submit" value="登錄"> <input class="title" type="reset" value="取消"></div>
</div>
</div>
</div>
</div>
</body>
</html>
2、同理，編寫success.jsp和fail.jsp文件
success.jsp文件的編寫：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登錄成功提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
登錄成功！<br>
你的登錄信息如下：<br>
賬號:<%=request.getParameter("username") %><br>
密碼:<%=request.getParameter("password") %><br>
<a href="<%=request.getContextPath()%>/login1.jsp">返回登錄界面</a>
</body>
</html>
fail.jsp文件的編寫：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登錄失敗提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
登錄失敗！<br>
<h4>密碼錯誤</h4>
你的登錄信息如下：<br>
賬號:<%=request.getParameter("username") %><br>
<a href="<%=request.getContextPath()%>/login1.jsp">返回登錄界面</a>
</body>
</html>
3、在servlet包下創建類servletlogin.java
直接創建servlet後的圖片便是這樣的，後面直接確定即可，系統會幫你配置好web.xml中的映射
源碼如下：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class loginservlet extends HttpServlet {
public Connection con=null;
public static String username;
public static String password;
public loginservlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
username=request.getParameter("username");
password=request.getParameter("password");
System.out.println(username);
System.out.println(password);
System.out.println("取得request的請求參數");
try{
String driverName="com.mysql.cj.jdbc.Driver";
Class.forName(driverName);
System.out.println("加載驅動完成");
String dbURL="jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&&useSSL=true&&serverTimezone=GMT";
String userName="root";
String userPwd="";
con=DriverManager.getConnection(dbURL,userName,userPwd);
Statement statement=con.createStatement();
String sql="select * from login";
ResultSet rs=statement.executeQuery(sql);
while(rs.next()){
String user=rs.getString("username");
String pwd=rs.getString("password");
if(username!=null&&password!=null&&username.equals(user)&&password.equals(pwd)){
request.getRequestDispatcher("../success.jsp").forward(request, response);
}else{
request.getRequestDispatcher("../fail.jsp").forward(request, response);
}
rs.close();
con.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void init() throws ServletException {
// Put your code here
}
}
標紅的地方是我的MySQL數據庫的連接，這個地方我搞了好久，可能每個人是不一樣的，可以自己先配置好數據庫再來使用。
如果不懂得地方儘管去CSDN上找答案，很多問題都有答案的。
if(username!=null&&password!=null&&username.equals(user)&&password.equals(pwd)){
request.getRequestDispatcher("../success.jsp").forward(request, response);
}else{
request.getRequestDispatcher("../fail.jsp").forward(request, response);
}
這是請求跳轉頁面。
username=request.getParameter("username");
password=request.getParameter("password");
這是從login.jsp中獲取的username和password，然後與數據庫中的進行對比。
我的從網頁輸入開始的鏈接是：http://localhost:8080/LoginServlet/login1.jsp 當然每個人設置不一樣輸入就不一樣
大體上功能差不多實現了，其實簡單MVC還是挺簡單的，自己要學好點servlet，便可以找出問題的所在。
最後還有創建數據庫：附圖
附上一張總圖
綜上，總結自己做的小項目，確實挺小的，但是還是要花點心思的，建議學習Java web前端入門的小白們可以拿來練練手。
相信自己，好好練習Java，總有一天會有成就感的。