springboot+gradle实现用户注册和登录（内存数据库的方式）

阳光穿透心脏的1/2处 2021-09-19 11:08 360阅读 0赞

**目录**

完整项目下载地址：

--------------------

创建项目 :[https://start.spring.io/][https_start.spring.io]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

gradle编译，和eclipse中导入项目，参考：[https://blog.csdn.net/qq\_40323256/article/details/90262363][https_blog.csdn.net_qq_40323256_article_details_90262363]

导入静态文件（css,js,img,bootstrap）和页面（index.html）:[https://pan.baidu.com/s/1UmKwjfMLCqpL4L4dZ\_KhTg][https_pan.baidu.com_s_1UmKwjfMLCqpL4L4dZ_KhTg]

提取码：k2rw

并创建UserController.java

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

UserController.java:

package com.sikiedu.userlogindemo.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    @RestController
    public class UserController {
    
    	@RequestMapping("/index.action")
    	public ModelAndView index(){
    		
    		return new 	ModelAndView("index.html");
    	}
    }

运行：访问到了index.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

导入thymeleaf（先在eclipse中安装thymeleaf，安装步骤：【help】-【eclipse marketplace】-【输入thymeleaf】）

**将index.html的顶部的<html>换成：  
  <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">**

index.html:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

将application.properties编码格式设为utf-8:

![20190517104850142.png][]![20190517104542522.png][]

application.properties：

#Thymeleaf 编码
    spring.thymeleaf.encoding=UTF-8
    #热部署静态文件
    spring.thymeleaf.cache=false
    #使用HTML5标准
    spring.thymeleaf.mode=HTML5
    
    #使用h2控制台
    spring.h2.console.enabled=true

总的目录结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

UserController.java;

package com.sikiedu.userlogindemo.controller;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.sikiedu.userlogindemo.domain.User;
    import com.sikiedu.userlogindemo.repository.UserRepository;
    
    @RestController
    public class UserController {
    
    	@Autowired
    	private UserRepository userRepository;
    	
    	@RequestMapping("/index.action")
    	public ModelAndView index(){
    		
    		return new 	ModelAndView("index.html");
    	}
    	
    	//注册
    	@RequestMapping("/user/register.action")
    	public ModelAndView register(User user){
    		System.out.println(user.getUsername()+"---"+user.getPassword());
    		userRepository.save(user);
    		return new ModelAndView("redirect:/index.action");
    		
    	}
    	
    	//登录
    	@RequestMapping("/user/login.action")
    	public ModelAndView login(User user){
    		User loginUser = userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
    		if(loginUser==null){
    			return new ModelAndView("redirect:/index.action");
    		}else{
    			return new ModelAndView("/welcome.html");
    		}
    		
    	}
    }

User.java:

package com.sikiedu.userlogindemo.domain;
    
    import javax.persistence.Entity;
    import javax.persistence.GeneratedValue;
    import javax.persistence.GenerationType;
    import javax.persistence.Id;
    
    @Entity
    public class User {
    
    	@Id
    	@GeneratedValue(strategy=GenerationType.IDENTITY)
    	private Integer id;
    	private String username;
    	private String password;
    	private String telephone;
    	
        public User() {
    		
    	}
        public User(Integer id, String username, String password, String telephone) {
    		
    		this.id = id;
    		this.username = username;
    		this.password = password;
    		this.telephone = telephone;
    	}
    
    	public Integer getId() {
    		return id;
    	}
    	public void setId(Integer id) {
    		this.id = id;
    	}
    	public String getUsername() {
    		return username;
    	}
    	public void setUsername(String username) {
    		this.username = username;
    	}
    	public String getPassword() {
    		return password;
    	}
    	public void setPassword(String password) {
    		this.password = password;
    	}
    	public String getTelephone() {
    		return telephone;
    	}
    	public void setTelephone(String telephone) {
    		this.telephone = telephone;
    	}
    	
    	
    	@Override
    	public String toString() {
    		return "User [id=" + id + ", username=" + username + ", password=" + password + ", telephone=" + telephone
    				+ "]";
    	}
    	
    	
    }

UserRepository.java:

package com.sikiedu.userlogindemo.repository;
    
    import org.springframework.data.repository.CrudRepository;
    
    import com.sikiedu.userlogindemo.domain.User;
    
    public interface UserRepository extends CrudRepository<User, Integer> {
    
    	User findByUsernameAndPassword(String username,String Passoword);
    }

welcome.html:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    hello~~~~
    </body>
    </html>

index.html:

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    
    	<head>
    		<meta charset="utf-8">
    
    		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    		<link rel="stylesheet" href="css/login.css" />
    		<script src="js/jquery.min.js"></script>
    		<script src="bootstrap/js/bootstrap.min.js"></script>
    
    		<script>
    			$(document).ready(function() {
    				//打开会员登录 
    				$("#Login_start_").click(function() {
    					$("#regist_container").hide();
    					$("#_close").show();
    					$("#_start").animate({
    						left: '350px',
    						height: '520px',
    						width: '400px'
    					}, 500, function() {
    						$("#login_container").show(500);
    						$("#_close").animate({
    							height: '40px',
    							width: '40px'
    						}, 500);
    					});
    				});
    				//打开会员注册
    				$("#Regist_start_").click(function() {
    					$("#login_container").hide();
    					$("#_close").show();
    					$("#_start").animate({
    						left: '350px',
    						height: '520px',
    						width: '400px'
    					}, 500, function() {
    						$("#regist_container").show(500);
    						$("#_close").animate({
    							height: '40px',
    							width: '40px'
    						}, 500);
    					});
    				});
    				//关闭
    				$("#_close").click(function() {
    					
    					$("#_close").animate({
    						height: '0px',
    						width: '0px'
    					}, 500, function() {
    						$("#_close").hide(500);
    						$("#login_container").hide(500);
    						$("#regist_container").hide(500);
    						$("#_start").animate({
    							left: '0px',
    							height: '0px',
    							width: '0px'
    						}, 500);
    					});
    				});
    				//去 注册
    				$("#toRegist").click(function(){
    					$("#login_container").hide(500);
    					$("#regist_container").show(500);
    				});
    				//去 登录
    				$("#toLogin").click(function(){
    					$("#regist_container").hide(500);
    					$("#login_container").show(500);
    				});
    			});
    		</script>
    	</head>
    
    	<body style="background-color: #000000;">
    
    		<a id="Login_start_" class="btn btn-danger" style="width:100px;height:40px;border-radius: 0;">登陆</a>
    		<a id="Regist_start_" class="btn btn-success" style="width:100px;height:40px;border-radius: 0;">注册</a>
    
    		
    		
    		<div id='_start'>
    			<div id='_close' style="display: none;">
    				<span class="glyphicon glyphicon-remove"></span>
    			</div>
    			<br /> 
    			
    			<div id="login_container">
    				<div id="lab1">
    					<span id="lab_login">会员登录</span>
    					<span id="lab_toRegist">
    						 还没有账号 
    						<span id='toRegist' style="color: #EB9316;cursor: pointer;">立即注册</span>
    					</span>
    				</div>
    				<div style="width:330px;">
    					<span id="lab_type1">手机号/账号登陆</span>
    				</div>
    					<form action="" th:action="@{~/user/login.action}">
    						<div id="form_container1">
    							<br />
    							<input type="text" class="form-control" placeholder="手机号/用户名" id="login_number" value="admin" name="username" />
    							<input type="password" class="form-control" placeholder="密码" id="login_password" name="password" />
    							<input type="submit" value="登录" class="btn btn-success" id="login_btn" />
    							<span id="rememberOrfindPwd">
    								<span>
    									<input id="remember" type="checkbox" style="margin-bottom: -1.5px;"/>
    								</span>
    							<span style="color:#000000">
    									记住密码    
    								</span>
    							<span style="color:#000000">
    									忘记密码
    								</span>
    							</span>
    						</div>
    					</form>
    				<div style="display:block;width:330px;height：40px;">
    					<span id="lab_type2">使用第三方直接登陆</span>
    				</div>
    				<div style="width:330px;height:100px;border-bottom: 1px solid #FFFFFF;">
    					<br />
    					<button id="login_QQ" type="button" class="btn btn-info">
    						<img src="img/qq32.png" style="width:20px;margin-top:-4px;" /> QQ登录
    					</button>
    					<button id="login_WB" type="button" class="btn btn-danger">
    						<img src="img/sina32.png" style="width:20px;margin-top:-4px;" /> 微博登录
    					</button>
    				</div>
    			</div>
    			
    			<form action="" th:action="@{~/user/register.action}" method="post">
    				<div id='regist_container' style="display: none;">
    					<div id="lab1">
    						<span id="lab_login">会员注册</span>
    						<span id="lab_toLogin">
    							 已有账号 
    							<span id='toLogin' style="color: #EB9316;cursor: pointer;">立即登录</span>
    						</span>
    					</div>
    					<div id="form_container2" style="padding-top: 25px;">
    						
    						<input type="text" class="form-control" value="admin"  placeholder="用户名" id="regist_account" name="username"/>
    						<input type="password" class="form-control" placeholder="密码" id="regist_password1" name="password" />
    						<input type="password" class="form-control" placeholder="确认密码" id="regist_password2" />
    						<input type="text" class="form-control" placeholder="手机号" id="regist_phone" name="telephone" />
    						<input type="text" class="form-control" placeholder="验证码" id="regist_vcode" />
    						
    						<input id="getVCode" type="button" class="btn btn-success" value="点击发送验证码" onclick="sendCode(this)" />
    	
    					</div>
    					<input type="submit" value="注册" class="btn btn-success" id="regist_btn" />
    				</div>
    			</form>
    		</div>
    
    	</body>
    	<script type="text/javascript">
    		var clock = '';
    		var nums = 30;
    		var btn;
    		function sendCode(thisBtn) {
    			btn = thisBtn;
    			btn.disabled = true; //将按钮置为不可点击
    			btn.value = '重新获取（'+nums+'）';
    			clock = setInterval(doLoop, 1000); //一秒执行一次
    		}
    
    		function doLoop() {
    			nums--;
    			if (nums > 0) {
    				btn.value = '重新获取（'+nums+'）';
    			} else {
    				clearInterval(clock); //清除js定时器
    				btn.disabled = false;
    				btn.value = '点击发送验证码';
    				nums = 10; //重置时间
    			}
    		}
    		
    		$(document).ready(function(){
    			$("#login_QQ").click(function(){
    				alert("暂停使用！");
    			});
    			$("#login_WB").click(function(){
    				alert("暂停使用！");
    			});
    		});
    	</script>
    
    </html>

运行：

![20190517144714940.gif][]

# 完整项目下载地址： #

[https://download.csdn.net/download/qq\_40323256/11208751][https_download.csdn.net_download_qq_40323256_11208751]

[https_start.spring.io]: https://start.spring.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/6d96ec54f45940ba8bdd1a5d0d23af9f.png
[https_blog.csdn.net_qq_40323256_article_details_90262363]: https://blog.csdn.net/qq_40323256/article/details/90262363
[https_pan.baidu.com_s_1UmKwjfMLCqpL4L4dZ_KhTg]: https://pan.baidu.com/s/1UmKwjfMLCqpL4L4dZ_KhTg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/56248eacb05b43329fda6c41687a50f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/935ec05006cb4941add85e2b49e8b491.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/836e8204b7734848a7327a0c8c7efeb2.png
[20190517104850142.png]: https://img-blog.csdnimg.cn/20190517104850142.png
[20190517104542522.png]: /images/20210725/c05969c2e5e7457b8cfd1dcb50354a27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/f6ec77c454dd4070aa6c41c173d73882.png
[20190517144714940.gif]: /images/20210725/4fe76d2bd31a4b2da0855b7a40f7ec69.png
[https_download.csdn.net_download_qq_40323256_11208751]: https://download.csdn.net/download/qq_40323256/11208751