标签：ali Stub baidu import 账号 content script javascrip style
用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
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
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 }
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 }
3.百度云地址
链接：https://pan.baidu.com/s/1WW7SFCFCT2VOOoobdt9zmg
提取码：p6bi
标签：ali Stub baidu import 账号 content script javascrip style
原文地址：https://www.cnblogs.com/Yy-Gg/p/10627608.html
