使用ajax和Springboot实现用户登录

于 2019-08-05 08:19:18 发布
阅读量2.9k 收藏 10
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arkitocy/article/details/98477405
版权

Controller代码

package com.cy.controller;

import com.cy.entity.User;
import com.cy.service.UserService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;


@RestController

public class UserController {
    @RequestMapping("getAll")
    public ArrayList<User> getAll() {
        UserService userService = new UserService();
        return userService.showAll();
    }

    @RequestMapping("delete")
    public Map remove(HttpServletRequest request) {
        UserService us = new UserService();
        String id = request.getParameter("id");
        boolean result = us.delete(id);
        Map map = new HashMap();
        map.put("result", result);
        return map;
    }

    @RequestMapping("login")
    @ResponseBody
    public Object login(@RequestBody User user) {

        UserService us = new UserService();
        if (us.loginUser(user.getUsername(), user.getPassword()).size() > 0) {
            return "success";
        } else {
            return "fail";

        }

    }


    @RequestMapping("register")
    @ResponseBody
    public Object register(@RequestBody User user) {

        UserService us = new UserService();
        if (us.registerUser(user.getUsername(), user.getPassword()) != null) {
            return "success";
        } else {
            return "fail";
        }

    }


    @RequestMapping("checkName")
    @ResponseBody
    public Map checkName(HttpServletRequest request) {
        UserService us = new UserService();
        String username = request.getParameter("username");
        User user = us.findByName(username);
        boolean result = false;
        if(user!=null){
            result = true;
        }
        Map map = new HashMap();
        map.put("result", result);
        return map;


    }

}

Service

package com.cy.controller;

import com.cy.entity.User;
import com.cy.service.UserService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;


@RestController

public class UserController {
    @RequestMapping("getAll")
    public ArrayList<User> getAll() {
        UserService userService = new UserService();
        return userService.showAll();
    }

    @RequestMapping("delete")
    public Map remove(HttpServletRequest request) {
        UserService us = new UserService();
        String id = request.getParameter("id");
        boolean result = us.delete(id);
        Map map = new HashMap();
        map.put("result", result);
        return map;
    }

    @RequestMapping("login")
    @ResponseBody
    public Object login(@RequestBody User user) {

        UserService us = new UserService();
        if (us.loginUser(user.getUsername(), user.getPassword()).size() > 0) {
            return "success";
        } else {
            return "fail";

        }

    }


    @RequestMapping("register")
    @ResponseBody
    public Object register(@RequestBody User user) {

        UserService us = new UserService();
        if (us.registerUser(user.getUsername(), user.getPassword()) != null) {
            return "success";
        } else {
            return "fail";
        }

    }


    @RequestMapping("checkName")
    @ResponseBody
    public Map checkName(HttpServletRequest request) {
        UserService us = new UserService();
        String username = request.getParameter("username");
        User user = us.findByName(username);
        boolean result = false;
        if(user!=null){
            result = true;
        }
        Map map = new HashMap();
        map.put("result", result);
        return map;


    }

}

前端页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>登陆</title>
    <link rel="stylesheet" href="css/auth.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="js/login.js"></script>
</head>

<body>
    <div class="lowin lowin-blue">
        <div class="lowin-brand">
            <!--<img src="static/kodinger.jpg" alt="logo">-->
        </div>
        <div class="lowin-wrapper">
            <div class="lowin-box lowin-login">
                <div class="lowin-box-inner">
                    <form>
                        <p>Sign in to continue</p>
                        <div class="lowin-group">
                            <label>用户名 <a href="#" class="login-back-link">Sign in?</a></label>
                            <input type="text" class="lowin-input" id="name" name="username" >
                            <p style="color:red;display: none" id="namep">用户名过长</p>
                            <p style="color:red;display: none" id="namepp" >名字不为空</p>
                        </div>
                        <div class="lowin-group password-group">
                            <label>密码 </label>
                            <input type="password" class="lowin-input" id="pwd" name="userpwd" >
                            <p style="color:red;display: none" id="pwdp" >密码不为空</p>
                        </div>
                        <br>
                        <button type="button" class="lowin-btn login-btn" id="btn" name="btn">
                            登陆
                        </button>
                        <div class="text-foot">
                            没有账号？ <a href="register.html" class="register-link">注册</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

<script src="js/auth.js"></script>
<script>
    Auth.init({
        login_url: '#login',
        forgot_url: '#forgot'
    });
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="css/auth.css">
    <script src="js/register.js"></script>
</head>

<body>
<div class="lowin lowin-blue">
    <div class="lowin-brand">
        <!--<img src="static/kodinger.jpg" alt="logo">-->
    </div>
    <div class="lowin-wrapper">
        <div class="lowin-box lowin-register">
            <div class="lowin-box-inner">
                <form>
                    <p>Let's create your account</p>
                    <div class="lowin-group">
                        <label>用户名</label>
                        <input type="text" id="name" name="username" class="lowin-input">
                        <p style="color:red;display: none" id="namep">用户名过长</p>
                        <p style="color:red;display: none" id="namepp">用户名不为空</p>
                        <p style="color:red;display: none" id="nameppp">用户名已被注册</p>
                    </div>
                    <div class="lowin-group">
                        <label>密码</label>
                        <input type="password" id="pwd" name="userpwd" class="lowin-input">
                        <p style="color:red;display: none" id="pwdp">密码应为6-15位</p>

                    </div>
                    <div class="lowin-group">
                        <label>再次输入密码</label>
                        <input type="password" id="pwd2" class="lowin-input">
                        <p style="color:red;display: none" id="pwd2p">密码应为6-15位</p>
                        <p style="color:red;display: none" id="pwd3p">两次密码必须相同</p>
                    </div>

                    <button type="submit" class="lowin-btn" id="btn" name="btn">
                        注册
                    </button>
                    <div class="text-foot">
                        已有账号？ <a href="login.html" class="login-link">登陆</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="js/auth.js"></script>
<script>
    Auth.init({
        login_url: '#login',
        forgot_url: '#forgot'
    });
</script>
</body>
</html>

JS代码

$(function () {
    $("#btn").attr('disabled', true);
    $("#namep").hide();
    $("#pwd").blur(function () {
        var pwd = $("#pwd").val();
        if (pwd.length == 0) {
            $("#pwdp").show();
            $("#btn").attr('disabled', true);
        } else {
            $("#pwdp").hide();
            $("#btn").attr('disabled', false);
        }
    });
    $("#name").blur(function () {
        var name = $("#name").val();
        if (name.length == 0) {
            $("#namepp").show();
            $("#btn").attr('disabled', true);
        } else if (name.length > 0) {
            $("#namepp").hide();
            $("#btn").attr('disabled', false);
        }
        if (/^[0-9a-zA-Z_]{1,30}$/.test(name)) {
            $("#namep").hide();
            $("#btn").attr('disabled', false);
        } else if (name.length > 30) {
            $("#namep").show();
            $("#btn").attr('disabled', true);
        }
    });

    $("button[name='btn']").click(function () {

        var adata = {
            "username": $("#name").val(),
            "password": $("#pwd").val()
        }
        var data = JSON.stringify(adata);
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: data,
            url: "login",
            success: function (res) {
                if (res != "" && res == "success") {
                    window.location.href = "index.html";
                } else {
                    alert("登陆失败");
                    window.location.href = "login.html";
                }
            },
            error: function () {
                window.location.href = "login.html";
            }
        });
    })

})


$(function () {
    $("#btn").attr('disabled',true);
    $("#namep").hide();
    $("#pwd").blur(function () {
        var pwd = $("#pwd").val();
        if (/^[0-9a-zA-Z_]{6,15}$/.test(pwd)) {
            $("#pwdp").hide();
            $("#btn").attr('disabled',false);

        } else  {
            $("#pwdp").show();
            $("#btn").attr('disabled',true);

        }
    });
    $("#pwd2").blur(function () {
        var pwd2 = $("#pwd2").val();
        if (pwd2 != $("#pwd").val()) {
            $("#pwd3p").show();
            $("#btn").attr('disabled',true);
        } else if (pwd2 == $("#pwd").val()) {
            $("#pwd3p").hide();
            $("#btn").attr('disabled',false);
        }
        if (pwd2.length == 0) {
            $("#pwd2p").show();
            $("#btn").attr('disabled',true);
        } else if (pwd2.length > 0) {
            $("#pwd2p").hide();
            $("#btn").attr('disabled',false);
        }
    });
    $("#name").blur(function () {
        var name = $("#name").val();
        if (this.value.length == 0) {
            $("#namepp").show();
            $("#btn").attr('disabled',true);
        } else if (name.length > 0) {
            $("#namepp").hide();
            $("#btn").attr('disabled',false);
        }
        if (/^[0-9a-zA-Z_]{1,30}$/.test(name)) {
            $("#namep").hide();
            $("#btn").attr('disabled',false);
        } else if (name.length > 30) {
            $("#namep").show();
            $("#btn").attr('disabled',true);
        }
        $.getJSON("checkName",{username:name},function (json) {
            console.log(json);
            var rs=json.result+"";
            console.log(rs);
            if(rs=='false'){
                $("#nameppp").hide();
                $("#btn").attr('disabled',false);
            }else {
                $("#nameppp").show();
                $("#btn").attr('disabled',true);
            }
        });
    });



    $("button[name='btn']").click(function () {

        var adata = {
            "username" : $("#name").val(),
            "password" : $("#pwd").val()
        }
        var data = JSON.stringify(adata);
        console.log(data);
        $.ajax({
            type : "POST",
            contentType : "application/json",
            data : data,
            url : "register",
            success: function (res) {
                console.log(res);
                if(res !="" &&res =="success"){
                    alert("注册成功");
                    window.location.href="login.html";
                }else{
                    alert("注册失败");
                    window.location.href="register.html";
                }
            },
            error: function () {
                alert("失败");
                window.location.href="register.html";
            }
        });
    })

})

效果
在这里插入图片描述
在这里插入图片描述

Arkcy
关注
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值