Springboot+Thymeleaf+Jpa實(shí)現(xiàn)登錄功能(附源碼)
最近有學(xué)習(xí)到關(guān)于Springboot+Thymeleaf+Jpa的綜合運(yùn)用知識(shí),因此想寫(xiě)一個(gè)簡(jiǎn)單的登錄界面來(lái)嘗試一下,以下將展示具體流程
具體實(shí)現(xiàn)首先要?jiǎng)?chuàng)建一個(gè)springboot項(xiàng)目
添加以下依賴(lài)項(xiàng)
pom.xml代碼
<?xml version='1.0' encoding='UTF-8'?><project xmlns='http://maven.apache.org/POM/4.0.0' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:schemaLocation='http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd'> <modelVersion>4.0.0</modelVersion> <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.5</version><relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>demo1</artifactId> <version>0.0.1-SNAPSHOT</version> <name>demo1</name> <description>Demo project for Spring Boot</description> <properties><java.version>1.8</java.version> </properties> <dependencies><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional></dependency><dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope></dependency> </dependencies> <build><plugins> <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId> </plugin></plugins> </build></project>配置文件application.yml的代碼
在mysql://localhost:3306/后更改為自己的數(shù)據(jù)庫(kù)名字,另外username和password同樣更改為自己數(shù)據(jù)庫(kù)的用戶(hù)名和密碼
spring: thymeleaf: mode: HTML datasource: url: jdbc:mysql://localhost:3306/demo1?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: root jpa: hibernate: ddl-auto: update show-sql: truePo(實(shí)體)層代碼(User.java)
建立一個(gè)簡(jiǎn)單的用戶(hù)類(lèi),里面包含id主鍵(用jpa寫(xiě)po層必須要有主鍵用@id注解)
@Entitypublic class User { @Id private Integer id; private String name; private String password; public Integer getId() {return id; } public void setId(Integer id) {this.id = id; } public String getName() {return name; } public void setName(String name) {this.name = name; } public String getPassword() {return password; } public void setPassword(String password) {this.password = password; } @Override public String toString() {return 'User{' +'id=' + id +', name=’' + name + ’’’ +', password=’' + password + ’’’ +’}’; }}Dao(數(shù)據(jù)庫(kù)操作)層代碼(UserDao.java)
創(chuàng)建一個(gè)接口繼承jpa的數(shù)據(jù)庫(kù)操作<>里第一個(gè)參數(shù),代表要操作的具體哪一個(gè)Po層,第二個(gè)參數(shù)代表這個(gè)Po層的主鍵類(lèi)型寫(xiě)了一個(gè)方法(也就是JPA最香的地方,可以通過(guò)簡(jiǎn)單的名字對(duì)應(yīng)關(guān)系進(jìn)行sql的查找)通過(guò)name和password查找一個(gè)用戶(hù)
public interface UserDao extends JpaRepository<User,Integer> { User findByNameAndPassword(String name,String password);}Service(服務(wù))層代碼
Service層接口(Userservice.java)
public interface UserService { User finduser(String name,String password);}
Service層具體實(shí)現(xiàn)(UserServiceimpl.java)
@Servicepublic class UserServiceImpl implements UserService { @Autowired UserDao userDao; @Override public User finduser(String name, String password) {return userDao.findByNameAndPassword(name,password); }}驗(yàn)證碼功能
因?yàn)橐玫搅蓑?yàn)證碼的實(shí)現(xiàn)功能,所以采取了一位大佬的驗(yàn)證碼生成的操作進(jìn)行集成它的工具類(lèi) VerifyCode.java以及CaptchaController.java本博客就不貼了,移步大佬博客進(jìn)行使用即可參考文章(關(guān)于驗(yàn)證碼)
Controller(控制)層代碼(LoginController.java)
@Controllerpublic class LoginController { @Autowired UserService userService; @RequestMapping('/') public String login() {return 'login'; } @RequestMapping('/dologin') public String dologin(User user, HttpSession session, String verifycode, Model model) {User user1=userService.finduser(user.getName(), user.getPassword());String code= (String) session.getAttribute('verifyCode');if(user1!=null&&code.equalsIgnoreCase(verifycode)){ model.addAttribute('message','成功'); return 'enter';}else{ model.addAttribute('message','失敗'); return 'enter';} }}
Html頁(yè)面代碼
注意三個(gè)input里面的name屬性,很多初學(xué)者(包括我)會(huì)好奇Controller是怎么獲取網(wǎng)頁(yè)上輸入的具體的值?實(shí)際上就是通過(guò)name屬性比如說(shuō)第一個(gè)參數(shù)user,因?yàn)樗锩嬗衭ser.name和user.password屬性,因此可以通過(guò)在html里進(jìn)行對(duì)name屬性的更改來(lái)實(shí)現(xiàn)數(shù)據(jù)的尋找,第二個(gè)參數(shù)verifycode也是一樣的道理注意驗(yàn)證碼后的input框的name屬性是verifycode,第三個(gè)屬性model也是常用屬性,此處是為了在頁(yè)面上進(jìn)行具體的消息顯示
public String dologin(User user, HttpSession session, String verifycode, Model model)
登錄頁(yè)面(login.html)
<!DOCTYPE html><html lang='en' xmlns:th='http://www.w3.org/1999/xhtml'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <form action='/dologin'> <div> <span> 名字: </span> <input type='text' name='name' > </div> <div><span> 密碼:</span><input type='password' name='password' > </div> <div><span> 驗(yàn)證碼</span><input type='text' name='verifycode'> </div> <div><a href='javascript:void(0);' rel='external nofollow' > <img th:src='http://www.aoyou183.cn/bcjs/@{getVerifyCode}' onclick='changeCode()' /></a> </div> <div> <button type='submit'>登錄</button> </div> </form> <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> <script> function changeCode() { const src = 'http://www.aoyou183.cn/getVerifyCode?' + new Date().getTime(); //加時(shí)間戳,防止瀏覽器利用緩存 $(’.verifyCode’).attr('src', src); } </script></body></html>
判斷登錄是否成功的頁(yè)面(enter.html)
通過(guò)Thymeleaf的表達(dá)式,對(duì)message進(jìn)行取值,來(lái)反應(yīng)登錄是否成功
model.addAttribute('message','成功');model.addAttribute('message','失敗');
<!DOCTYPE html><html lang='en' xmlns:th='http://www.w3.org/1999/xhtml'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <h2 th:text='${message}'> 登錄成功 </h2></body></html>
最后的項(xiàng)目目錄結(jié)構(gòu)
到此這篇關(guān)于Springboot+Thymeleaf+Jpa實(shí)現(xiàn)登錄功能(附源碼)的文章就介紹到這了,更多相關(guān)Springboot Thymeleaf Jpa登錄內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. ASP基礎(chǔ)知識(shí)VBScript基本元素講解2. ajax請(qǐng)求添加自定義header參數(shù)代碼3. Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動(dòng)庫(kù)4. Python requests庫(kù)參數(shù)提交的注意事項(xiàng)總結(jié)5. IntelliJ IDEA導(dǎo)入jar包的方法6. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……7. 利用CSS3新特性創(chuàng)建透明邊框三角8. python爬蟲(chóng)學(xué)習(xí)筆記之pyquery模塊基本用法詳解9. vue-electron中修改表格內(nèi)容并修改樣式10. python操作mysql、excel、pdf的示例
