springboot+gradle实现用户的注册，登录，查询和修改（使用MySQL数据库，三层架构（web，service，dao））

拼搏现实的明天。 2021-09-19 11:16 246阅读 0赞

**目录**

完整项目下载地址：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

eclipse中import编译后的文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

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

提取码：k2rw

创建如下几个包：

![20190517153735294.png][]

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

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

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

总的目录结构：

![20190517221259676.png][]

UserController.java:

package com.sikiedu.userdemo.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.sikiedu.userdemo.domain.User;
    import com.sikiedu.userdemo.service.UserService;
    
    
    
    
    @RestController
    public class UserController {
    
    	@Autowired
    	private UserService userService;
    	
    	@RequestMapping("/")
    	public ModelAndView index(){
    		return new ModelAndView("/index.html");
    	}
    	
    	//注册
    	@RequestMapping("/register.action")
    	public ModelAndView register(User user){
    		userService.save(user);
    		return new ModelAndView("redirect:/");
    	}
    	
    	//登录
    	@RequestMapping("/login.action")
    	public ModelAndView login(User user){
    		User userlogin= userService.findByUsernameAndPassword(user.getUsername(),user.getPassword());
    		
    		if(userlogin==null){
    			return new ModelAndView("redirect:/");
    		}else{
    			return new ModelAndView("/welcome.html");
    		}
    	}
    	
    	@RequestMapping("/show.action")
    	public ModelAndView show(Model model){
    		List<User> userList= userService.findAll();
    		model.addAttribute("userList", userList);
    		return new ModelAndView("/show-all-user.html", "userModel", model);
    	}
    	
    	@RequestMapping("/toEdit/{id}")
    	public ModelAndView toEdit(@PathVariable Integer id,Model model){
    		User user= userService.findById(id);
    		model.addAttribute("user", user);
    		return new ModelAndView("/edit-user.html","userModel",model);
    	}
    	
    	@RequestMapping("/edit.action")
    	public ModelAndView edit(User user){
    		userService.save(user);
    		return new ModelAndView("redirect:/show.action");
    	}
    }

User.java:

package com.sikiedu.userdemo.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() {
    		super();
    	}
    	public User(Integer id, String username, String password, String telephone) {
    		super();
    		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;
    	}
    	
    	
    }

UserRepository.java:

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

UserService.java:

package com.sikiedu.userdemo.service;
    
    import java.util.List;
    
    import com.sikiedu.userdemo.domain.User;
    
    public interface UserService {
    
    	void save(User user);
    
    	User findByUsernameAndPassword(String username, String password);
    
    	List<User> findAll();
    
    	User findById(Integer id);
    
    }

UserServicelmpl.java:

package com.sikiedu.userdemo.service;
    
    import java.util.List;
    
    import org.springframework.stereotype.Service;
    
    import com.sikiedu.userdemo.domain.User;
    import com.sikiedu.userdemo.repository.UserRepository;
    
    @Service
    public class UserServicelmpl implements UserService {
    
    	private UserRepository userRepository;
    	
    	public void save(User user) {
    		userRepository.save(user);
    	}
    
    	@Override
    	public User findByUsernameAndPassword(String username, String password) {
    		
    		return userRepository.findByUsernameAndPassword(username,password);
    	}
    
    	@Override
    	public List<User> findAll() {
    		return (List<User>) userRepository.findAll();
    	}
    
    	@Override
    	public User findById(Integer id) {
    		return userRepository.findById(id).get();
    	}
    
    	
    }

edit-user.html:

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<form action="" th:action="@{~/edit.action}" method="post">
    		
    		<input name="id" type="hidden" th:value="${user.id}">
    		
    		用户名：
    		<input name="username" type="text" th:value="${user.username}">
    		密码：
    		<input name="password" type="text" th:value="${user.password}">
    		电话：
    		<input name="telephone" type="text" th:value="${user.telephone}">
    		
    		<input value="提交" type="submit">
    	</form>
    </body>
    </html>

welcome.html:

show-all-user.html:

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<table border="1px">
    		<tr>
    			<th>用户名</th>
    			<th>密码</th>
    			<th>电话</th>
    			<th>编辑</th>
    		</tr>
    		<tr th:each="user:${userList}">
    
    			<td th:text="${user.username}">asd</td>
    			<td th:text="${user.password}">ad</td>
    			<td th:text="${user.telephone}">adsf</td>
    			<td>
    				<a th:href="@{'~/toEdit/'+${user.id}}">修改</a>
    			</td>
    		</tr>
    	</table>
    </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="@{~/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>
    			
    			<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>
    				
    				<form action="" th:action="@{~/register.action}">
    					<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" />
    				</form>
    				
    			</div>
    		</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>

application.properties:

#Thymeleaf 编码
    spring.thymeleaf.encoding=UTF-8
    #热部署静态文件
    spring.thymeleaf.cache=false
    #使用HTML5标准
    spring.thymeleaf.mode=HTML5
     
    #使用h2控制台
    spring.h2.console.enabled=true	
    
    
    #datasource 我这里连接数据库报错了，没找到原因
    spring.datasource.url=jdbc:mysql://localhost:/3306/springboot_user
    spring.datasource.username=root
    spring.datasource.password=root
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    
    #jpa
    spring.jpa.show-sql=true
    spring.jpa.hibernate.ddl-auto=update

# 完整项目下载地址： #

[https://pan.baidu.com/s/1Khpu020Mzfga5ApIeN9GVw][https_pan.baidu.com_s_1Khpu020Mzfga5ApIeN9GVw]  提取码：fkei

[https_start.spring.io]: https://start.spring.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/20631ec26df544a4b43d40a60e8f213b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190517152802407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/7484bf66672a4e85886afe0545b3bfc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190517152940151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/5572d932670047e3b120485f9434cb93.png
[https_pan.baidu.com_s_1UmKwjfMLCqpL4L4dZ_KhTg]: https://pan.baidu.com/s/1UmKwjfMLCqpL4L4dZ_KhTg
[20190517153735294.png]: /images/20210725/b71b449a7ca843f59a2c9b7a71024520.png
[20190517104850142.png]: https://img-blog.csdnimg.cn/20190517104850142.png
[20190517104542522.png]: /images/20210725/a8a5b02a2c2f41e289996746a51e22ac.png
[20190517221259676.png]: /images/20210725/5a9e4d182c60454eb77ee7f5479f36b6.png
[https_pan.baidu.com_s_1Khpu020Mzfga5ApIeN9GVw]: https://pan.baidu.com/s/1Khpu020Mzfga5ApIeN9GVw