Java web實現簡登入頁面（MyBatis+jsp+servlet+html+css+javascript）附原始碼
本文利用MyBatis+jsp+servlet+html+css+javascript實現了一個簡單的登入頁面。對使用者輸入的使用者名稱和密碼就行校驗，校驗通過則登入成功，密碼和使用者資訊儲存在mysql表中，通過MyBatis訪問（MyBatis相關知識可參考先前的文章MyBatis測試）。先給出最終的效果圖：
登入成功則進入如下頁面：
登入失敗，則進入如下頁面：
如果輸入的密碼或者使用者名稱為空或者不合法，則頁面上提示：
（一）安裝配置tomcat
這裡使用的是tomcat 8.0，直接官網下載壓縮包解壓，然後新增環境變數TOMCAT_HOME（值為D:\apache-tomcat-8.0.52）並修改CLASSPATH環境變數（末尾新增%TOMCAT_HOME%\BIN），然後在D:\apache-tomcat-8.0.52\bin下雙擊startup.bat執行tomcat，執行成功，在瀏覽器中輸入http://localhost:8080/，可見歡迎頁面如圖：
（二）eclipse配置tomcat 8.0
window-->preferences-->Server-->runtime environments，新增tomcat 8.0,然後apply即可。
雙擊server檢視中的tomcat 8.0,需要如下配置，否則執行時可能會報錯。
（三）eclipse建立Dynamic Web project
先給出工程檢視如下：
具體步驟如下：
（1）建立Dynamic Web project工程，命名為LoginTest
注意選中下圖中的單選框，這樣自動建立一個web.xml檔案
(2) 編寫 index.jsp（這裡只使用了index.jsp作為登入頁面，註冊查詢等可以類似實現），先給出最終的index.jsp。實際上對於最簡單的java web程式，只有一個web.xml和index.jsp即可執行，index.jsp的body中只寫hello world，然後再tomcat上執行，就可實現java web的hello world。最終版本的index.jsp用到了模板css/init.css（用於初始化css的一些基本配置，以便遮蔽一些瀏覽器差異），css/login.css則是自定義的登入介面的樣式；index.jsp還用到了js/login.js，利用javascript對輸入框資訊做一些校驗並給出提示。最終的原始碼包中給出相應檔案。
index.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>登入介面</title> <link rel="stylesheet" href="css/inti.css" type="text/css" /> <link rel="stylesheet" href="css/login.css" type="text/css" /> </head> <body> <!--absolute 絕對定位相對於父元素 不佔空間 z-index屬性--> <div id="bg"> <div class='div_logo'> <p >使用者登入</p> </div> <div class='div_form'> <form name='login' action='Login' onsubmit='return validation()' method='post'> <div class='div_login_input' id='user'> <div id='icon_user'></div> <input class='login' id='username' type='text' name='username' placeholder='使用者名稱'></input> <span class='hint' id='hint_user'></span> </div> <div class='div_login_input' id='pwd' > <div id='icon_pwd'></div> <input class='login' id='password' type='password' name='password' placeholder='請輸入密碼'></input> <span class='hint' id='hint_pwd'></span> </div> <div class='div_btn'> <input id='login_submit' type='submit' value='登入'></input> </div> </form> </div> <script src='js/login.js'></script> </body> </html>
（3）編寫LoginServlet.java
package com.test.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.ibatis.session.SqlSession;
import com.test.dao.*;
import com.test.util.GetSqlSession;
public class LoginServlet extends HttpServlet{
public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException{
UserDaoImplement usrdao = new UserDaoImplement();
SqlSession session = GetSqlSession.createSqlSession();
String username = req.getParameter("username");
String password = req.getParameter("password");
resp.setContentType("text/html;charset=UTF-8");
try {
PrintWriter pw = resp.getWriter();
pw.println("<html>");
pw.println("<body>");
if(usrdao.verify(username, password, session)==true)
{
pw.println("Login success.");
}
else
{
pw.println("Login failed. Wrong username or password");
}
pw.println("</body>");
pw.println("</html>");
pw.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
LoginServlet.java獲取提交的使用者名稱和密碼資訊，呼叫驗證方法進行驗證，並根據驗證結果寫驗證成功或者失敗的介面。這裡竟沒有主方法，因為tomcat執行時存在一個主方法。
（4）配置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>test</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.test.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/Login</url-pattern>
</servlet-mapping>
</web-app>web.xml功能頁面使用的類以以及類與url-pattern之間的關係。web.xml和index.jsp以及LoginServlet.java可構成一個web service,其中inde.jsp定義了頁面，LoginServlet.java是提供服務的程式，而web.xml指定了頁面與servlet類之間的對映關係，即某個功能頁面使用哪個類在後臺進行處理。
（5）配置MyBatis訪問資料庫中的使用者表
首先建立使用者表，插入兩條資料：
create database test;
use test;
create table tbl_user(
username varchar(32) NOT NULL,
password varchar(32) ,
PRIMARY KEY ( username )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
insert into tbl_user values("admin", "admin");
insert into tbl_user values("testname", "123456");然後參考先前的文章MyBatis測試配置MyBatis使用的config/Configure.xml ，mysql.properties以及UserMapper.xml，檔案最後在原始碼中給出。這裡先給出表對應的實體類User.java和UserMapper.xml:
User.java:
package com.test.entity;
public class User {
private String username;
private String password;
//無參構造方法
public User(){
}
//有參構造方法
public User(String username, String password){
this.username = username;
this.password = password;
}
public void setUsername(String username){
this.username = username;
}
public void setPassword(String password){
this.password = password;
}
public String getUsername(){
return this.username;
}
public String getPassword(){
return this.password;
}
}
UserMapper.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="UserMapper">
<select id="getUserByName" parameterType="String" resultType="User">
select * from tbl_user where username = #{username}
</select>
</mapper>
訪問資料庫使用GetSqlSession類，該類利用Configure.xml檔案獲取sqlSessionFactory例項，並返回一個用於操作資料庫的SqlSession例項。GetSqlSession.java如下：
package com.test.util;
import java.io.IOException;
import java.io.InputStream;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
public class GetSqlSession {
public static SqlSession createSqlSession(){
SqlSessionFactory sqlSessionFactory = null;
InputStream input = null;
SqlSession session = null;
//建立sqlSessionFactory
try {
input = Resources.getResourceAsStream("config/Configure.xml");
sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
session = sqlSessionFactory.openSession();
return session;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
(6) dao層定義介面並實現介面中的方法
編寫介面UserDao.java並由UserDaoImplement.java實現該介面，使用介面的目的是統一規範。實現介面的類，訪問資料庫中的tbl_user表，查詢使用者名稱和密碼，與使用者提交的使用者名稱和密碼進行比對，並返回校驗結果。
UserDao.java:
package com.test.dao;
import org.apache.ibatis.session.SqlSession;
public interface UserDao {
public boolean verify(String username, String password, SqlSession session);//verify username and passwd
}
UserDaoImplement.java:
package com.test.dao;
import org.apache.ibatis.session.SqlSession;
import com.test.entity.*;
public class UserDaoImplement implements UserDao {
public boolean verify(String username, String password, SqlSession session){
User user = (User) session.selectOne("UserMapper.getUserByName", username);
if(user == null){
session.close();
return false;
}
else if(user.getUsername().equals(username) && user.getPassword().equals(password))
{
session.close();
return true;
}
else
{
session.close();
return false;
}
}
}
（7）執行測試：
結果如下：
使用者名稱只能是英文，輸入使用者名稱/密碼為admin/admin或者testname/123456時候登入成功，否則登入失敗。
（8）原始碼：https://github.com/poetteaes/git/tree/master/project/login