系统登录前后端代码

前端

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>老年人能力评估系统-登录</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--导入angularJS文件-->
    <!--<script src="js/angular.min.js"></script>-->
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>

    <script>

        $(function () {
            //1.给登录按钮绑定单击事件
            $("#btn_sub").click(function () {
                //2.发送ajax请求，提交表单数据
                $.post("user/login",$("#loginForm").serialize(),function (data) {
                    //data : {flag:false,errorMsg:''}
                    if(data.flag){
                        //登录成功
                        location.href="index_1.html";
                    }else{
                        //登录失败
                        $("#errorMsg").html(data.errorMsg);
                    }
                });
            });
        });


        //3.处理响应结果



    </script>
</head>

<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
    <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">

    </div>
    <div class="login-box">
        <div class="title">
            <img src="images/login_logo.png" alt="">
            <span>能力评估系统登录</span>
        </div>
        <div class="login_inner">

            <!--登录错误提示消息-->
            <div id="errorMsg" class="alert alert-danger" ></div>
            <form id="loginForm" action="" method="post" accept-charset="utf-8">
                <input type="hidden" name="action" value="login"/>
                <input name="username" type="text" placeholder="请输入账号" autocomplete="off">
                <input name="password" type="password" placeholder="请输入密码" autocomplete="off">
                <div class="verify">
                    <input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src="checkCode?"+new Date().getTime();
                        }
                    </script>
                </div>
                <div class="submit_btn">
                    <button type="button"  id="btn_sub">登录</button>
                    <div class="auto_login">
                        <input type="checkbox" name="" class="checkbox">
                        <span>自动登录</span>
                    </div>
                </div>
            </form>
            <!--            <div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>      进行修改-->
            <div class="reg">没有账户？<a href="register.html;">立即注册</a></div>
        </div>
    </div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>

</html>

后端

package com.lianxi.pojo.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lianxi.pojo.domain.ResultInfo;
import com.lianxi.pojo.domain.User;
import com.lianxi.pojo.service.UserService;
import com.lianxi.pojo.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //1.获取用户名和密码数据
        Map<String,String[]> map=request.getParameterMap();
        //2.封装User对象
        User user=new User();
        try{
            BeanUtils.populate(user,map);
        }catch(IllegalAccessException e){
            e.printStackTrace();
        }catch(InvocationTargetException e){
            e.printStackTrace();
        }

        //3.调用Service查询
        UserService service=new UserServiceImpl();
        User u=service.login(user);
        ResultInfo info=new ResultInfo();


        //4.判断用户名或密码是否为null
        if(u==null){
            //用户名密码错误
            info.setFlag(false);
            info.setErrorMsg("用户名或密码错误");
        }
        //5.判断用户是否激活
        if(u!=null&&!"Y".equals(u.getStatus())){
            //用户尚未激活
            info.setFlag(false);
            info.setErrorMsg("您尚未激活，请激活");
        }

        //6.判断登录成功
        if(u!=null&&"Y".equals(u.getStatus())){
            //登录成功
            info.setFlag(true);
        }

        //响应数据
        ObjectMapper mapper=new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),info);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        this.doPost(request,response);

    }

}
posted @ 2025-02-20 18:41  呓语-MSHK  阅读(37)  评论(0)    收藏  举报