Spring Boot制作个人博客-后端管理（登录）

黑夜隐士 · 2021-7-3 12:02:44

文章目录

一、构建页面

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>

<!--/*//*/-->
<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>
<!--/*//*/-->
</body>
</html>
[/code] 
 
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>


<!--/*//*/-->
    <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>
    $('.menu.toggle').click(function (){
        $('.m-item').toggleClass('m-mobile-hide');
    });

    /*用户名下拉*/
    $('.ui.dropdown').dropdown({
        on:'hover'
    });

</script>
</body>
</html>
[/code] 
 
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>
[/code] 
二、实现登录 
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);
}

[/code] 
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;
    }
}

[/code] 
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);

}

[/code] 
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"));
    }

}

[/code] 
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;
    }
}

[/code] 
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");
    }
}

[/code] 
5、访问:http://localhost:8080/admin/blogs测试是否拦截成功 
注意：只有登录之后才能访问其他页面 

 

来源：https://blog.csdn.net/qq_48838980/article/details/117826683
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！