使用JSP實作登錄注冊案例

合工大Java實驗4--JavaWeb編程

一級目錄
- 二級目錄
- - 三級目錄
  - 一、Tomcat安裝、配置
  - - 1、下載
    - 2、修改tomcat服務埠
  - 二、HTML表單(form)
  - - form表單
    - - post和get的區別(這個前端面試的時候也是一個高頻問題)
    - input標簽
    - select下拉選單
  - 三、布局方式
  - - 表格布局
    - flex布局
  - 四、功能實作
  - - 1、創建JavaWeb專案
    - 2、根據實驗要求設計檔案目錄
    - 3、連接Tomcat服務器
    - 4、JSP的介紹和吐槽
    - 5、頁面設計(register.jsp和login.jsp)
    - 6、checkAll()的正則檢查(非必要)
    - 7、注冊功能的實作(doregister.jsp)
    - 8、登錄功能的實作(dologin.jsp)

一級目錄

二級目錄

三級目錄

一、Tomcat安裝、配置

1、下載

下載地址：https://tomcat.apache.org/，選擇版本盡力選擇tomcat8以上，

在這里插入圖片描述

tomcat的下載比較方便，只需要下載zip壓縮包，選擇一個無中文名目錄(最好無中文，不然之后可能會出莫名其妙的bug)下解壓即可，

然后和Java一樣，tomcat也可以設定環境變數，不過如果使用的是IDEA的話，不設定環境變數問題也不大，

在這里插入圖片描述

2、修改tomcat服務埠

在tomcat檔案夾–>conf–>server修改即可，
在這里插入圖片描述

如果使用的是IDEA的話，待會可以直接在IDEA中配置，

二、HTML表單(form)

form表單

首先普及一下form的的幾個基本屬性

action：提交地址
method：提交方式，常用為(get、post、put、delete)
onsubmit：可以用js進行事件編程，寫一些簡單的正則運算式,用于前端的校驗，防止后端出現不必要的錯誤

需要注意的是form表單中的表單項必須要有的屬性是：name屬性，用于表示該項的資料，

post和get的區別(這個前端面試的時候也是一個高頻問題)

get提交方式：

將用戶資訊提交到地址欄上,后臺服務器地址url?key1=value1&key2=value2…
get提交的資料大小有限（不超過4KB）
get方式不適合提交敏感資料，例如：密碼
密碼要提交：需要密碼加密

post提交方式：

資料不會提交到地址欄上，http網路協議、一堆服務器回應頭資訊、瀏覽器請求頭資訊
物體內容：formData，key1=value1&key2=value2…
提交資料大小沒有限制
適合敏感資料（密碼需要特定加密）

get一般用于從后端獲取大量資料，而post一般是將前端的資料資訊傳給后端，回傳一個成功或者失敗，

input標簽

input標簽就是輸入框，輸入框分為很多種，比如用戶名的輸入框和密碼的輸入框就需要不同，密碼會自動隱藏成為一個黑點，而用戶名直接顯示，這種顯示方式的不同就是通過input的type實作的，

input標簽的type有如下幾種屬性值

type=“text”:文本輸入框
type=“password”：密碼輸入框
type=“radio”:單選按鈕
type=“checkbox”:復選框
type=“date”(h5提供的日期組件）
type=“tel”(h5提供的組件）
type=“file”:上傳檔案
type=“button”:普通按鈕，必須指定value屬性
type=“submit”:提交
type=“reset”:重置按鈕
type=”hidden":隱藏域

這個Java實驗中需要用到的是text、password和submit，當然如果你想要增添一些功能也可以嘗試一下reset等，

select下拉選單

實驗中要求的性別選擇就是通過下拉選單來實作的，select的一般書寫格式如下：

<select  id="sex" name="sex" >
  <option value="male">男</option>
  <option value="female">女</option>
</select>

select表示一整個下拉選單，option表示下拉選單中的選項，

三、布局方式

表格布局

<table>
    <tr>
        <td></td>
    </tr>
     <tr>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<!--  換行還可以采用<br/>   -->

這種是最簡單的可以適用于表單布局的方式，可以實作換行，但是樣式就比較丑了，因為不會自動調整縮進，

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SuBW7QMw-1635403775765)(C:\Users\86135\AppData\Roaming\Typora\typora-user-images\image-20211028141345741.png)]$

flex布局

是目前前端十分流行的一種布局方式，入門簡單，并且真的香，想要把表單做的好看一些的同學，可以來看看我之前發的關于flex的博客：flex布局詳細介紹

flex實作居中：

.register{
    display: flex;
    justify-content: center;
    align-items: center;
  }

另外了解一些些CSS的樣式

border：邊框屬性
- 1px solid rgb(0,0,0) ----->寬度為1px，實線，黑色(照著改就能設基礎自己喜歡的樣式了)
- 如果只寫border的話默認是四個角都會改變，如果只想改變一個角的話，可以通過border-top-right這種形式選擇一個角，
color：字體顏色
- rbg(0,0,0)，
background-color：背景顏色
- rgb(0,0,0)，
border-radius：邊框半徑(做圓角用的)
- 1px —>半徑為1px，
margin：邊距
- 比如你覺得這個元素和上一個元素離得太近了，就可以通過margin-top:5px;讓他離上一個元素遠5px，

四、功能實作

講了這么多，接下來就來實作一下實驗四，(編譯器：IDEA)

1、創建JavaWeb專案

在這里插入圖片描述

2、根據實驗要求設計檔案目錄

在這里插入圖片描述

3、連接Tomcat服務器

在上方工具列找到編譯
在這里插入圖片描述

上文說如果使用IDEA就可以直接在IDEA配置服務器埠名了，就是在這里配置的，

在這里插入圖片描述

4、JSP的介紹和吐槽

? 其實我不是很理解為什么JavaWeb的實驗需要我們用JSP來完成，應該這個技術已經過時了，可能十年前還會用這個技術吧，JSP的優勢在于將前后端糅合在一起寫，你設定可以在一個JAVA陳述句中穿插JavaScript的陳述句，顯得特別方便，特別高效，但是一旦工程量大起來，就分不清哪個是前端哪個是后端了，在MVC模式流行的時候其實JSP就已經被淘汰了，現在主流的MVVM模式下，JSP就…不用多言，不過這簡單的案例使用JSP實作確實比前后端分離實作上手難度低很多，可能這就是目的所在吧，

我其實對JSP的了解并不深，因為平時沒怎么用過，大家如果遇到問題的話可以參考這篇博客，我覺得說的挺全面的：JSP知識詳解

5、頁面設計(register.jsp和login.jsp)

最最簡單的方式(只通過br分段)：

<html>
	<head>
		<meta charset="UTF-8">
		<title>注冊</title>
	</head>
	<body>
		<form id="registerForm" action="doRegister.jsp" method="post" onsubmit="return checkAll()">
			用戶名：<input type="text"  name="username" /><br  />
			密&nbsp;&nbsp;碼:<input type="password" name="pwd"  /><br  />
            <select  id="sex" name="sex" >
              <option value="male">男</option>
              <option value="female">女</option>
            </select><br  />
			<input type="submit" value="提交"  />
		</form>
	</body>
</html>

或者可以通過table：

<form id="registerForm" action="doRegister.jsp" method="post" onsubmit="return checkAll()">
      <table>
        <tr>
          <td>
            <label for="username">用戶名:</label>
          </td>
          <td>
            <input type="text" id="username" name="username" placeholder="請輸入賬號">
          </td>
        </tr>
        <tr>
          <td>
            <label for="password">密碼:</label>
          </td>
          <td>
            <input type="password" id="password" name="password" placeholder="請輸入密碼">
          </td>
        </tr>
        <tr>
          <td>
            <label for="sex">性別:</label>
          </td>
          <td>
            <select  id="sex" name="sex" >
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </td>
        </tr>
      </table>
      <input type="submit" value="注冊">
    </form>

使用flex布局并設定樣式(只是簡單設計布局一下，樣式沒有細調)：
在這里插入圖片描述

<body>
<div class="outer">
  <div class="register">
    <div class="title">注冊界面</div>
    <form class="infoList" id="registerForm" action="doRegister.jsp" method="post" onsubmit="return checkAll()">
      <table>
        <tr>
          <td class="td_left">
            <label for="username">用戶名:</label>
          </td>
          <td class="td_right">
            <input type="text" id="username" name="username" placeholder="請輸入賬號">
          </td>
        </tr>
        <tr>
          <td class="td_left">
            <label for="password">密碼:</label>
          </td>
          <td class="td_right">
            <input type="password" id="password" name="password" placeholder="請輸入密碼">
          </td>
        </tr>
        <tr>
          <td class="td_left">
            <label for="sex">性別:</label>
          </td>
          <td class="td_right gender">
            <select  id="sex" name="sex" >
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </td>
        </tr>
      </table>
      <input type="submit" class="submit" value="注冊">
      <button class="submit"><a href="login.jsp">前往登錄</a></button>
    </form>
  </div>
</div>

</body>
<style>
  .outer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .register{
    display: flex;
    margin-top: 300px;
    height: 170px;
    width: 300px;
    border: 1px solid rgb(104,124,148);
    border-radius: 10px;
    background-color: rgb(255,255,255);
    flex-wrap: wrap;
    justify-content: center;
  }
  .title{
    width: 100%;
    height: 35px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: rgb(104,124,148);
    color: white;
    font-size: 17px;
    display: flex;
    align-items: center;
    padding-left: 8px;
  }
  .infoList{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .td_left{
    width: 30%;
    height: 25px;
    align-items: center;
    text-align: right;
  }
  .td_right{
    width: 70%;
    height: 25px;
  }
  input{
    background:none;
    outline:none;
    border:none;
    border-bottom: 1px solid rgb(104,124,148) ;
  }
  input:focus{
    border: none;
    border-bottom: 1px solid rgb(104,124,148) ;
  }
  .submit{
    height: 30px;
    width: 80px;
    margin-left: 10px;
    border: 1px solid rgb(104,124,148);
    border-radius: 2px;
    margin-bottom: 10px;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  a:link {
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
  a:active {
    text-decoration: none;
  }
 </style>

制作完注冊界面之后，登錄界面其實只需要復制粘貼改一下下就好了，
在這里插入圖片描述

<%@ page import="java.security.PublicKey" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登錄</title>
</head>

<%--下面就是玄學前后端代碼寫在一起，我第一次見的時候驚呆了，代碼還可以這樣玩--%>
<%
    String msg = (String)request.getAttribute("feedback");         // 獲取錯誤屬性
    if(msg != null) {
%>
<script type="text/javascript" language="javascript">
    alert("<%=msg%>");                                            // 彈出錯誤資訊
</script>
<%
    }
%>

<body>
<div class="outer">
    <div class="login">
        <div class="title">登錄界面</div>
        <form class="infoList" id="loginForm" action="doLogin.jsp" method="post">
            <table style="width: 100%">
                <tr>
                    <td class="td_left">
                        <label for="username">用戶名:</label>
                    </td>
                    <td class="td_right">
                        <input type="text" id="username" name="username" placeholder="請輸入賬號">
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="password">密碼:</label>
                    </td>
                    <td class="td_right">
                        <input type="password" id="password" name="password" placeholder="請輸入密碼">
                    </td>
                </tr>
            </table>
            <input type="submit" class="submit" value="登錄">
            <button class="submit"><a href="register.jsp">回傳注冊</a></button>
        </form>
    </div>
</div>

</body>
<style>
    .outer{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
    }
    .login{
        margin-top: 370px ;
        display: flex;
        height: 150px;
        width: 300px;
        border: 1px solid rgb(104,124,148);
        border-radius: 10px;
        background-color: rgb(255,255,255);
        flex-wrap: wrap;
        justify-content: center;
    }
    .title{
        width: 100%;
        height: 35px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        background-color: rgb(104,124,148);
        color: white;
        font-size: 17px;
        display: flex;
        align-items: center;
        padding-left: 8px;
    }
    .infoList{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .td_left{
        width: 30%;
        height: 25px;
        align-items: center;
        text-align: right;
    }
    .td_right{
        width: 70%;
        height: 25px;
    }
    input{
        background:none;
        outline:none;
        border:none;
        border-bottom: 1px solid rgb(104,124,148) ;
    }
    input:focus{
        border: none;
        border-bottom: 1px solid rgb(104,124,148) ;
    }
    .submit{
        height: 30px;
        width: 80px;
        border: 1px solid rgb(104,124,148);
        border-radius: 2px;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    a {
        text-decoration: none;
        color: #000;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    a:active {
        text-decoration: none;
    }
</style>
</html>

6、checkAll()的正則檢查(非必要)

 <%--
    上面的form的onsubmit屬性為"return checkAll()"，意思是說，在點擊input的type為submit的標簽后，發送表單至"doregister.jsp"之前會判斷checkAll()的值，如果checkALL為true就發送，如果為false就不發送，
--%>
<script>
    function checkAll() {
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var reg_username = /^\w{2,20}$/;   //自定義的正則運算式，意思是需要2-20個字符
        var reg_password = /^\w{8,20}$/;   //自定義的正則運算式，意思是需要8-20個字符
        var flag_username = reg_username.test(username.value);
        var flag_password = reg_password.test(password.value);
        if (flag_username == false){
            alert("用戶名需為2-20為字符");//彈窗
            return false;
        }else if(flag_password == false){
            alert("密碼需為8-20為字符");//彈窗
            return false;
        }
        return true;
    }
  </script>

7、注冊功能的實作(doregister.jsp)

request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");  //得到請求中為username的value值，與前面														form中name="username"的標簽對應
session.setAttribute("username" , username);
String password=request.getParameter("password");   //得到請求中為password的value值，與前面														   form中name="password"的標簽對應
session.setAttribute("password", password);
String sex = (String) request.getParameter("sex");   //得到請求中為sex的value值，與前面														        form中name="sex"的標簽對應
session.setAttribute("sex", sex);
String msg = "username:" + username + ",password:"  + password +",sex:" + sex;

//因為前端已經通過正則校驗過了，索引這里就不用判斷是否為空，
BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(new FileOutputStream("Z:\\@大二上\\Java\\code\\Experiment4\\src\\user.txt",true),"GBK"));
//true表示，不會覆寫檔案之前的內容，
bufferedWriter.write(msg + '\n');
bufferedWriter.close();

8、登錄功能的實作(dologin.jsp)

request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
session.setAttribute("username" , username);
String password=request.getParameter("password");
session.setAttribute("password", password);
String sex = (String) request.getParameter("sex");
session.setAttribute("sex", sex);

BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(new FileInputStream("Z:\\@大二上\\Java\\code\\Experiment4\\src\\user.txt"),"GBK"));
String newMsg;
boolean idFlag = false;
boolean passwordFlag = false;
String feedback = "";
while( (newMsg = bufferedReader.readLine()) != null) {
    Map<String,String> map=new HashMap<String, String>();
    String[] a = newMsg.split(",");//以，為切割把string轉成string陣列
    for(String str:a){
        String[] b=str.split(":");
        map.put(b[0],b[1]);
    }
    System.out.println(map);
    if (map.get("username").equals(username)){
        idFlag = true;
        if(map.get("password").equals(password)){
            passwordFlag = true;
        }
    }
}
if (idFlag == true && passwordFlag == true)
    feedback = "登錄成功!";
else if(idFlag == false)
    feedback = "用戶不存在，請檢查用戶名！";
else if (passwordFlag == false)
    feedback = "密碼錯誤！";

request.setAttribute("feedback", feedback);
request.getRequestDispatcher("login.jsp").forward(request, response);
//將反饋回傳至前端，告訴用戶登錄結果
bufferedReader.close();

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/340738.html

標籤：java

上一篇：為什么重寫equals()就要重寫hashCode()

下一篇：HashMap底層特性全決議

合工大軟體工程Java實驗4--JavaWeb編程

合工大Java實驗4--JavaWeb編程

一級目錄

二級目錄

三級目錄

一、Tomcat安裝、配置

1、下載

2、修改tomcat服務埠

二、HTML表單(form)

form表單

post和get的區別(這個前端面試的時候也是一個高頻問題)

input標簽

select下拉選單

三、布局方式

表格布局

flex布局

四、功能實作

1、創建JavaWeb專案

2、根據實驗要求設計檔案目錄

3、連接Tomcat服務器

4、JSP的介紹和吐槽

5、頁面設計(register.jsp和login.jsp)

6、checkAll()的正則檢查(非必要)

7、注冊功能的實作(doregister.jsp)

8、登錄功能的實作(dologin.jsp)