Spring Boot制作个人博客-后端管理（登录）
2024-06-21 11:39:39
文章目录
- 一、构建页面
- 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{/*注入*/@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* 日期：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 {@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* 日期：2021-06-13*/
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/admin/**")/*拦截所有*//*排除admin admin/login两个被拦截*/.excludePathPatterns("/admin").excludePathPatterns("/admin/login");}
}5、访问:http://localhost:8080/admin/blogs测试是否拦截成功
- 注意：只有登录之后才能访问其他页面
Spring Boot制作个人博客-后端管理（登录）相关推荐
- Spring Boot制作个人博客-后端管理（博客管理）
文章目录 一.博客分页查询 1.对blog.html网页作更改 2.新建BlogService接口 3.新建BlogRepository接口 4.新建BlogServiceImpl.java类 5.修 ...
- 基于Spring Boot技术栈博客系统企业级前后端实战之课程导论(零)
零.说明(必读) 一.课程概述 1.1 名称 1.2 功能 1.3 技术点 1.4 目标 二.核心功能 2.1 用户管理 2.2 安全设置 2.3 博客管理 2.4 评论管理 2.5 点赞管理 2.6 ...
- 基于Spring Boot的个人博客系统（源码+数据库）
目录 一.系统功能框架图 二.开发技术 三.开发环境 四.页面展示 1.登录页面 2.首页 3.文章详情页面 4.文章评论页面 5.后台页面 6.后台文件编辑页面 7.后台文章管理列表页面 五.文 ...
- Spring boot 搭建个人博客系统（二）——登录注册功能
Spring boot 搭建个人博客系统(二)--登录注册功能 一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟 ...
- 基于Spring Boot的个人博客系统的设计与实现毕业设计源码271611
目 录 摘要 1 绪论 1.1研究意义 1.2开发背景 1.3系统开发技术的特色 1.4论文结构与章节安排 2个人博客系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...
- Spring Boot 开发个人博客--后台登录
-- 本文转自onestar :[SpringBoot搭建个人博客]- 后台登录(四) 本文将从MVC架构.MD5加密.登录拦截器来讲述个人博客系统的后台登录实现 MVC架构 后台开发采用的是MVC架 ...
- 【备忘】Spring Boot技术栈博客企业前后端
第1章 Spring Boot 简介 第2章 开启 Spring Boot 的第一个 Web 项目 第3章 一个Hello World项目 第4章 开发环境的搭建 第5 ...
- spring boot+vue个人博客七:打包部署，多节点部署方案
系列大纲 GitHub(还没开发完成) 在线演示www.yzpnb.top 第一章:(后端)搭建spring boot脚手架:https://blog.csdn.net/grd_java/articl ...
- 基于 Spring Boot 的个人博客系统设计与实现（源码+数据库+42页论文）
目录 若下载链接失效,请私信我:或加vx(grzyfun)发送资源 1.选题来源 2.项目背景 3.可行性分析 4.数据字典 5.开发环境介绍 6.数据库设计 7.界面展示 8.测试 9.文档目录,计 ...
最新文章
- 算法基础知识科普：8大搜索算法之顺序搜索
- 分布式监控系统开发【day38】:监控数据如何画图（九）
- how is metadata got - DB table iwfndi_med_srh and IWFNDCL_MGW_REQUEST_MANAG
- 牛客练习赛46 A 华华教奕奕写几何 （简单数学）
- python钓鱼网站_学习笔记6.0 Django入门创建一个钓鱼网站
- 搭建大数据平台的步骤有哪些
- c++之友元函数和友元类
- 在WIN10专业版上安装WINCC7.4的踩坑之路
- Ember之Computed Properties计算属性
- rtorrent ubuntu端命令行种子下载器
- 听老罗讲这一代人的学习方法有感
- 普林斯顿陈丹琦组：以实体为问题中心，让稠密检索模型DPR光环暗淡
- java assist_Java-Javaassist（一）
- Android Handler机制(一) 为什么设计Handler
- 哈哈日语 日语五十音图记忆和发音方法
- 竞远安全冲刺创业板：拟募资4亿 启元投资与云游软件是股东
- 啊哈c语言 潦草的初步笔记（1）
- Laravel源码解析之契约
- 中国计算机技术职业资格网
- 蓝桥杯旧嵌入式板STM32F103RBT6驱动练习笔记