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

gradle编译，和eclipse中导入项目，参考：https://blog.csdn.net/qq_40323256/article/details/90262363

导入静态文件（css,js,img,bootstrap）和页面（index.html）:https://pan.baidu.com/s/1UmKwjfMLCqpL4L4dZ_KhTg

提取码：k2rw

并创建UserController.java

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

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

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

导入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:

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

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

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

application.properties：

#Thymeleaf 编码
spring.thymeleaf.encoding=UTF-8
#热部署静态文件
spring.thymeleaf.cache=false
#使用HTML5标准
spring.thymeleaf.mode=HTML5

#使用h2控制台
spring.h2.console.enabled=true

总的目录结构：

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

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='Login_start' style="position: absolute;" >-->
		<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">
						&emsp;还没有账号&nbsp;
						<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">
									记住密码&emsp;&emsp;&emsp;&emsp;
								</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;" />&emsp;QQ登录
					</button>
					<button id="login_WB" type="button" class="btn btn-danger">
						<img src="img/sina32.png" style="width:20px;margin-top:-4px;" />&emsp;微博登录
					</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">
							&emsp;已有账号&nbsp;
							<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" />
						<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
						<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>

运行：

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

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

相关推荐