springboot+mybatis-plus+freemarker+Ajax实现登录验证

最新推荐文章于 2023-08-23 09:13:25 发布

ITarmi

最新推荐文章于 2023-08-23 09:13:25 发布

阅读量681

点赞数

分类专栏： sb+mp+fm

本文链接：https://blog.csdn.net/ITarmi/article/details/108628251

版权

sb+mp+fm 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

pom文件中添加依赖

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-json</artifactId>
			<version>2.0.3.RELEASE</version>
			<scope>compile</scope>
		</dependency>

前端页面login_ajax.ftlh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
    <script type="text/javascript" src="./js/jquery-3.4.1.min.js">
    <!--需要引入js文件-->
    </script>
    <script type="text/javascript">
        function login() {
            var uname = $("#uname").val();
            var upwd = $("#upwd").val();
            if (uname == null || uname == "") {
                $("#unameMsg").html("用户名不能为空!");
                return;
            } else
                $("#unameMsg").html("");
            if (upwd.length == 0) {
                $("#upwdMsg").html("密码不能为空!");
                return;
            } else
                $("#upwdMsg").html("");
            if (upwd.length < 2 || upwd.length > 12) {
                $("#upwdMsg").html("密码应该在 2-12 位之间!");
                return;
            } else
                $("#upwdMsg").html("");
            $.ajax({
                url: "loginCheck",
                method: "post",
              <!--  contentType: 'application/json;charset=UTF-8',加了这句话后端无法获取到前端数据-->
                data: {
                    "uname": $("#uname").val(),
                    "upwd": $("#upwd").val(),
                    "role": $("#role").val()
                },
                success: function (result) {
                    if (result.msg == "1") {
                        window.location.href = "input";
                    } else {
                     $("#loginMsg").html("登录失败，请重试！");
                       <!--    $("#loginMsg").html(result.msg);-->
                    }
                },
                error: function () {
                    alert("请求服务器失败!");
                }
            });
        }

    </script>

</head>
<body>
<br><br>
<br><br>

<form name="loginForm" id="loginForm">
    <div class="center-block" style="width: 45%;height: 350px">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-apple"></span>用户登录

            </div>
            <div class="panel-body">
                <div class="text-success" align="center">
                    <h3>欢迎使用资源统一管理系统</h3>
                </div>
                <div class="input-group">
                    <label class="input-group-addon">用户名</label>
                    <input class="form-control" type="text" id="uname" name="uname" placeholder="请输入用户名">
                    <label class="input-group-addon text-warning">*</label>
                </div>
                <label id="unameMsg" style="color: red"></label><br>
                <div class="input-group">
                    <label class="input-group-addon">密&nbsp;&nbsp;&nbsp;码</label>
                    <input class="form-control" type="password" id="upwd" name="upwd" placeholder="请输入密码">
                    <label class="input-group-addon text-warning">*</label>
                </div>
                <label id="upwdMsg" style="color: red"></label><br>
                <div class="input-group">
                    <label class="input-group-addon">权&nbsp;&nbsp;&nbsp;限</label>
                    <select name="role" class="form-control ">
                        <option value="admin">管理员</option>
                        <option value="teacher">经理</option>
                        <option value="student">用户</option>
                    </select>
                </div>
            </div>
            <div align="center">
                <label id="loginMsg" style="color: red"></label>
                <a href="javascript:login()" class="btn btn-danger"><span
                        class="glyphicon glyphicon-log-in"></span> 登录</a>&nbsp;&nbsp;
                <a href="javascript:loginForm.reset()" class="btn btn-primary"><span
                        class="glyphicon glyphicon-remove"></span> 重置</a>
            </div>
            <br>
            <div class="panel-footer">
                <div align="center">
                    登陆注册 with Ajax

                </div>

            </div>

        </div>

    </div>
</form>


</body>
</html>

LoginController,接收前端数据，查询数据库进行判断是否登陆成功

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.Errors;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.example.demo.bean.Employee;
import com.example.demo.bean.User;
import com.example.demo.mapper.UserMapper;

@Controller
public class LoginController {
	@Autowired
	private UserMapper userMapper;

	@RequestMapping(value="loginCheck",method=RequestMethod.POST)
	@ResponseBody //由于@ResponseBody注解，将msg转成json格式返回
	public Map<String, String>  loginCheck(User user,Model model) {
		Map<String, String> map = new HashMap<>();
		List<User> lists = userMapper.selectPage(new Page<User>(1, 10),
				new EntityWrapper<User>().eq("uname", user.getUname()).eq("upwd", user.getUpwd()));
		if (lists.isEmpty()) {
//			System.out.println("111");
			map.put("msg", "0");
		} else {
//			System.out.println("000");
			map.put("msg", "1");
		}
		return map;
	}
}

User类

package com.example.demo.bean;

import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;

//用来存放用户登录时，输入输出的信息
@TableName(value = "tbl_user")
public class User {
	@TableId(type = IdType.AUTO)
	private int id;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	private String uname;
	private String upwd;
	

	private String role;

	public String getUname() {
		return uname;
	}

	public void setUname(String uname) {
		this.uname = uname;
	}

	public String getUpwd() {
		return upwd;
	}

	public void setUpwd(String upwd) {
		this.upwd = upwd;
	}

	public String getRole() {
		return role;
	}

	public void setRole(String role) {
		this.role = role;
	}

}

UserMapper

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.example.demo.bean.User;

public interface UserMapper extends BaseMapper<User>{

}

数据库
在这里插入图片描述

ITarmi

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录