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 没有登陆按钮
浙公网安备 33010602011771号