文章申明：原文章為java jsp+servlet+mysql實(shí)現(xiàn)登錄網(wǎng)頁設(shè)計(jì)秫舌，經(jīng)閱讀后重新編寫了其中的代碼
開發(fā)框架：IntelliJ IDEA 2017.2+Maven+Tomcat 8.0+MySQL V5.7

共涉及到下面幾個(gè)文件：

1卫键、Maven配置文件 pom.xml
2引润、servlet 處理類 LoginTestServlet.java
3、登錄頁面 login.jsp
4两嘴、成功跳轉(zhuǎn)頁面 success.jsp
5肠套、失敗跳轉(zhuǎn)頁面 fail.jsp
6栗柒、配置文件 web.xml

---------------------------------文章正文，請依次閱讀------------------------------

• pom.xml內(nèi)容

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.ken</groupId>
  <artifactId>Login</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>Login Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>org.testng</groupId>
      <artifactId>testng</artifactId>
      <version>6.8</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.42</version>
    </dependency>
  </dependencies>
  <build>
    <finalName>Login</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.7</source>
          <target>1.7</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

• LoginTestServlet.java內(nèi)容

package com.ken;

import java.io.IOException;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.util.Objects;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.Statement;

/**
 * Servlet implementation class LoginTestServlet
 * @Description java+mysql+tomcat實(shí)現(xiàn)登錄
 * @author xukui
 * @date 2017-7-22 21:22:11
 */
@WebServlet("/LoginTestServlet")
public class LoginTestServlet extends HttpServlet{
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginTestServlet() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse respone)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=gb2312");
        request.setCharacterEncoding("gb2312");

        String result;

        String username = request.getParameter("username");
        String psw = request.getParameter("password");

        if (Objects.equals("", username) || username == null || username.length() > 20) {
            try {
                result = "請輸入用戶名（不能超過20個(gè)字符）";
                request.setAttribute("message", result);
                response.sendRedirect("login.jsp");
                return;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        if (Objects.equals("", psw) || psw == null || psw.length() > 20) {
            try {
                result = "請輸入密碼（不能超過20個(gè)字符）";
                request.setAttribute("message", result);
                response.sendRedirect("login.jsp");
                return;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        //登記JDBC驅(qū)動程序
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (Exception e) {
            System.out.print("Class Not Found Exception");
        }

        //鏈接URL
        String url = "jdbc:mysql://localhost:3306/study";
        Connection connection;
        Statement statement;
        ResultSet resultSet = null;

        try {
            connection = (Connection) DriverManager.getConnection(url, "root", "root567~");
            statement = (Statement) connection.createStatement();

            String sql = "select * from userInfo where username = '"+username+"' and userpsw = '"+psw+"'";
            resultSet = statement.executeQuery(sql);
        } catch (Exception e) {
            e.printStackTrace();
        }

        HttpSession session = request.getSession();
        session.setAttribute("username", username);

        try {
            assert resultSet != null;
            if (resultSet.next()) {
                session.setAttribute("age", resultSet.getString("age"));
                session.setAttribute("sex", resultSet.getString("sex"));
                session.setAttribute("weight", resultSet.getString("weight"));
                response.sendRedirect("success.jsp");
            } else {
                session.setAttribute("message", "用戶名或密碼不匹配呀伙。");
                response.sendRedirect("fail.jsp");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

• login.jsp內(nèi)容

<%--
  Created by IntelliJ IDEA.
  User: xukui
  Date: 2017/7/22
  Time: 21:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用戶登錄</title>
</head>
<body>
<form action="LoginTestServlet" name="frmLogin" method="post">
    <h1 align="center">用戶登錄</h1>
    <div align="center">
        <table border="1">
            <tr>
                <td>用戶名：</td>
                <td>
                    <label>
                        <input name="username" value="" size="20" maxlength="20" onfocus="if (this.value==='Your name') this.value='';"/>
                    </label>
                </td>
            </tr>
            <tr>
                <td>密 碼：</td>
                <td>
                    <label>
                        <input type="password" name="password" value="" size="20" maxlength="20" onfocus="if (this.value==='Your Password') this.value='';" />
                    </label>
                </td>
            </tr>
        </table>
        <br/>
        <input type="submit" name="submit" value="Login" onclick="return validateLogin()">
        <input type="reset" name="reset" value="Clear" />
    </div>
</form>

<script type="text/javascript">
    function validateLogin() {
        var sUserName = document.frmLogin.username.value;
        var sPassWord = document.frmLogin.password.value;
        if(sUserName === "") {
            alert("請輸入用戶名补履！");
            return false;
        }

        if(sPassWord === "") {
            alert("請輸入密碼！");
            return false;
        }
    }
</script>
</body>
</html>

• success.jsp內(nèi)容

<%--
  Created by IntelliJ IDEA.
  User: xukui
  Date: 2017/7/22
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登錄成功</title>
</head>
<body>
<%
    String username = (String) session.getAttribute("username");
    String age = (String) session.getAttribute("age");
    String weight = (String) session.getAttribute("weight");
    String sex = (String) session.getAttribute("sex");
    System.out.println("性別：A" + sex + "A");
    if (sex.trim().equals("M")) {
        sex = "男";
    } else {
        sex = "女";
    }
%>
<div align="center">
    <%=username%>
    <p>歡迎您剿另，登錄成功箫锤！</p><br/>
    <label style="color: blue">登錄用戶信息：</label>
    <table border="1">
        <tr>
            <td>姓名：</td>
            <td> <%=username%> </td>
        </tr>
        <tr>
            <td>年齡：</td>
            <td> <%=age%> </td>
        </tr>
        <tr>
            <td>體重：</td>
            <td> <%=weight%> </td>
        </tr>
        <tr>
            <td>性別：</td>
            <td> <%=sex%> </td>
        </tr>
    </table>
    <a href="login.jsp">返回</a>
</div>
</body>
</html>

• fail.jsp內(nèi)容

<%--
  Created by IntelliJ IDEA.
  User: xukui
  Date: 2017/7/22
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登錄失敗</title>
</head>
<body>
<%
    String username = (String) session.getAttribute("username");
    String msg = (String) session.getAttribute("message");
%>
</body>
<div align="center">
    <%=username%>
    <p>對不起，登錄失斢昱谚攒！</p><br/>
    <label style="color: red">原因：</label>
    <%=msg%><br/>
    <br/>
    <p>5秒后將返回登錄界面</p>
</div>

<%
    response.setHeader("Refresh", "5;URL=/Login/login.jsp");
%>
</html>

• web.xml內(nèi)容

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<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>Archetype Created Web Application</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>login.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

  <!-- 添加servlet -->
  <servlet>
    <servlet-name>LoginTestServlet</servlet-name>
    <servlet-class>com.ken.LoginTestServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>LoginTestServlet</servlet-name>
    <url-pattern>/loginTestServlet</url-pattern>
  </servlet-mapping>
</web-app>

• 對應(yīng)的數(shù)據(jù)庫和表

CREATE DATABASE study;
CREATE TABLE userInfo (
    id INT NOT NULL PRIMARY KEY,
    username CHAR(20) NOT NULL,
    userpsw CHAR(20),
    age INT,
    weight INT,
    sex ENUM('M', 'F')
);

• 附上運(yùn)行后的效果

image.png

image.png

image.png