商城登录页面（前端+后端代码）（新）

最新推荐文章于 2024-09-12 23:21:34 发布

程序彤

最新推荐文章于 2024-09-12 23:21:34 发布

阅读量5.1k

点赞数 10

分类专栏：商城项目文章标签： html jsp java web servlet

本文链接：https://blog.csdn.net/m0_47119598/article/details/109740145

版权

商城项目专栏收录该内容

17 篇文章 0 订阅

订阅专栏

登录页面（前端）

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();
        }
    }
}