商城登录页面（前端+后端代码）（新）
程序员文章站
2022-04-25 07:52:04
...
登录页面（前端）
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
#bottom {
color: black;
height: auto;
width: auto;
text-align: center;
margin-top: 310px;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.main{
width: 100%;
height: 100%;
background: url("../../static/img/wlog/sit2.jpg") 100% 100% no-repeat;
}
.loginFrame{
width: 700px;
height: 400px;
background: rgba(0,0,0,0.2);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 10px;
padding: 50px 0;
box-sizing: border-box;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
}
.loginFrame > div{
width: 350px;
height: 50px;
margin: 40px auto;
color: white;
font-size: 20px;
}
.loginFrame > p{
text-align: center;
color: white;
font-size: 25px;
}
.loginFrame > div > span{
display: inline-block;
cursor: pointer;
font-size: 20px;
}
.loginFrame > div input{
width: 100%;
height: 30px;
background: transparent;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 20px;
}
.loginFrame .enterbtn{
width: 200px;
height: 50px;
border-radius: 50px;
background-image: linear-gradient(to right, #c979d4,#fa719d);
text-align: center;
padding-top: 10px;
box-sizing: border-box;
font-size: 20px;
cursor: pointer;
}
.loginFrame .enterbtn:hover{
box-shadow: 0 0 10px rgba(0,0,0,0.4) inset;
}
input::-webkit-input-placeholder{
color: #BDCADA;
}
svg{
vertical-align: bottom;
}
#jump_regist {
padding-right: 50px;
float: right;
font-size: 20px;
text-decoration: none;
color: #fff6d2;
}
.loginTitle{
margin-left: 0px;
}
.errorMsg{
float: right;
margin-right: 100px;
margin-top: -35px;
color: #fa719d;
font-size: 18px;
}
</style>
</head>
<body>
<!--背景-->
<div class="main">
<!-- 登录框-->
<form action="http://localhost:8080/userServlet" method="post">
<input type="hidden" name="action" value="login">
<div class="loginFrame">
<!-- 边框-->
<p class="loginTitle">Login</p>
<a id="jump_regist" href="./regist.jsp">立即注册</a>
<!-- 用户名-->
<div class="user">
<label>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="25" height="25" t="1605540774013" p-id="3488" version="1.1"><path fill="#ffffff" d="M 749.4 376.2 c 0 -150.2 -120.1 -270.3 -270.3 -270.3 S 208.8 226.1 208.8 376.2 c 0 102.1 54.1 189.2 138.2 234.3 c -114.1 45.1 -201.2 144.2 -225.3 270.3 c -3 15 6 33 24 36 h 6 c 15 0 27 -9 30 -24 c 27 -141.2 150.2 -243.3 294.3 -246.3 h 6 c 144.2 0.1 267.4 -123.1 267.4 -270.3 Z m -480.6 0 C 268.8 259.1 361.9 166 479 166 s 210.2 93.1 210.2 210.2 c 0 114.1 -93.1 207.2 -207.2 210.3 h -9 c -114.1 -6 -204.2 -99.1 -204.2 -210.3 Z m 417.5 270.4 c 0 18 12 30 30 30 h 150.2 c 18 0 30 -12 30 -30 s -12 -30 -30 -30 H 716.4 c -15.1 -0.1 -30.1 11.9 -30.1 30 Z m 180.2 87.1 H 626.2 c -18 0 -30 12 -30 30 s 12 30 30 30 h 240.3 c 18 0 30 -12 30 -30 c 0.1 -18 -11.9 -30 -30 -30 Z m 0 120.1 H 629.3 c -18 0 -30 12 -30 30 s 12 30 30 30 h 237.3 c 18 0 30 -12 30 -30 s -15.1 -30 -30.1 -30 Z m 0 0" p-id="3489" /></svg>
</span>
<span>用户名</span>
<span class="errorMsg">${requestScope.msg==null?"":requestScope.msg}</span>
<input name="username" type="text" placeholder=" username">
</label>
</div>
<!-- 密码-->
<div class="password">
<label>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="25" height="25" t="1605540924306" p-id="927" version="1.1"><path fill="#3793df" d="M 785.067 892.587 H 238.933 c -37.5467 0 -68.2667 -32.4267 -68.2667 -71.68 V 450.56 c 0 -39.2533 30.72 -71.68 68.2667 -71.68 h 546.133 c 37.5467 0 68.2667 32.4267 68.2667 71.68 v 370.347 c 0 39.2533 -30.72 71.68 -68.2667 71.68 Z M 238.933 447.147 v 373.76 c 0 1.70667 1.70667 3.41333 1.70667 3.41333 H 785.067 V 450.56 c 0 -1.70667 -1.70667 -3.41333 -1.70667 -3.41333 H 238.933 Z" p-id="928" /><path fill="#3793df" d="M 682.667 448.853 H 341.333 v -145.067 c 0 -93.8667 76.8 -170.667 170.667 -170.667 c 44.3733 0 87.04 17.0667 121.173 47.7867 C 665.6 213.333 682.667 256 682.667 303.787 v 145.067 Z m -273.067 -68.2667 h 204.8 v -76.8 c 0 -29.0133 -10.24 -54.6133 -29.0133 -73.3867 c -20.48 -18.7733 -46.08 -29.0133 -73.3867 -29.0133 c -56.32 0 -102.4 46.08 -102.4 102.4 v 76.8 Z" p-id="929" /><path fill="#eb4af4" d="M 512 713.387 c -18.7733 0 -34.1333 -15.36 -34.1333 -34.1333 v -136.533 c 0 -18.7733 15.36 -34.1333 34.1333 -34.1333 s 34.1333 15.36 34.1333 34.1333 v 136.533 c 0 18.7733 -15.36 34.1333 -34.1333 34.1333 Z" p-id="930" /><path fill="#eb4af4" d="M 512 696.32 m -68.2667 0 a 68.2667 68.2667 0 1 0 136.533 0 a 68.2667 68.2667 0 1 0 -136.533 0 Z" p-id="931" /></svg>
</span>
<span>密码</span>
<input name="password" type="password" placeholder=" password">
</label>
</div>
<!-- 登录按钮-->
<div class="enterbtn">
<input type="submit" value="登录" style="border: none;cursor: pointer">
</div>
<%@include file="../../common/footer.jsp"%>
</div>
</form>
</div>
</body>
</html>
用户登录（后端servlet）
public class UserServlet extends BaseServlet {
private UserService userService = new UserServiceImpl();
/**
* 登录的servlet
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
public void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*
1.获取输入的用户名和用户密码参数
2.调用服务层登录方法，
如果未查询到返回空值
跳转到当前页面
否则
跳转到登录成功页面
*/
String username = req.getParameter("username");
String password = req.getParameter("password");
User loginUser = userService.login(new User(null, username, password, null));
if (loginUser != null) {
req.getRequestDispatcher("pages/user/login_success.jsp").forward(req,resp);
}else {
// 在页面提示用户名或密码有误,方法：把错误信息和回显的表单项信息保存在req域中
// 但在一开始，EL表达式在输出null值时，输出空串，jsp表达式脚本输出null值时，输出的是null字符串
// 由于刚进入登录页面，服务器还没有获取参数调用登录功能，此时msg的信息还没有返回给客户端，此时在jsp页面用el表达式判断
req.setAttribute("msg","用户名或密码错误!");
req.getRequestDispatcher("pages/user/login.jsp").forward(req,resp);
req.setAttribute("msg","");
}
}
}
父类BaseServlet
public abstract class BaseServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String action = req.getParameter("action"); // 获取隐藏域的name值得请求参数
// if ("login".equals(action)){
// login(req,resp);
// }else if ("regist".equals(action)){
// regist(req,resp);
// }
try {
// 获取action业务鉴别字符串，获取对应业务 方法反射对象
// Method declaredMethod = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
Method declaredMethod = UserServlet.class.getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);
System.out.println(declaredMethod);
declaredMethod.invoke(new UserServlet(),req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
下一篇： 图文混排