Spring boot实训个人博客系统 (十五) 后台登录

最新推荐文章于 2024-05-08 15:40:12 发布
最新推荐文章于 2024-05-08 15:40:12 发布
阅读量512 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sze7b/article/details/118482948
版权

1.构建登录页面:

参考官网： http//sesmantic-ui.com
在这里插入图片描述

<!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=device-width,initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/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="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="#" 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="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/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>

效果展示:

在这里插入图片描述

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=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/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">
              奈一
            </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>奈一，欢迎登录！</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">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（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：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：2448923662</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.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包:

在这里插入图片描述

4.新建UserService接口

检查用户名和密码:
在这里插入图片描述

package com.xl.blog.service;

import com.xl.blog.po.User;

public interface UserService {
    User checkUser(String username, String password);
}

5.新建UserServiceImpl接口实现

在这里插入图片描述

package com.xl.blog.service;

import com.xl.blog.dao.UserRepository;
import com.xl.blog.po.User;
import com.xl.blog.util.MD5Utils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;


@Service
public class UserServiceImpl implements UserService{

    /*注入*/
    @Autowired
    private UserRepository userRepository;

    @Override
    public User checkUser(String username, String password) {
        User user= userRepository.findByUsernameAndPassword(username, MD5Utils.code(password));
        return user;
    }
}

6.新建dao包:

在这里插入图片描述

7.新建UserRepository类:

package com.xl.blog.dao;

import com.xl.blog.po.User;
import org.springframework.data.jpa.repository.JpaRepository;


public interface UserRepository extends JpaRepository<User,Long> {

    User findByUsernameAndPassword(String username,String password);

}

8.新建admin包

存放关于后台管理的web
在这里插入图片描述

9.新建LoginController类

在这里插入图片描述

package com.xl.blog.web.admin;

import com.xl.blog.po.User;
import com.xl.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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;


@Controller
@RequestMapping("/admin")
public class LoginController {

    @Autowired
    private UserService userService;

    @GetMapping
    public 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/login";
        }
    }

    /*注销当前用户*/
    @GetMapping("/logout")
    public String logout(HttpSession session){
        session.removeAttribute("user");
        return "redirect:/admin";
    }


}

10.在数据库写入数据

在这里插入图片描述

11.运行测试:

   </div>
        <button class="ui fluid large teal submit button">登   录</button>
   </div>

在这里插入图片描述

12.MD5加密:

13.新建util包:

在这里插入图片描述

14.新建MD5Utils类

在这里插入图片描述

package com.xl.blog.util;

import sun.plugin2.message.Message;

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

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"));
    }

}

15.运行加密方法:

在这里插入图片描述

16.新建BlogController类

在这里插入图片描述

package com.xl.blog.web.admin;

import com.xl.blog.po.Type;
import com.xl.blog.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.validation.Valid;



@Controller
@RequestMapping("/admin")
public class TypeController {

    @Autowired
    private TypeService typeService;

    @GetMapping("/types")
    public String types(@PageableDefault(size = 3,sort = {"id"},direction = Sort.Direction.DESC) /*@PageableDefault（）根据id进行倒叙的方式排序*/
                                   Pageable pageable, Model model){
        model.addAttribute("page",typeService.listType(pageable));
        return "admin/types";
    }

    /*返回新增页面*/
    @GetMapping("/types/input")
    public String input(Model model) {
        model.addAttribute("type", new Type());
        return "admin/types-input";
    }

    /*编辑按钮跳转*/
    @GetMapping("/types/{id}/input")
    public String editInput(@PathVariable Long id, Model model){
        model.addAttribute("type",typeService.getType(id));
        return "admin/types-input";
    }

    /*提交方法*/
    @PostMapping("/types")
    public String post(@Valid Type type, BindingResult result, RedirectAttributes attributes){
        Type t=typeService.getTypeByName(type.getName());
        if(t != null){
            result.rejectValue("name","nameError","不能添加重复的分类");
        }

        if(result.hasErrors()){
           return "admin/types-input";
       }
        Type type1= typeService.saveType(type);
       if (type1==null){
           //未保存成功
           attributes.addFlashAttribute("message","新增失败");
       }else {
            //保存成功
           attributes.addFlashAttribute("message","新增成功");

       }
       return "redirect:/admin/types";
    }

    /*修改方法*/
    @PostMapping("/types/{id}")
    public String editPost(@Valid Type type, BindingResult result,@PathVariable Long id, RedirectAttributes attributes){
        Type t=typeService.getTypeByName(type.getName());
        if(t != null){
            result.rejectValue("name","nameError","不能添加重复的分类");
        }

        if(result.hasErrors()){
            return "admin/types-input";
        }
        Type type1= typeService.updateType(id,type);
        if (type1==null){
            //未保存成功
            attributes.addFlashAttribute("message","更新失败");
        }else {
            //保存成功
            attributes.addFlashAttribute("message","更新成功");

        }
        return "redirect:/admin/types";
    }

    /*删除方法*/
    @GetMapping("/types/{id}/delete")
    public String delete(@PathVariable Long id,RedirectAttributes attributes){
        typeService.deleteType(id);
        attributes.addFlashAttribute("message","删除成功");
        return "redirect:/admin/types";
    }
}

17.运行查看

在这里插入图片描述

二十四小时脑壳昏
关注
Springboot个人博客系统 5 后台登录
weixin_43265151的博客
01-02 389
后台登录 1.UserService和UserRepository 首先，实现后台登录需要对前端接收的表单数据进行校验，需要访问数据库，所以需要一个UserService进行数据校验，调用UserRepository访问数据库，实现如下: UserService @Service public class UserServiceImpl implements UserService{ @A...
Spring Boot实训开发个人博客10 - 博客管理
lbj5063的博客
06-30 636
文章目录一、博客管理（一）博客分页查询（二）博客新增（三）博客修改（四）博客删除 一、博客管理 （一）博客分页查询 （二）博客新增 （三）博客修改 （四）博客删除
springboot登录示例
01-15
springboot登录示例，简单的登录实现，从前台到后台，包括数据库查询
SpringBoot开源项目个人博客——(4)后台登录功能
qq_45678967的博客
05-29 937
SpringBoot开源项目个人博客——(4)后台登录功能
【SpringBoot搭建个人博客】- 后台登录（四）
2401_84831686的博客
05-08 790
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
springboot实战---1.搭建springboot实现登录
王雪亮
09-10 3756
功能需求： 1.实现登录 2.登录失败，提示错误信息 3.登录成功，显示柱状图 实现思路: 1.新建一个springboot新项目 2.熟悉springboot中几个常用注解 @Controller,@RequestMapping,@ResponseBody 3.掌握基本的html和简单的js 4.了解如何使用echarts 5.前后端交互(jquery ajax) 附加：常用快捷键使用 main函数：psvm 打印：sout for循环：fori 具体流程： 1.新建一个sprin..
基于spring boot的后台管理系统(java源码+数据库完整版)
05-02
Guns基于SpringBoot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl + flowable!Guns项目代码简洁,注释丰富,上手容易,同时Guns包含许多基础模块(用户管理,角色管理,部门管理,字典...
Spring Boot实训开发个人博客6
lbj5063的博客
06-28 182
文章目录一、构建框架（一）创建项目，引入Spring Boot模块（二）application.yml配置1.将application.properties改成application.yaml2.生产环境配置：application-dev.yaml3.开发环境配置：application-pro.yaml4.创建logback-spring.xml（可省略）二、框架搭建 - 异常处理（一）定义错误页面（二）全局处理异常三、日志处理（一） 一、构建框架 （一）创建项目，引入Spring Boot模块 web
Spring Boot实训开发个人博客1
lbj5063的博客
06-02 202
文章目录一、个人博客功能脑图二、技术三、工具与环境及模块内容四、需求与功能五、页面设计与开发首页 - index.html 一、个人博客功能脑图 二、技术 后端：Spring Boot + JPA + thymeleaf模板 数据库：MySQL 前端UI：Semantic UI框架 三、工具与环境及模块内容 工具与环境：IDEA, Maven 3，JDK 8，Axure RP 8 模块内容： 1.需求分析与功能规划 2.页面设计与开发 3.技术框架搭建 4.后端管理功能实现 5.前端管理功能实现
Spring Boot 实践之十三 10 Spring Boot综合项目实战——个人博客系统
热门推荐
qq_26665293的博客
06-27 1万+
注：实践内容参考人民邮电出版社的教程《 Spring Boot企业级开发教程》作者：黑马程序员，上传本文仅以实践过程以供大家共同学习解决问题，如有侵权不当行为，请告知后，我会更正或删除。 10.1 系统概述 本章涉及的引入资源请通过百度云盘下载：https://pan.baidu.com/s/1QCxpOfyjfKLsGcCDPfO1jQ 因内容较多，不少文字内容也以截图显示，敬请谅解。 10.1.1 系统功能介绍 10.1.2 项目效果预览 5.后台文件编辑页面预览 10.2 项目设计
【SpringBoot搭建个人博客】- 后台登录，程序员Java基础案例教程
澎湖Java架构师的博客
12-23 736
欢迎给star以鼓励(^_−)☆ 本文将从MVC架构、MD5加密、登录拦截器来讲述个人博客系统的后台登录实现 MVC架构 后台开发采用的是MVC架构，MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写， 是一种用于设计创建 Web 应用程序表现层的模式。MVC 中每个部分各司其职： Model（模型）： 通常指的是我们的数据模型，一般情况下用于封装数据 View（视图）： 通常指 jsp 或者 html，一般...
基于springboot的登录功能的实现（超详细）
asdgfgdsah的博客
07-02 4002
超详细的springboot登录验证过程，基于黑马资料的总结
响应式框Semantic UI使用细节
githubcurry
03-04 1167
Semantic UI文档链接 ui 声明是一个ui组件 inverted 颜色反转 menu 下面有一系列的item可以使用 item menu里面的每一个条目，前面可以加right、left让item靠左或者靠右 header 标题，不随旁边元素改变而改变 secondary 修饰menu的类型 icon 图标，在icon前加上图标的名称 input input组件，前面可以加属性，如icon transparent 元素透明 link 一个属性，改变鼠标的形状，像一个链接的效果 verti
Spring Boot基础学习之(六）:前后端交互实现用户登录界面
m0_52479012的博客
03-29 3127
如何通过前端交互：实现用户登录界面？
from login表单验证action值的解决方法 中山大学南方学院
Tom_boy_的博客
05-24 337
<form class="ui large form" method="post" name="form1" action="" > <div class="ui segment"> <div class="field"> <div class="ui left icon input"> ...
毕设&课设&项目&实训-基于微信原生组件的仿抖音短视频小程序+基于Spring Boot的小程序后台管理系统.zip
02-04
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
基于Spring Boot 2.1.0、JDK1.8+、Redis、Vue的前后端分离的后台管理系统
最新发布
06-15
【作品名称】：基于Spring Boot 2.1.0、JDK1.8+ 、 Mybatis Plus、JWT + Spring Security、Redis、Vue的前后端分离的后台管理系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、...
SpringBoot简易电商实战
08-23
Springboot是目前互联网新潮，**的技术。Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域成为主要技。微服务、SpringBoot自动装配原理、Yaml、多环境配置、配置文件加载、日志、静态资源、thymeleaf、外部tomcat等Spring Boot基础入门知识。学习参考资料：Java版本数据结构与算法授课特色：由浅入深，案例教学
ruoyi-vue第一章 : 学习后台登录模块(SpringSecurity)
过道
01-29 1万+
ruoyi-vue登录模块学习笔记
基于Springboot的博客系统（前后台）.zip
03-23
一套基于Spring boot编写的博客系统，自带前台展示和后台管理功能，仅供学习使用。测试有效，可以正常使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值