1.后台登录页面login.html
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head th:replace="admin/_fragments :: head(~{::title})"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客管理登录</title><link rel="stylesheet" href="/semantic-ui/2.2.4/semantic.min.css"><link rel="stylesheet" href="../../static/css/me.css"></head><body><br><br><br><div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;"><div class="ur 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="#" th:action="@{/admin/login}"><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><button class="ui fluid large teal submit button">登 录</button></div><div class="ui error mini message"></div><div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div></form></div></div></div></div><!--/*/<th:block th:replace="_fragments :: script">/*/--><script src="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.4/semantic.min.js"></script><!--/*/</th:block>/*/--><script>$('.ui.form').form({fields : {username : {identifier: 'username',rules: [{type : 'empty',prompt: '请输入用户名'}]},password : {identifier: 'password',rules: [{type : 'empty',prompt: '请输入密码'}]}}});</script></body></html>
_fragments.html页面
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head th:fragment="head(title)"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title th:replace="${title}">博客详情</title><link rel="stylesheet" href="/semantic-ui/2.2.4/semantic.min.css"><link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}"><link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}"><link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}"><link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}"><link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}"></head><body><!--导航--><nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>博客</a><a href="#" th:href="@{/admin/types}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a><a href="#" th:href="@{/admin/tags}" 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=1005">java小生不才</div><i class="dropdown icon"></i><div class="menu"><a href="#" th:href="@{/admin/logout}" 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></nav><!--导航--><!--底部footer--><footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px"></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 m-text-thin">用户故事1（User Story）</a><a href="#" class="item m-text-thin">用户故事2（User Story）</a><a href="#" class="item m-text-thin">用户故事3（User Story）</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 m-text-thin">Email: hst1406959716@</a><a href="#" class="item m-text-thin">QQ: 383568194</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 © - java小生不才 Designed by java小生不才</p></div></footer><th:block th:fragment="script"><script src="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.4/semantic.min.js"></script><script src="///npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script><script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script><script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script><script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script><script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script></th:block></body></html>
2.后台首页index.html
<!DOCTYPE html><html lang="en" xmlns:th="/1999/xhtml"><head th:replace="admin/_fragments :: head(~{::title})"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客管理</title><link rel="stylesheet" href="/semantic-ui/2.2.4/semantic.min.css"><link rel="stylesheet" href="../../static/css/me.css"></head><body><!--导航--><nav th:replace="admin/_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><div class="ui container"><div class="ui inverted secondary stackable menu"><h2 class="ui teal header item">管理后台</h2><a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>博客</a><a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a><a href="#" class="m-item item m-mobile-hide"><i class="mini 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=1005">java小生不才</div><i class="dropdown icon"></i><div class="menu"><a href="#" th:href="@{/admin/logout}" 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></nav><!--中间内容--><div class="m-container-small m-padded-tb-big"><div class="ui container"><div class="ui success large message"><h3>Hi,</h3><p> java小生不才，欢迎登录！</p></div><img src="https://unsplash.it/1000/400?image=1005" alt="" class="ui rounded bordered fluid image"></div></div><br><br><!--底部footer--><footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px"></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 m-text-thin">用户故事1（User Story）</a><a href="#" class="item m-text-thin">用户故事2（User Story）</a><a href="#" class="item m-text-thin">用户故事3（User Story）</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 m-text-thin">Email: hst1406959716@</a><a href="#" class="item m-text-thin">QQ: 383568194</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 © - java小生不才 Designed by java小生不才</p></div></footer><!--/*/<th:block th:replace="_fragments :: script">/*/--><script src="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.4/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.新建service包
3.1.UserService
package com.tedu.blog.service;import com.tedu.blog.pojo.User;/*** @description:* @author: zfh* @email: hst1406959716@* @date: Created in /8/26 9:58* @modified By:* @version: 1.0*/public interface UserService {User checkUser(String username, String password);}
3.2.UserServiceImpl
package com.tedu.blog.service;import com.tedu.blog.dao.UserRepository;import com.tedu.blog.pojo.User;import com.tedu.blog.util.MD5Utils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;/*** @description:* @author: zfh* @email: hst1406959716@* @date: Created in /8/26 9:58* @modified By:* @version: 1.0*/@Servicepublic class UserServiceImpl implements UserService {@Autowiredprivate UserRepository userRepository;@Overridepublic User checkUser(String username, String password) {User user = userRepository.findByUsernameAndPassword(username, MD5Utils.code(password));return user;}}
4.加密工具类MD5Utils
package com.tedu.blog.util;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;/*** @description:MD5* @author: zfh* @email: hst1406959716@* @date: Created in /8/26 9:58* @modified By:* @version: 1.0*/public class MD5Utils {/*** MD5加密类* @param str 要加密的字符串* @return 加密后的字符串*/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.toHexString(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("admin"));}}
5.web下新建admin包
5.1.LoginController
package com.tedu.blog.web.admin;import com.tedu.blog.pojo.User;import com.tedu.blog.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.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.servlet.mvc.support.RedirectAttributes;import javax.servlet.http.HttpSession;/*** @description:* @author: zfh* @email: hst1406959716@* @date: Created in /8/26 10:44* @modified By:* @version: 1.0*/@Controller@RequestMapping("/admin")public class LoginController {@Autowiredprivate UserService userService;@GetMappingpublic String loginPage() {return "admin/login";}@PostMapping("/login")public String login(@RequestParam String username,@RequestParam String password,HttpSession session,RedirectAttributes attributes) {User user = userService.checkUser(username, password);if (user != null) {user.setPassword(null);session.setAttribute("user",user);return "admin/index";} else {attributes.addFlashAttribute("message", "用户名和密码错误");return "redirect:/admin";}}@GetMapping("/logout")public String logout(HttpSession session) {session.removeAttribute("user");return "redirect:/admin";}}
5.2.登录测试
浏览器输入http://localhost:8080/admin，用户名、密码均为admin,登录成功跳转如下
