文章目錄
- 寫在前面
- 1.ImageServlet.java
- 2.login.jsp
- 3.創建資料庫 連接資料庫和myeclipse
- 4.loginCheck.jsp
寫在前面
這一篇寫的早一點 如果不理解為什么刪去/servlet 可以看一下
1.ImageServlet.java
創建一個Servlet專案 右擊專案名創建Servlet檔案 命名ImageServlet
同樣地 創建的時候刪去這個
代碼：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html,charset=utf-8");
BufferedImage bim=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);//創建物件 畫布
Graphics g=bim.getGraphics();//程式用畫筆g來繪制修改圖片物件bim
Random rm=new Random();//用來生成隨機結果
g.setColor(new Color(200,rm.nextInt(255),210));//隨機設定背景的顏色
g.fillRect(0,0,100,30);//繪制坐標為(0,0) 長78 寬20的矩形
StringBuffer sbf=new StringBuffer("");//存盤隨機生成的驗證碼
//加一些干擾線
for (int i = 0; i < 4; i++) {
g.setColor(new Color(rm.nextInt(255), rm.nextInt(255), rm.nextInt(255)));
g.drawLine(rm.nextInt(80), rm.nextInt(30), rm.nextInt(80), rm.nextInt(30));
}
//生成驗證碼
for(int i=0;i<4;i++){
g.setColor(Color.black);//數字的顏色為黑色
g.setFont(new Font("華文隸書",3,22));
//設定驗證碼字體 Font.BOLD|Font.ITALIC表示加粗且斜體 可用3代替 加粗1 斜體2
String a="acdefghigkmnpqrstuvwxyz02345789";
char n=a.charAt(rm.nextInt(a.length()));
sbf.append(n);//生成的數字追加到字串后
g.drawString(""+n,i*15+5,18);//每次畫一個數字 畫筆首坐標(5,18) 之后每個數字間隔15 縱坐標都為18
}
//生成的驗證碼保存到session中
HttpSession session=request.getSession(true);
session.setAttribute("piccode", sbf);
//禁止快取
response.setHeader("Prama", "no-cache");
response.setHeader("Coche-Control", "no-cache");
response.setDateHeader("Expires",0);
response.setContentType("image/jpeg");
//將bim以jpg格式提交給瀏覽器
ImageIO.write(bim,"JPG",response.getOutputStream());
response.getOutputStream().close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
只改寫了doGet和doPost 然后根據軟體提示 匯入一些包就可以
在瀏覽器預覽如下圖 重繪會變：
驗證碼去掉了0o 1l 6b這樣不易辨認的數字 加了線條
2.login.jsp
右擊Servlet專案的index.jsp檔案 創建login.jsp
代碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<!--用來點擊圖片重繪驗證碼-->
<script type="text/javascript">
function reloadImage(t){
t.src="./ImageServlet?flag="+Math.random();
}
</script>
<head>
<title>用戶登錄</title>
</head>
<body>
<center>
<form action="./loginCheck.jsp" method="post">
<table>
<tr><td colspan="2" align="center">用戶登錄</td></tr><!--colspan設定當前單元格橫跨的列數 -->
<tr><td>登錄名:</td><td><input type="text" name="name"></td></tr>
<tr><td>密碼:</td><td><input type="password" name="password"></td></tr>
<tr><td>驗證碼:</td><td><input type="text" name="checkcode"></td>
<td><img src="./ImageServlet" align="middle" onclick="reloadImage(this)"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="登錄"></td></tr>
</table>
</center>
</form>
</body>
</html>
別漏掉上面的script標簽對及其內容
顯示效果：
重繪或者點擊圖片驗證碼都會變的
3.創建資料庫 連接資料庫和myeclipse
資料庫名為login 表名為loginTable 代碼如下：
use login;
create table loginTable(
username char(20),
password char(20)
)
insert into login.loginTable values("111","111")
由上可知 資料庫中只有一個用戶 名字密碼都為111
然后連接資料庫和myeclipse 不會的話看這里
4.loginCheck.jsp
對login.jsp輸入的資料進行處理并反饋
代碼如下：
<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>檢查</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String username=request.getParameter("name");
String password=request.getParameter("password");
String checkcode=request.getParameter("checkcode");
String piccode=request.getSession().getAttribute("piccode").toString();
%>
用戶名:<%=username%><br>
密碼：<%=password%><br>
驗證碼：<%=checkcode%><br>
正確的驗證碼:<%=piccode%><br>
<%
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/login","root","root") ;
String sql="select * from loginTable";
sql+=" where username='"+username+"'and password='"+password+"'";
Statement stmt = con.createStatement();
ResultSet re=stmt.executeQuery(sql);
if(!checkcode.equals(piccode))
{
out.print("<font color=red>驗證碼錯誤,登錄失敗！</font><br>");
out.print("<a href='login.jsp'>重新登錄<//a>");
}
else if(checkcode.equals(piccode)&&re.next())
{
session.setAttribute("userName",username);//用戶名保存到session
out.print("<font color=green>恭喜你，通過驗證:</font><br><br>");
}
else
{
out.print("<font color=red>密碼錯誤或用戶不存在，登錄失敗！</font><br>");
out.print("<a href='login.jsp'>重新登錄</a>");
}
con.close();stmt.close();re.close();
}catch(SQLException e){
e.printStackTrace();
}
%>
</body>
</html>
注意事項：里面涉及到資料庫名，表名和列名 如果和我的不一樣需要改
效果圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/238077.html
標籤：其他
上一篇：原生JavaScript以及jQuery實作輕量級的記事工具(todolist)--適應手機端
下一篇：百葉窗效果 html+css