文章目錄
- 一、構建頁面
- 1、構建登錄頁面
- 2、構建后臺管理頁面
- 3、復制_fragments
- 二、實作登錄
- 1、創建用戶介面
- 2、創建用戶實作類
- 3、創建UserRepository
- 4、初始化一個用戶
- 5、訪問:http://localhost:8080/admin
- 6、輸入用戶名密碼沒有反應,更改login.html代碼
- 7、登錄成功
- 8、注銷按鈕測驗
- 9、添加非空驗證
- 10、添加錯誤提示
- 11、效果
- 三、Md5加密
- 1、創建MD5加密類
- 2、查看加密碼
- 3、復制到資料庫中
- 4、修改UserServiceImpl.java代碼
- 5、測驗是否加密成功
- 四、登錄攔截器
- 1、修改blogs.html代碼
- 2、訪問:http://localhost:8080/admin/blogs
- 3、登錄攔截類
- 4、攔截配置類
- 5、訪問:http://localhost:8080/admin/blogs測驗是否攔截成功
一、構建頁面
1、構建登錄頁面

<!DOCTYPE html>
<html lang="en">
<head th:replace="admin/_fragments::head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=debice-width,initial-scale=1.0">
<title>登錄頁面</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="../../static/css/css.css">
</head>
<body>
<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
<div class="ui container">
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
管理后臺登錄
</div>
</h2>
<form class="ui large form" method="post" action="#">
<div class="ui segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="用戶名">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="密碼">
</div>
</div>
<div class="ui fluid large teal submit button">登 錄</div>
</div>
<div class="ui error message"></div>
</form>
</div>
</div>
</div>
</div>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
</body>
</html>

2、構建后臺管理頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=debice-width,initial-scale=1.0">
<title>博客管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="../../static/css/css.css">
</head>
<body>
<!--導航欄-->
<nav th:replace="admin/_fragments::menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><!--inverted 反色 attached 圓角變直角-->
<!--設定log-->
<div class="ui container">
<div class="ui inverted secondary stackable menu"><!--stackable(可堆疊效果)會根據頁面大小改變顯示比例-->
<h2 class="ui teal header item">管理后臺</h2>
<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 博客</a>
<a href="#" class="active m-item item m-mobile-hide"><i class="idea icon"></i>分類</a>
<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>標簽</a>
<!--右側頭像-->
<div class="right m-item m-mobile-hide menu">
<div class="ui dropdown item">
<div class="text">
<img class="ui avatar image" src="https://unsplash.it/100/100?image=1010">
Beauty
</div>
<!--下拉圖示-->
<i class="dropdown icon"></i>
<div class="menu">
<a href="#" class="item">注銷</a>
</div>
</div>
</div>
</div>
</div>
<!--移動端回應圖示-->
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</div>
</nav>
<!--二級導航-->
<div class="ui attached pointing menu">
<div class="ui container">
<div class="right menu">
<a href="#" class="item">發布</a>
<a href="#" class="teal active item">串列</a>
</div>
</div>
</div>
<!--中間內容-->
<div class="m-container-small m-padded-tb-large">
<div class="ui m-container">
<div class="ui success large message">
<h3>Hi,</h3>
<p>beauty,歡迎登錄!</p>
</div>
<img src="https://picsum.photos/1000/1000?image=1015" alt="" class="ui rounded bordered fluid image"/>
</div>
</div>
<!--底部-->
<footer th:replace="admin/_fragments::footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container"><!--center aligned 居中-->
<div class="ui inverted divided stackable grid"><!--grid會將div分為16份布局 inverted divided模塊之間的線條顯示-->
<!--第一板塊-->
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="../../static/imags/erweima.png" class="ui rounded image" alt="" style="width:100px">
</div>
</div>
</div>
<!--第二板塊-->
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">用戶故事(User Story)</a>
<a href="#" class="item">關于課余練習的清單</a>
<a href="#" class="item">成功要趁早</a>
</div>
</div>
<!--第三板塊-->
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">聯系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">Email:Everyone@162.com</a>
<a href="#" class="item">QQ:123456789</a>
</div>
</div>
<!--第四板塊-->
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini ">這是我的個人博客、會分享關于編程、協作、思考相關的任何內容,希望可以給來到這兒的人有所幫助……</p>
</div>
</div>
<!--第五板塊-->
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2016-2017 Lirenmi Designed by Lirenmi</p>
</div>
</footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
$('.menu.toggle').click(function (){
$('.m-item').toggleClass('m-mobile-hide');
});
/*用戶名下拉*/
$('.ui.dropdown').dropdown({
on:'hover'
});
</script>
</body>
</html>

3、復制_fragments

- 修改其代碼
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=debice-width,initial-scale=1.0">
<title th:replace="${title}">詳情頁</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href=@{/tocbot/tocbot.css}>
<link rel="stylesheet" href="../static/css/css.css" th:href="@{/css/css.css}">
</head>
<body>
<!--導航欄-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><!--inverted 反色 attached 圓角變直角-->
<!--設定log-->
<div class="ui container">
<div class="ui inverted secondary stackable menu"><!--stackable(可堆疊效果)會根據頁面大小改變顯示比例-->
<h2 class="ui teal header item">管理后臺</h2>
<a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i> 博客</a>
<a href="#" class="active m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分類</a>
<a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>標簽</a>
<!--右側頭像-->
<div class="right m-item m-mobile-hide menu">
<div class="ui dropdown item">
<div class="text">
<img class="ui avatar image" src="https://unsplash.it/100/100?image=1010">
Beauty
</div>
<!--下拉圖示-->
<i class="dropdown icon"></i>
<div class="menu">
<a href="#" class="item">注銷</a>
</div>
</div>
</div>
</div>
</div>
<!--移動端回應圖示-->
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</div>
</nav>
<!--底部-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container"><!--center aligned 居中-->
<div class="ui inverted divided stackable grid"><!--grid會將div分為16份布局 inverted divided模塊之間的線條顯示-->
<!--第一板塊-->
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="../static/imags/erweima.png" th:src="@{/imags/erweima.png}" class="ui rounded image" alt="" style="width:100px">
</div>
</div>
</div>
<!--第二板塊-->
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">用戶故事(User Story)</a>
<a href="#" class="item">關于課余練習的清單</a>
<a href="#" class="item">成功要趁早</a>
</div>
</div>
<!--第三板塊-->
<div class="three wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">聯系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">Email:Everyone@162.com</a>
<a href="#" class="item">QQ:123456789</a>
</div>
</div>
<!--第四板塊-->
<div class="seven wide column">
<h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini ">這是我的個人博客、會分享關于編程、協作、思考相關的任何內容,希望可以給來到這兒的人有所幫助……</p>
</div>
</div>
<!--第五板塊-->
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2016-2017 Lirenmi Designed by Lirenmi</p>
</div>
</footer>
<th:block th:fragment="script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/waypoints/jquery.waypoints.min.js}"></script>
</th:block>
</body>
</html>
二、實作登錄
1、創建用戶介面

package net.zjs.lrm.service;
import net.zjs.lrm.po.User;
/**
* 功能:用戶介面
* 作者:zjs
* 日期:2021-06-11
*/
public interface UserService {
User checkUser(String username, String password);
}
2、創建用戶實作類

package net.zjs.lrm.service;
import net.zjs.lrm.dao.UserRepository;
import net.zjs.lrm.po.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* 功能:用戶實作類
* 作者:zjs
* 日期:2021-06-11
*/
@Service
public class UserServiceImpl implements UserService{
/*注入*/
@Autowired
private UserRepository userRepository;
@Override
public User checkUser(String username, String password) {
User user= userRepository.findByUsernameAndPassword(username,password);
return user;
}
}
3、創建UserRepository

package net.zjs.lrm.dao;
import net.zjs.lrm.po.User;
import org.springframework.data.jpa.repository.JpaRepository;
/**
* 功能:
* 作者:zjs
* 日期:2021-06-11
*/
public interface UserRepository extends JpaRepository<User,Long> {
User findByUsernameAndPassword(String username,String password);
}
4、初始化一個用戶

5、訪問:http://localhost:8080/admin

6、輸入用戶名密碼沒有反應,更改login.html代碼

7、登錄成功

8、注銷按鈕測驗

9、添加非空驗證

10、添加錯誤提示

11、效果

三、Md5加密
1、創建MD5加密類

package net.zjs.lrm.util;
import sun.plugin2.message.Message;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
/**
* 功能:MD5加密類
* 作者:zjs
* 日期:2021-06-13
*/
public class MD5Utils {
/*MD5加密*/
public static String code(String str){
try{
MessageDigest md= MessageDigest.getInstance("MD5");
md.update(str.getBytes());
byte[]byteDigest=md.digest();
int i;
StringBuffer buf=new StringBuffer("");
for(int offset=0;offset<byteDigest.length;offset++){
i=byteDigest[offset];
if (i<0)
i+=256;
if(i<16)
buf.append("0");
buf.append(Integer.toString(i));
}
//32位加密
return buf.toString();
//16位加密
// return buf.toString().substring(8,24);
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
return null;
}
}
public static void main(String[] args){
System.out.println(code("123"));
}
}
2、查看加密碼

3、復制到資料庫中

4、修改UserServiceImpl.java代碼

5、測驗是否加密成功

四、登錄攔截器
1、修改blogs.html代碼




2、訪問:http://localhost:8080/admin/blogs

- 實作在沒有登錄的情況下不能訪問我們的內部網頁
3、登錄攔截類

package net.zjs.lrm.interceptor;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 功能:登錄攔截
* 作者:zjs
* 日期:2021-06-13
*/
public class LoginInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) throws Exception{
if (request.getSession().getAttribute("user")==null){
response.sendRedirect("/admin");
return false;
}
return true;
}
}
4、攔截配置類

package net.zjs.lrm.interceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* 功能:攔截配置類
* 作者:zjs
* 日期:2021-06-13
*/
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor())
.addPathPatterns("/admin/**")/*攔截所有*/
/*排除admin admin/login兩個被攔截*/
.excludePathPatterns("/admin")
.excludePathPatterns("/admin/login");
}
}
5、訪問:http://localhost:8080/admin/blogs測驗是否攔截成功
- 注意:只有登錄之后才能訪問其他頁面


轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/287150.html
標籤:java
