用Servlet進行使用者名稱和密碼校驗

Yy_Gg發表於2019-03-30
Servlet密碼

用Servlet進行使用者名稱和密碼校驗

學號：201631062509

姓名：楊菓

1.效果圖

主介面圖

使用者名稱為空時

使用者名稱或密碼錯誤

登入成功

2.原始碼

Servlet

 1 import java.io.IOException;
 2 import javax.servlet.ServletException;
 3 import javax.servlet.annotation.WebServlet;
 4 import javax.servlet.http.HttpServlet;
 5 import javax.servlet.http.HttpServletRequest;
 6 import javax.servlet.http.HttpServletResponse;
 7 
 8 /**
 9  * Servlet implementation class check
10  */
11 @WebServlet("/check")
12 public class check extends HttpServlet {
13     private static final long serialVersionUID = 1L;
14        
15     /**
16      * @see HttpServlet#HttpServlet()
17      */
18     public check() {
19         super();
20         // TODO Auto-generated constructor stub
21     }
22 
23     /**
24      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
25      */
26     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
27         // TODO Auto-generated method stub
28         request.setCharacterEncoding("UTF-8");
29         response.setContentType("text/html;charset=UTF-8");
30         
31         String userName = request.getParameter("checkInID");
32         String userPass = request.getParameter("checkInPass");
33         
34         response.getWriter().write("使用者名稱：" + userName);
35         response.getWriter().write("</br>");
36         response.getWriter().write("密碼：" + userPass);
37     }
38 
39     /**
40      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
41      */
42     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
43         // TODO Auto-generated method stub
44         doGet(request, response);
45     }
46 
47 }
48 
49 servlet
Servlet

HTML

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>登入</title>
 6         <link href="style/loginP.css" type="text/css" rel="stylesheet"/>
 7         <script type="text/javascript" src="script/identify.js"></script>
 8     </head>
 9     <body>
10         <div id="topBar">
11             <div class="topContent">
12                 <i></i>
13                 <p>西南石油大學新聞釋出後臺登入</p>
14                 <span>幫助</span>
15             </div>
16         </div>
17 
18         <div id="main">
19             <div id="sign_in_part" class="login_form">
20                 <p class="title_caption">賬號登入</p>
21                 <div class="login_block">
22                     <form method="post" action="check" id="loginForm" onsubmit="return checkForm()">
23                         <fieldset>
24                             <h1 id="login-info">使用者登入</h1>
25                             <div class="login_input">
26                                 <input type="text" id="checkInID" name="checkInID" placeholder="請輸入賬號" required/>
27                                 <div class="clear"></div>
28                             </div>
29                             <div class="login_input">
30                                 <input type="password" id="checkInPass" name="checkInPass" placeholder="請輸入密碼" required/>
31                                 <div class="clear"></div>
32                             </div>
33                             
34                             <div class="login_sub_in">
35                                 <button type="submit" value="登入" id="subBut">登入</button>
36                             </div>
37                         </fieldset>
38                     </form>
39                 </div>
40             </div>
41         </div>
42         <div id="foot">
43             <p>西南石油大學登入</p>
44         </div>
45     </body>
46 </html>
47 
48 HTML
HTML

JS

 1 function checkForm(){
 2     var subButton = document.getElementById("subBut");
 3     var userID = document.getElementById("checkInID");
 4     var userP = document.getElementById("checkInPass");
 5     
 6     if(userID.value == "" || userP.value == ""){
 7         var info = document.getElementById("login-info");
 8         var infoStyle = info.style;
 9         infoStyle.visibility = "visible";
10         info.innerText = "請輸入使用者名稱";
11         return false;
12     }else{
13         return true;
14     }
15 }
JS

CSS

  1 .h{
  2     width: 964px;
  3     margin: 0 auto;
  4 }
  5 *{
  6     margin: 0;
  7     padding: 0;
  8 }
  9 .t{
 10     height: 95px;
 11     line-height: 90px;
 12     background-color:#f5f5f5 ;
 13     border-bottom-width: 1px;
 14     border-bottom-style: solid;
 15     border-bottom-color: #e5ecf0;
 16     overflow:hidden;
 17 }
 18 .logo{
 19     padding-top: 15px;
 20     float: left;
 21 }
 22 .help{
 23     float: right;
 24     font-size: 14px;
 25     font-weight: 700;
 26     color: #787878;
 27     text-decoration: none;
 28 }
 29 body{
 30     font-family: "微軟雅黑",verdana,geneva,sans-serif;
 31     font-size: 12px;
 32     background: #fff;
 33 }
 34 .box{
 35     width: 376px;
 36     position: absolute;
 37     box-shadow: 0px 0px 5px rgba(0,0,0,0,4);
 38 }
 39 .c{
 40     width: 964px;
 41     height: 460px;
 42     margin: 20px auto 0 auto;
 43     background: url(../img/backimg.png) no-repeat;
 44     background-attachment: scroll;
 45     background-repeat: no-repeat;
 46     background-position-x: 0%;
 47     background-position-y: 0%;
 48     background-size: cover;
 49     background-origin: padding-box;
 50     background-clip: border-box;
 51     background-color: transparent;
 52     position: relative;
 53 }
 54 .tab li.current{
 55     background-attachment: scroll;
 56     background-repeat: repeat;
 57     background-size: auto;
 58     background: #ff7e00;    
 59 }
 60 .tab li.dragbar{
 61     width: 22px;
 62     cursor: move;
 63     overflow: hidden;
 64 }
 65 .tab li{
 66     height: 40px;
 67     line-height: 40px;
 68     float: left;
 69     width: 354px;
 70     text-align: center;
 71     background: #333;
 72     color: #fff;
 73     font-size: 16px;
 74     cursor: pointer;
 75 }
 76 .msg{
 77     position: absolute;
 78     background: #cc3300;
 79     color: #FFFFFF;
 80     padding: 0 10px;
 81     font-size: 14px;
 82 }
 83 ul{
 84 list-style-type: none;
 85 list-style-position: outside;
 86 list-style-image: none;
 87 }
 88 .tab{
 89     border-bottom: 3px solid rgba(255,126,0,0.8);
 90     overflow: hidden;
 91 }
 92 .boxc{
 93     background: #FFFFFF;
 94     padding: 20px 0 30px 42px;
 95 }
 96 .text{
 97     height: 36px;
 98     line-height: 36px;
 99     outline: none;
100     width: 280px;
101     border: 1px solid #c7c7c7;
102     background: #f3f3f3;
103     border-radius: 1px;
104     padding: 0 5px;
105     font-family: "微軟雅黑";
106 }
107 .text_item{
108     height: 38px;
109     line-height: 38px;
110     width: 292px;
111     margin: 15px 0 30px 0;
112 }
113 .btnb{
114     margin: 20px 0 0 0;
115     width: 292px;
116     position: relative;
117 }
118 .btn{
119     height: 38px;
120     width: 142px;
121     border: none;
122     color: #fff;
123     font-weight: 400;
124     font-size:20px;
125     font-family: "微軟雅黑";    
126 }
127 .nouser{
128     position: absolute;
129     background: #CC3300;
130     color: #fff;
131     padding: 0 10px;
132     font-size: 14px;
133     height: 30px;
134     line-height: 30px;
135     left: 42px;
136     right: 42px;
137     text-align: center;
138     display: none;
139 }
CSS

3.百度雲地址

 連結：https://pan.baidu.com/s/1WW7SFCFCT2VOOoobdt9zmg
提取碼：p6bi

相關文章