SpringBoot+Bootstrop实现无权限简单登录功能小Demo

SourceYang_A

已于 2024-06-18 15:54:10 修改

阅读量211

点赞数

文章标签： java mysql bootstrap

于 2021-03-24 10:23:25 首次发布

本文链接：https://blog.csdn.net/SourceYang_A/article/details/115162945

版权

Springboot

xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.property.mapper.UserMapper">

    <resultMap id="BaseResultMap" type="com.property.entity.User" >
        <result column="id" property="id" />
        <result column="username" property="username" />
        <result column="password" property="password" />
    </resultMap>

    <sql id="Base_Column_List">
                id,
                username,
                password
    </sql>

    <select id="login" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List" />
        from user
        where username = #{username}
        and password = #{password}
    </select>
</mapper>

mapper

package com.property.mapper;

import com.property.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;


/**
 * user
 * @author sourceyang
 * @date 2021/03/09
 */
@Mapper
public interface UserMapper {
  
    /**
     * [登录]
     * @author sourceyang
     * @date 2021/03/09
     **/
    User login(@Param("username") String name,@Param("password") String password);
}

service

package com.property.service;

import com.property.entity.User;

import java.util.List;

/**
 * user
 * @author sourceyang
 * @date 2021/03/09
 */
public interface UserService {
    /**
     * 登录
     *
     * @return*/
    public String login(String username, String password);

}

serviceimpl

package com.property.service.serviceImpl;

import com.property.entity.User;
import com.property.mapper.UserMapper;
import com.property.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * user
 * @author sourceyang
 * @date 2021/03/09
 */
@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;
    
    @Override
    public String login(String username, String password) {
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        User user1 = userMapper.getByUserName(user.getUsername());
        //判断用户名是否存在
        if(user1 != null){
            if (user1.getPassword().equals(user.getPassword())) {
                return  "登录成功";
            }else{
                return "账号或密码错误";
            }
        }else{
            return "该用户不存在";
        }
    }
}

controller

package com.property.controller;

import com.property.entity.User;
import com.property.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;


import java.util.List;

/**
 * user
 * @author sourceyang
 * @date 2021/03/09
 */
@RestController
@RequestMapping(value = "/user")
public class UserController {

    @Autowired
    private UserService userService;

    /***
     *  解决前端跨域请求 [注解]
     *  @CrossOrigin(origins = "*",maxAge = 8378)
     * */

    /**
     * [登录]
     * @author sourceyang
     * @date 2021/03/09
     * @return*/
    @CrossOrigin(origins = "*",maxAge = 8378)
    @RequestMapping("/login")
    public String login(String username, String password){
        return  userService.login(username,password);
    }

}

Bootstrop

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Material Admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
	<link rel="icon" type="image/png" href="../img/ai.png"/>
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap4.2.1.css"/>
	<link rel="stylesheet" type="text/css" href="assets/css/style.default.css"/>
  </head>
  <body>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎登录</h1>
                  </div>
                  <p>后台管理</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                  <form class="form-validate" id="loginFrom">
                    <div class="form-group">
                      <input id="username" type="text" name="username" required data-msg="请输入用户名" placeholder="用户名" class="input-material">
                    </div>
                    <div class="form-group">
                      <input id="password" type="password" name="password" required data-msg="请输入密码" placeholder="密码" class="input-material">
                    </div>
                    <button  class="btn btn-primary" type="button" style="width: 300px;margin-left: 15%;" onclick="login()">登录</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      </body>
</html>

javascript


	<script src="./assets/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8">    </script>
    <!-- JavaScript files-->
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script><!--表单验证-->
    <!-- Main File-->
    <script src="/PropertyHT/assets/js/front.js"></script>  
	<!-- alert  -->
	<script src="sweetalert/sweetalert-dev.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="sweetalert/sweetalert.css"/>
    <script type="application/javascript">
		/*登录*/
		function login(){
			var username=$("#username").val();
			var password=$("#password").val();
		    var data= {username:username,password:password};  
			$.ajax({
			type:"POST",
			url:"http://本机ip:后台端口/user/login",
			data:data,
			success:function(msg){
				if(msg  == "登录成功"){
					 swal("登录成功", "欢迎登录", "success");
					 sessionStorage.setItem("username",data.username)
					 //setTimeout 设置跳转页面时间
					 setTimeout(function(){window.location.href = "登录成功后设置跳转页面",1100})
				}else{
					swal("登录失败", "请输入正确的用户名和密码...", "error");
				}
			}
			
		   });
		}
    </script>

css

	<style type="text/css">
		.login-page::before{
			background: url(../img/登录背景图);
		}
	</style>

百度网盘
vendor 提取码：e8rd
assets 提取码: j7bn
sweetalert 提取码:42ax

SourceYang_A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot+Bootstrop实现无权限简单登录功能小Demo

Springbootxml<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.property.mapper.UserMapper"> <resultM
复制链接

扫一扫