如何搭建一個springboot+thymeleaf+jpa的登陸案例
阿新 • • 發佈：2018-12-13
一、建立目錄
我使用過的是idea的編輯器
首先新建一個spring專案-》選擇spring initializr -》next
填寫pom的資訊
選擇元件，我選擇的是jpa和thymeleaf，web要選擇web核心元件
選擇目錄和填寫專案名稱-》finish
二、專案搭建
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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.lili</groupId> <artifactId>news</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>news</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.5.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-cache</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <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.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </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> <optional>true</optional> </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>
目錄結構
登陸控制器
package com.lili.news.controller; import com.lili.news.entity.User; import com.lili.news.result.CommonResult; import com.lili.news.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.List; import java.util.Map; @Controller //@RestController public class Login { @Autowired private UserService usi; /* * 登陸頁面 * * */ @RequestMapping("/login") public String login(Map<String,Object> map){ map.put("test","123456"); map.put("userinfo" ,new User("lili","123456",22)); List<User> list = new ArrayList<>(); for (int i=0 ; i<=5; i++){ User u = new User("lili","123456",(22+i) ); list.add(u); } map.put("userlist",list); return "login/login"; } @RequestMapping("/dologin") @ResponseBody public Object dologin(User user){ System.out.printf(user.toString()); CommonResult cr = usi.checkUser(user.getUsername(),user.getPassword()); return cr; } }
dao層jpa介面
package com.lili.news.dao; import com.lili.news.entity.User; import org.springframework.data.jpa.repository.JpaRepository; import java.util.List; public interface UserRepository extends JpaRepository<User,Long> { /** * 查詢使用者名稱為username,密碼為password的使用者 * @param username * @param password * @return */ List<User> findUserByUsernameAndPassword(String username , String password ); }
實體類user
package com.lili.news.entity;
import javax.persistence.*;
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@Column(length = 100)
private String username;
@Column(length = 255)
private String password;
@Column(length = 10)
private Integer age;
public User(String username, String password, Integer age) {
this.username = username;
this.password = password;
this.age = age;
}
public User(){
}
public long getId() {
return id;
}
public void setId(long 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 Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", age=" + age +
'}';
}
}
result類返回json使用
package com.lili.news.result;
public class CommonResult {
private Integer code;
private String msg;
private Object jsonObj;
public CommonResult(Integer code, String msg, Object jsonObj) {
this.code = code;
this.msg = msg;
this.jsonObj = jsonObj;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getJsonObj() {
return jsonObj;
}
public void setJsonObj(Object jsonObj) {
this.jsonObj = jsonObj;
}
}
service服務層介面
package com.lili.news.service;
import com.lili.news.entity.User;
import com.lili.news.result.CommonResult;
public interface UserService {
/*
* 通過id獲得user資料
* @param int id 主鍵
* @return User user物件
* */
User getUser(Integer id);
/*
* 檢查登陸的賬戶資訊是否匹配，使用者名稱和密碼是否存在、正誤
* @param string username 使用者名稱
* @param string password 密碼
* @return bool 正確返回true 否則返回false
* */
CommonResult checkUser(String username, String password);
}
serviceimpl實現類
package com.lili.news.service.serviceImpl;
import com.lili.news.dao.UserRepository;
import com.lili.news.entity.User;
import com.lili.news.result.CommonResult;
import com.lili.news.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
private final UserRepository ur ;
@Autowired
UserServiceImpl(UserRepository ur){
this.ur = ur;
}
@Override
public User getUser(Integer id) {
return null;
}
@Override
public CommonResult checkUser(String username, String password) {
List<User> users = this.ur.findUserByUsernameAndPassword(username,password);
if(users.isEmpty()){
return new CommonResult(101,"沒有這個使用者或者使用者名稱字錯誤",null);
}else {
return new CommonResult(100,"登陸成功",users);
}
}
}
檢視的目錄在resource下面的
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Fullscreen Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" th:href="@{/login/assets/css/reset.css}">
<link rel="stylesheet" th:href="@{/login/assets/css/supersized.css}">
<link rel="stylesheet" th:href="@{/login/assets/css/style.css}">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="page-container">
<h1>Login</h1>
<span th:text="'使用者名稱：' +${userinfo.username}">aaa</span>
<form action="#" th:action="@{/dologin}" th:object="${userinfo}" method="post">
<input type="text" name="username" class="username" th:value="*{username}">
<input type="password" name="password" class="password" th:value="*{password}">
<span th:text="'使用者名稱：' +*{username}">aaa</span>
<span th:text="'密碼：' +*{password}">aaa</span>
<button type="submit">登陸</button>
</form>
</div>
<!-- Javascript -->
<script th:src="@{/login/assets/js/jquery-1.8.2.min.js}"></script>
<script th:src="@{/login/assets/js/supersized.3.2.7.min.js}"></script>
<script th:src="@{/login/assets/js/supersized-init.js}"></script>
<script th:src="@{/login/assets/js/scripts.js}"></script>
</body>
</html>
thymeleaf的語法連結使用@，普通的變數使用${},或者*{}
靜態資源如圖所示預設在resource下面的static裡面
三、執行
現在在login控制器加一個控制方法，作為跳轉頁面使用
@RequestMapping("/weblogin")
public String weblogin(Map<String,Object> map, User user){
System.out.printf(user.toString());
CommonResult cr = usi.checkUser(user.getUsername(),user.getPassword());
if (cr.getCode() == 100 ){
//登陸成功
map.put("userinfo",user);
return "main/main";
}else {
return "redirect:login/login";
}
}我也加了一個main頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 後臺大布局 - Layui</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 後臺佈局</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制檯</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">使用者</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系統</a>
<dl class="layui-nav-child">
<dd><a href="">郵件管理</a></dd>
<dd><a href="">訊息管理</a></dd>
<dd><a href="">授權管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
<span th:text="${userinfo.username}"></span>
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設定</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超連結</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超連結</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">雲市場</a></li>
<li class="layui-nav-item"><a href="">釋出商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 15px;">內容主體區域</div>
</div>
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
//JavaScript程式碼區域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>