springboot 实现登陆界面

SpringBoot

包结构

com.example

后端

config -> 配置
controller -> 控制器
entity -> 实体类
mapper -> 实体类到数据库的映射，增删改查接口
service -> 服务
执行类

前端 & 配置

resources -> 前端页面和项目配置properties文件
static -> css js 图片
templates -> html
application.properties

测试

test -> junit 测试

web

创建springboot项目，勾选springweb lombok

controller

 @Controller
public class MainController{
    @RequestMapping("/index")
    @ResponseBody
    public String index(){
        return "欢迎访问主页";
    }
}

直接访问 http://localhost:8080/index

效果图

修改web相关配置

application.properties

 # 修改端口
server.port=80
# 注入方法： 在控制器中@Value("${test.data}") /n int data;
test.data=100

SpringSecurity

导入依赖

 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

自动生成随机密码

 Using generated security password: fb7206e9-378a-48be-828e-6d4e14e64b50

输入用户名和密码

登录成功

自定义密码

application.properties

 spring.security.user.name=test
spring.security.user.password=123456
spring.security.user.roles[0]=user
spring.security.user.roles[1]=admin

config

 @Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests()
                .antMatchers("/login").permitAll()
                .anyRequest().hasAnyRole("user","admin")
                .and()
                .formLogin();
    }
}

Mybatis

配置数据库

数据库密码格式

导入依赖

 <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

指定数据库信息

application.properties

 spring.datasource.url=jdbc:mysql://localhost:3306/study
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

mapper

 @Mapper
public interface MainMapper {
    @Select("select * from users where username = #{username}")
    UserData findUserByName(String username);
}

entity

 @Data
public class UserData {
    int sid;
    String username;
    String password;
    String role;
}

mapper和springsecurity结合

service

 @Service
public class UserAuthService implements UserDetailsService {
 
    @Resource
    MainMapper mapper;
 
    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        UserData data = mapper.findUserByName(username);
        if(data == null) throw new UsernameNotFoundException("用户 "+username+" 登录失败，用户名不存在！");
        return User
                .withUsername(data.getUsername())
                .password(data.getPassword())
                .roles(data.getRole())
                .build();
    }
}

config -> SecurityConfiguration

   @Resource
    UserAuthService service;
 
 
@Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth
                .userDetailsService(service)
                .passwordEncoder(new BCryptPasswordEncoder());
    }

Thymeleaf

导入依赖

 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

controller

 @RequestMapping("/index")
public String index(){
    return "index";
}

application.properties 识别前端文件 static -> css js 图片

 spring:
	mvc:
  	static-path-pattern: /static/**

导入前端

实现登陆页面

 <!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:th=http://www.thymeleaf.org
      xmlns:sec=http://www.thymeleaf.org/extras/spring-security>
<!--<![endif]-->
<!-- Begin Head -->
<head>
    <title>SplashDash</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="MobileOptimized" content="320">
    <!--Start Style -->
    <link rel="stylesheet" type="text/css" href="static/css/fonts.css">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/auth.css">
</head>
 
<body>
    <div class="ad-auth-wrapper">
        <div class="ad-auth-box">
            <div class="row align-items-center">
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="ad-auth-img">
                        <img src="static/picture/auth-img1.png" alt="">
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="ad-auth-content">
 
                        <form action="/doLogin" method="post">
                            <a href="index.html" class="ad-auth-logo">
                                <img src="static/picture/logo2.png" alt="">
                            </a>
                            <h2><span class="primary">Hello,</span>Welcome!</h2>
                            <p>Please Enter Your Details Below to Continue</p>
                            <div class="ad-auth-form">
                                <div class="ad-auth-feilds mb-30">
                                    <input name="username" type="text" placeholder="用户名" class="ad-input">
                                    <div class="ad-auth-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1    v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5    c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3    c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95    c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4    c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
                                    </div>
                                </div>
                                <div class="ad-auth-feilds">
                                    <input name="password" type="password" placeholder="密码" class="ad-input">
                                    <div class="ad-auth-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5    s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1    c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6    c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5    S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5    S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
                                    </div>
                                </div>
                            </div>
                            <input th:name="${_csrf.parameterName}" th:value="${_csrf.token}" type="hidden">
                            <div class="ad-other-feilds">
                                <div class="ad-checkbox">
                                    <label>
									<input type="checkbox" name="remember-me" class="ad-checkbox">
									<span>记住我</span>
									</label>
                                </div>
                                <a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
                            </div>
                            <div class="ad-auth-btn">
                                <button href="javascript:void(0);" class="ad-btn ad-login-member">登 陆</button>
                            </div>
                            <p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
                        </form>
                    </div>
                </div>
            </div>
            <div class="ad-notifications ad-error">
                <p><span>Duhh!</span>Something Went Wrong</p>
            </div>
        </div>
    </div>
</body>
 
</html>

用户名：Administrator

密码：123456

加密后密码：$2a$10$ai6p5IL2ILAR0G91246Z8eZ8az3dqazsLedTF/DMEPZLKzPdA5.a6

尽量用google ，试了一下 edge 和 firebox 没有登陆按钮

posted @ 2022-07-01 14:33 鱼子酱caviar 阅读(2818) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· springboot

· Mybatis

· SpringBoot整合SpringSecurity. 详细笔记 ----第二波

· SpringBoot 集成 SpringSecurity 的基本使用

· SpringBoot整合SpringSecurity. ----第一波 (了解咋用)

公告

昵称：鱼子酱caviar
园龄： 4年
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

鱼子酱

springboot 实现登陆界面

SpringBoot

包结构

web

SpringSecurity

Mybatis

Thymeleaf

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	@Controller
	public class MainController{
	@RequestMapping("/index")
	@ResponseBody
	public String index(){
	return "欢迎访问主页";
	}
	}

	# 修改端口
	server.port=80
	# 注入方法：在控制器中@Value("${test.data}") /n int data;
	test.data=100

	<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-security</artifactId>
	</dependency>

	spring.security.user.name=test
	spring.security.user.password=123456
	spring.security.user.roles[0]=user
	spring.security.user.roles[1]=admin

	@Configuration
	public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
	@Override
	protected void configure(HttpSecurity http) throws Exception {
	http
	.authorizeHttpRequests()
	.antMatchers("/login").permitAll()
	.anyRequest().hasAnyRole("user","admin")
	.and()
	.formLogin();
	}
	}

	<dependency>
	<groupId>org.mybatis.spring.boot</groupId>
	<artifactId>mybatis-spring-boot-starter</artifactId>
	<version>2.2.0</version>
	</dependency>
	<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	</dependency>

	spring.datasource.url=jdbc:mysql://localhost:3306/study
	spring.datasource.username=root
	spring.datasource.password=123456
	spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

	@Mapper
	public interface MainMapper {
	@Select("select * from users where username = #{username}")
	UserData findUserByName(String username);
	}

	@Data
	public class UserData {
	int sid;
	String username;
	String password;
	String role;
	}

	@Service
	public class UserAuthService implements UserDetailsService {

	@Resource
	MainMapper mapper;

	@Override
	public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
	UserData data = mapper.findUserByName(username);
	if(data == null) throw new UsernameNotFoundException("用户 "+username+" 登录失败，用户名不存在！");
	return User
	.withUsername(data.getUsername())
	.password(data.getPassword())
	.roles(data.getRole())
	.build();
	}
	}

	@Resource
	UserAuthService service;


	@Override
	protected void configure(AuthenticationManagerBuilder auth) throws Exception {
	auth
	.userDetailsService(service)
	.passwordEncoder(new BCryptPasswordEncoder());
	}

	<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>

	@RequestMapping("/index")
	public String index(){
	return "index";
	}

	<!DOCTYPE html>
	<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
	<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
	<!--[if !IE]><!-->
	<html lang="en" xmlns:th=http://www.thymeleaf.org
	xmlns:sec=http://www.thymeleaf.org/extras/spring-security>
	<!--<![endif]-->
	<!-- Begin Head -->
	<head>
	<title>SplashDash</title>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<meta name="MobileOptimized" content="320">
	<!--Start Style -->
	<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
	<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/auth.css">
	</head>

	<body>
	<div class="ad-auth-wrapper">
	<div class="ad-auth-box">
	<div class="row align-items-center">
	<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
	<div class="ad-auth-img">
	<img src="static/picture/auth-img1.png" alt="">
	</div>
	</div>
	<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
	<div class="ad-auth-content">

	<form action="/doLogin" method="post">
	<a href="index.html" class="ad-auth-logo">
	<img src="static/picture/logo2.png" alt="">
	</a>
	<h2><span class="primary">Hello,</span>Welcome!</h2>
	<p>Please Enter Your Details Below to Continue</p>
	<div class="ad-auth-form">
	<div class="ad-auth-feilds mb-30">
	<input name="username" type="text" placeholder="用户名" class="ad-input">
	<div class="ad-auth-icon">
	<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1 v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5 c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3 c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95 c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4 c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
	</div>
	</div>
	<div class="ad-auth-feilds">
	<input name="password" type="password" placeholder="密码" class="ad-input">
	<div class="ad-auth-icon">
	<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5 s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1 c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6 c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5 S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5 S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
	</div>
	</div>
	</div>
	<input th:name="${_csrf.parameterName}" th:value="${_csrf.token}" type="hidden">
	<div class="ad-other-feilds">
	<div class="ad-checkbox">
	<label>
	<input type="checkbox" name="remember-me" class="ad-checkbox">
	<span>记住我</span>
	</label>
	</div>
	<a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
	</div>
	<div class="ad-auth-btn">
	<button href="javascript:void(0);" class="ad-btn ad-login-member">登陆</button>
	</div>
	<p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
	</form>
	</div>
	</div>
	</div>
	<div class="ad-notifications ad-error">
	<p><span>Duhh!</span>Something Went Wrong</p>
	</div>
	</div>
	</div>
	</body>

	</html>