文章目录
一、构建页面1、构建登录页面2、构建后台管理页面3、复制_fragments二、实现登录1、创建用户接口2、创建用户实现类3、创建UserRepository4、初始化一个用户5、访问：http://localhost:8080/admin6、输入用户名密码没有反应，更改login.html代码7、登录成功8、注销按钮测试9、添加非空验证10、添加错误提示11、效果三、Md5加密1、创建MD5加密类2、查看加密码3、复制到数据库中4、修改UserServiceImpl.java代码5、测试是否加密成功四、登录拦截器1、修改blogs.html代码2、访问：http://localhost:8080/admin/blogs3、登录拦截类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="/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="/npm/jquery@3.2/dist/jquery.min.js"></script><script src="/semantic-ui/2.2.10/semantic.min.js"></script><!--/*/</th:block>/*/--></body></html>
2、构建后台管理页面
<!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=debice-width,initial-scale=1.0"><title>博客管理</title><link rel="stylesheet" href="/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@</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 @ - Lirenmi Designed by Lirenmi</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.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="/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="/semantic-ui/2.2.10/semantic.min.css"><link rel="stylesheet" href="/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@</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 @ - Lirenmi Designed by Lirenmi</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.10/semantic.min.js"></script><script src="/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* 日期：-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* 日期：-06-11*/@Servicepublic class UserServiceImpl implements UserService{/*注入*/@Autowiredprivate UserRepository userRepository;@Overridepublic 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* 日期：-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* 日期：-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* 日期：-06-13*/public class LoginInterceptor extends HandlerInterceptorAdapter {@Overridepublic 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* 日期：-06-13*/@Configurationpublic class WebConfig extends WebMvcConfigurerAdapter {@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/admin/**")/*拦截所有*//*排除admin admin/login两个被拦截*/.excludePathPatterns("/admin").excludePathPatterns("/admin/login");}}
