ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-06-11 23:58:22  阅读：146  来源： 互联网

标签：登录 后端 Spring lrm User Boot import net zjs


文章目录

一、构建页面

1、构建登录页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <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、效果

在这里插入图片描述

标签：登录,后端,Spring,lrm,User,Boot,import,net,zjs
来源： https://blog.csdn.net/qq_48838980/article/details/117826683

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有