• 基于SpringBoot+MyBatis实现的个人博客系统(一)

    这篇主要讲解一下如何基于SpringBoot和MyBatis技术实现一个简易的博客系统(前端页面主要是利用CSS,HTML进行布局书写),前端的静态页面代码可以直接复制粘贴,后端的接口以及前端发送的Ajax请求需要自己书写.

    博客系统需要完成的接口:

    • 注册
    • 登录
    • 博客列表页展示
    • 博客详情页展示
    • 发布博客
    • 修改博客
    • .......

     完整版代码详见Gitee:blogsystem · 徐明园/SSM配置信息 - 码云 - 开源中国 (gitee.com)

    项目亮点:

    1. 密码实现加盐处理,确保安全性;
    2. Session升级,由原来的内存存储改为通过Redis存储,不会丢失,并且支持分布式部署;
    3. 功能升级,对于博客列表的展示添加了分页功能;
    4. 登录验证升级,添加了拦截器的功能对用于的登录进行校验;
    5. ......

    一, 项目的搭建

    1,导入依赖坐标(创建SpringBoot项目)

    在书写任何一个项目的同时,需要先将项目的基础给搭建好,搭建项目需要提前考虑好项目的一些功能需要哪些依赖,从而进行添加,如何创建SpringBoot项目可以看我的另一篇博客:SpringBoot项目的创建和使用_蜡笔小心眼子！的博客-CSDN博客

     博客系统需要添加的依赖如下:

    1. "1.0" encoding="UTF-8"?>
    2. "http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     4.0.0
    5.     
    6.         org.springframework.boot
    7.         spring-boot-starter-parent
    8.         2.7.16
    9.          
    10.     
    11.     com.example
    12.     blogsystem
    13.     0.0.1-SNAPSHOT
    14.     blogsystem
    15.     blogsystem
    16.     
    17.         1.8
    18.     
    19.     
    20.         
    21.             org.springframework.boot
    22.             spring-boot-starter-web
    23.         
    24.         
    25.             org.mybatis.spring.boot
    26.             mybatis-spring-boot-starter
    27.             2.3.1
    28.         
    29.  
    30.         
    31.             org.springframework.boot
    32.             spring-boot-devtools
    33.             runtime
    34.             true
    35.         
    36.         
    37.             com.mysql
    38.             mysql-connector-j
    39.             runtime
    40.         
    41.         
    42.             org.projectlombok
    43.             lombok
    44.             true
    45.         
    46.         
    47.             org.springframework.boot
    48.             spring-boot-starter-test
    49.             test
    50.         
    51.         
    52.             org.mybatis.spring.boot
    53.             mybatis-spring-boot-starter-test
    54.             2.3.1
    55.             test
    56.         
    57.     
    58.  
    59.     
    60.         
    61.             
    62.                 org.springframework.boot
    63.                 spring-boot-maven-plugin
    64.                 
    65.                     
    66.                         
    67.                             org.projectlombok
    68.                             lombok
    69.                         
    70.                     
    71.                 
    72.             
    73.         
    74.     
    75.

    2,书写配置文件

    需要使用MyBatis技术的项目需要配置你的数据库相关的信息以及Mapper的xml文件存储的位置,同时也可以在配置文件中定义一下日志的打印级别,从而方便查看数据库操作的完整信息:

    1. #配置数据库连接信息
    2. spring:
    3.   datasource:
    4.     url: "你自己的数据库"
    5.     username: root
    6.     password: "数据库对应的密码"
    7.     driver-class-name: com.mysql.cj.jdbc.Driver
    8.  
    9. #配置Mapper的xml文件存储信息
    10. mybatis:
    11. #  xml的存储位置
    12.   mapper-locations: classpath:mapper/*Mapper.xml
    13.   configuration:
    14.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    16. #配置日志打印级别
    17. logging:
    18.   level:
    19.     com:
    20.       example:
    21.         demo: debug

    二, 将前端页面部署到项目中(resource文件下的static目录中)

    对于后端程序员来说可以不用特别注重前端样式的书写,但是需要看得懂前端的代码以及和后端交互的请求即可(学有余力的情况下可以适当学习从而优化自己项目中的前端页面),这里的静态页面信息可以直接在我的码云中进行下载:SSM配置信息: 存放SSM项目中的一些配置信息 (gitee.com)博客系统(静态页面).zip · 徐明园/SSM配置信息 - 码云 - 开源中国 (gitee.com)SSM配置信息: 存放SSM项目中的一些配置信息 (gitee.com)

    将下载好的前端页面全选之后直接复制到static目录下即可:

    三, 初始化数据库

    在配置文件中我们已经配置了数据库的连接信息,但是此时在数据库中还没有初始化一些数据,所以我们需要初始化数据,方便写项目的时候进行测试,初始化数据库的SQL代码也可以在我们的码云中进行下载:博客系统初始化数据库-ssm.sql · 徐明园/SSM配置信息 - 码云 - 开源中国 (gitee.com)

    查看数据库中的表即相应表结构:

     

     四, 对项目的整体架构进行分层

    一个企业级的SM项目都需要对其进行合理的分层,每一层处理每一层的业务逻辑,我在项目中的分层如下:

    • common:一些工具类
    • config:配置信息类
    • controller:处理前端请求的类
    • entity:实体类(也可以写成model)
    • mapper:用来和Mapper.xml文件交互的接口类
    • service:处于controller和mapper之间的类

    五, 书写前后端交互的功能

    从这里开始就是项目的核心了,这里开始可以对前后端的接口和相应功能进行书写了!

    1, 统一返回对象的封装

    为了给前端返回统一的对象,后端需要定义一个类对返回的数据进行封装,该类包含code,msg和data三个属性,该类定义在common包下:

    1. package com.example.blogsystem.common;
    2.  
    3. import lombok.Data;
    4.  
    5. import java.io.Serializable;
    6.  
    7. /**
    8.  * 统一返回对象
    9.  * 返回成功的话 code 设置成 200
    10.  * 反悔失败的话 code 设置成本身的 code
    11.  */
    12.  
    13. @Data
    14. public class AjaxResult implements Serializable {
    15.     private int code;
    16.     private String msg;
    17.     private Object data;
    18.  
    19.     /**
    20.      * 返回成功
    21.      *
    22.      * @param data
    23.      * @return
    24.      */
    25.     public static AjaxResult success(Object data) {
    26.         AjaxResult ajaxResult = new AjaxResult();
    27.         ajaxResult.setCode(200);
    28.         ajaxResult.setMsg("");
    29.         ajaxResult.setData(data);
    30.         return ajaxResult;
    31.     }
    32.  
    33.     public static AjaxResult success(Object data, String msg) {
    34.         AjaxResult ajaxResult = new AjaxResult();
    35.         ajaxResult.setCode(200);
    36.         ajaxResult.setMsg(msg);
    37.         ajaxResult.setData(data);
    38.         return ajaxResult;
    39.     }
    40.  
    41.     /**
    42.      * 返回失败
    43.      *
    44.      * @param code
    45.      * @param msg
    46.      * @return
    47.      */
    48.  
    49.     public static AjaxResult fail(Integer code, String msg) {
    50.         AjaxResult ajaxResult = new AjaxResult();
    51.         ajaxResult.setCode(code);
    52.         ajaxResult.setMsg(msg);
    53.         ajaxResult.setData("");
    54.         return ajaxResult;
    55.     }
    56.  
    57.     public static AjaxResult fail(Integer code, String msg, String data) {
    58.         AjaxResult ajaxResult = new AjaxResult();
    59.         ajaxResult.setCode(code);
    60.         ajaxResult.setMsg(msg);
    61.         ajaxResult.setData(data);
    62.         return ajaxResult;
    63.     }
    64. }

    2, 注册功能

    注册功能就是用户给后端发送一次请求之后,后端就会在数据中新增一条用户记录!

    前端

    2. "en">
    3.  
    5.     "UTF-8">
    6.     "X-UA-Compatible" content="IE=edge">
    7.     "viewport" content="width=device-width, initial-scale=1.0">
    8.     注册页面
    9.     "stylesheet" href="css/conmmon.css">
    10.     "stylesheet" href="css/login.css">
    11.     
    12.     
    14.  
    17. "nav">
    18.     "img/logo2.jpg" alt="">
    19.     "title">我的博客系统
    20.     
    21.     "spacer">
    22.     "blog_list.html">主页
    23.     "login.html">登陆
    24.
  • "login-container">
  • "login-dialog">

  • 注册

  • "row">
  • 用户名
  • "text" id="username">
  • "row">
  • 密码
  • "password" id="password">
  • "row">
  • 确认密码
  • "password" id="password2">
  • "row">

    •  前端给后端发送请求都是通过Ajax来实现的,所以对于任何需要发送Ajax请求的页面都需要导入js的依赖(后面就不再赘述)

    后端(这里的后端只展示controller包中的代码)

    1. @RequestMapping("/reg")
    2.     public AjaxResult reg(UserInfo userInfo) {
    3.         //1.对前端传递来的参数进行校验
    4.         if (userInfo == null || !StringUtils.hasLength(userInfo.getUsername()) || !StringUtils.hasLength(userInfo.getPassword())) {
    5.             return AjaxResult.fail(-1, "参数有误!");
    6.         }
    7.         //2.与数据库进行交互实现注册的功能
    8.         //将密码进行加盐加密
    9.         userInfo.setPassword(PasswordTools.encrypt(userInfo.getPassword()));
    10.         int result = userService.reg(userInfo);
    11.         //3.对于查询结果给前端进行反馈
    12.         return AjaxResult.success(result);
    13.     }

    3, 登录功能 

    登录就是前端给后端传递用户名和密码,后端从数据库中查询是否存在这样的用户!

    前端

    2. "en">
    3.  
    5.     "UTF-8">
    6.     "X-UA-Compatible" content="IE=edge">
    7.     "viewport" content="width=device-width, initial-scale=1.0">
    8.     登陆页面
    9.     "stylesheet" href="css/conmmon.css">
    10.     "stylesheet" href="css/login.css">
    11.     
    13.  
    16. "nav">
    17.     "img/logo2.jpg" alt="">
    18.     "title">我的博客系统
    19.     
    20.     "spacer">
    21.     "blog_list.html">主页
    22.     "reg.html">注册
    25. "login-container">
    26.     
    27.     
      "login-dialog">
    28.         
      登陆
    29.         
      "row">
    30.             用户名
    31.             "text" id="username">
    32.         
    33.         
      "row">
    34.             密码
    35.             "password" id="password">
    36.         
    37.         
      "row">
    38.             
    39.         
    40.     
    42.  
    45.

    登录功能的前端代码和注册功能前端代码几乎一模一样

    后端

    1. @RequestMapping("/login")
    2.     public AjaxResult login(String username, String password, HttpServletRequest request) {
    3.         //1.对前端传递来的参数进行校验
    4.         if (!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
    5.             return AjaxResult.fail(-1, "参数有误!");
    6.         }
    7.  
    8.         //2.根据用户名去数据库中进行查询
    9.         UserInfo userInfo = userService.login(username);
    10.         if (userInfo == null || userInfo.getId() <= 0) {
    11.             return AjaxResult.fail(-2, "用户名或者密码错误!");
    12.         }
    13.  
    14.         //对数据库中查找的密码进行解密
    15. //        if (!PasswordTools.check(password,userInfo.getPassword())) {
    16. //            return AjaxResult.fail(-2, "用户名或者密码错误!");
    17. //        }
    18.         
    19.         if (!userInfo.getPassword().equals(password)) {
    20.             return AjaxResult.fail(-2, "用户名或者密码错误!");
    21.         }
    22.  
    23.         //当前表示登陆成功 需要存储session
    24.         HttpSession session = request.getSession();
    25.         session.setAttribute(ApplicationVariable.USERINFO_SESSION_KEY, userInfo);
    26.         return AjaxResult.success(1);
    27.     }

    登录的时候需要存储用户的session(会话)信息,因为session的Key需要在多个地方使用,我们将该属性抽象出来放在了common这个公共包下了:

    1. package com.example.blogsystem.common;
    2.  
    3. public class ApplicationVariable {
    4.  
    5.     public static final String USERINFO_SESSION_KEY = "USERINFO_SESSION_KEY";
    6. }

     对于取出session()会话)中的的用户信息也可以将其封装公共的类,放在common包下:

    1. package com.example.blogsystem.common;
    2.  
    3. import com.example.blogsystem.entity.UserInfo;
    4.  
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpSession;
    7.  
    8. public class UserSessionTools {
    9.     public static UserInfo getLoginUser(HttpServletRequest request) {
    10.         HttpSession session = request.getSession(false);
    11.         if (session != null && session.getAttribute(ApplicationVariable.USERINFO_SESSION_KEY) != null) {
    12.             return (UserInfo) session.getAttribute(ApplicationVariable.USERINFO_SESSION_KEY);
    13.         }
    14.  
    15.         return null;
    16.     }
    17. }

    4, 实现拦截器

    对于一些博客信息的操作需要用户进行登录,所以可以通过拦截器判断用户具有相应的权限,只有通过拦截器的用户才可以操作,可以将拦截的配置信息放在config包下.

    实现HandlerInterceptor接口:

    1. package com.example.blogsystem.config;
    2.  
    3. import com.example.blogsystem.common.ApplicationVariable;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.servlet.HandlerInterceptor;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import javax.servlet.http.HttpSession;
    10.  
    11.  
    12. @Configuration
    13. public class LoginInterceptor implements HandlerInterceptor {
    14.  
    15.  
    16.     @Override
    17.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    18.         HttpSession session = request.getSession(false);
    19.         if (session != null && session.getAttribute(ApplicationVariable.USERINFO_SESSION_KEY) != null) {
    20.             return true;
    21.         }
    22.  
    23.         response.sendRedirect("/login.html");//没有通过拦截器的请求需要跳转到登录页面先登录
    24.         return false;
    25.     }
    26. }

    实现WebMvcConfigurer进行配置接口:

    1. package com.example.blogsystem.config;
    2.  
    3. import org.springframework.context.annotation.Configuration;
    4. import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    6.  
    7. import javax.annotation.Resource;
    8.  
    9. @Configuration
    10. public class MyConfig implements WebMvcConfigurer {
    11.  
    12.     @Resource
    13.     private LoginInterceptor loginInterceptor;
    14.  
    15.     @Override
    16.     public void addInterceptors(InterceptorRegistry registry) {
    17.         registry.addInterceptor(loginInterceptor)
    18.                 .addPathPatterns("/**") //拦截所有的url
    19.                 .excludePathPatterns("/login.html")
    20.                 .excludePathPatterns("/reg.html")
    21.                 .excludePathPatterns("/blog_list.html")
    22.                 .excludePathPatterns("/blog_content.html")
    23.                 .excludePathPatterns("/css/**")
    24.                 .excludePathPatterns("/editor.md/**")
    25.                 .excludePathPatterns("/img/**")
    26.                 .excludePathPatterns("/js/**")
    27.                 .excludePathPatterns("/user/reg")
    28.                 .excludePathPatterns("/user/login");
    29.     }
    30. }

    这里需要先放开所有的静态页面,图片以及登录和注册接口.

    5, 博客添加功能

    博客添加功能就是前端向后端提交博客的一些信息,后端在文章表中插入一条文章记录即可!

    前端

    2. "en">
    3.  
    5.     "UTF-8">
    6.     "X-UA-Compatible" content="IE=edge">
    7.     "viewport" content="width=device-width, initial-scale=1.0">
    8.     文章添加
    9.  
    10.     
    11.     "stylesheet" href="css/conmmon.css">
    12.     "stylesheet" href="css/blog_edit.css">
    13.  
    14.     
    15.     "stylesheet" href="editor.md/css/editormd.min.css" />
    16.     
    17.     
    19.  
    21.     
    22.     
      "nav">
    23.         "img/logo2.jpg" alt="">
    24.         "title">我的博客系统
    25.         
    26.         "spacer">
    27.         "blog_list.html">主页
    28.         "#">注销
    29.     
    30.     
    31.     
      "blog-edit-container">
    32.         
    33.         
      "title">
    34.             "title" type="text" placeholder="在这里写下文章标题">
    35.             
    36.         
    37.         
    38.         
      "editorDiv">
    39.             
    40.         
    41.     
    42.  
    43.     
    45.

    这里的前端页面引入了MarkDown编辑器,所以添加博客的时候相较于其他官方博客系统更加真实,而且该编辑器提供了一些Api让我们进行格式转换的时候更加方便.

    1. //相关API
    2. alert(editor.getValue()); // 获取值
    3. editor.setValue("#123") // 设置值

    后端

    1. @RequestMapping("/add")
    2.     public AjaxResult add(ArticleInfo articleInfo, HttpServletRequest request) {
    3.         //1.对前端传递来的参数进行判空操作
    4.         if (articleInfo == null || !StringUtils.hasLength(articleInfo.getTitle()) || !StringUtils.hasLength(articleInfo.getContent())) {
    5.             return AjaxResult.fail(-1, "参数错误!");
    6.         }
    7.         //2.获取当前的uid进行校验
    8.         UserInfo userInfo = UserSessionTools.getLoginUser(request);
    9.         if (userInfo == null || userInfo.getId() <= 0) {
    10.             return AjaxResult.fail(-1, "参数错误!");
    11.         }
    12.         //3.封装uid进行持久化
    13.         articleInfo.setUid(userInfo.getId());
    14.         int result = articleService.add(articleInfo);
    15.         //4.给前端进行数据反馈
    16.         return AjaxResult.success(result);
    17.     }

    这里数据库存储的是MarkDown格式的数据,是为了方便进行修改的时候直接进行修改省去了一次从Html转换成MarkDown格式的操作.

    6, 博客编辑功能

    博客编辑功能需要实现两个操作:

    1.先去查询当前文章的信息进行展示(页面加载的时候进行调用)

    2.提交修改操作(触发提交按钮的时候进行调用)

    前端

    2. "en">
    3.  
    5.     "UTF-8">
    6.     "X-UA-Compatible" content="IE=edge">
    7.     "viewport" content="width=device-width, initial-scale=1.0">
    8.     文章修改
    9.  
    10.     
    11.     "stylesheet" href="css/conmmon.css">
    12.     "stylesheet" href="css/blog_edit.css">
    13.  
    14.     
    15.     "stylesheet" href="editor.md/css/editormd.min.css"/>
    16.     
    17.     
    18.     
    19.     
    21.  
    24. "nav">
    25.     "img/logo2.jpg" alt="">
    26.     "title">我的博客系统
    27.     
    28.     "spacer">
    29.     "blog_list.html">主页
    30.     "javascript:logout()">注销
    33. "blog-edit-container">
    34.     
    35.     
      "title">
    36.         "title" type="text" placeholder="在这里写下文章标题">
    37.         
    38.     
    39.     
    40.     
      "editorDiv">
    41.         
    42.     
    44.  
    47.

    后端

    1. /**
    2.      * 对文章进行修改的时候也需要对拿到文章进行权限验证 拿到的文章的uid必须和登录的用户的id一致
    3.      * 防止登录的用户对其他人的文章进行篡改
    4.      */
    5.  
    6.     @RequestMapping("/getdetailbyid")
    7.     public AjaxResult getdetailbyid(Integer id, HttpServletRequest request) {
    8.         //1.对id进行判空操作
    9.         if (id == null || id <= 0) {
    10.             return AjaxResult.fail(-1, "参数错误!");
    11.         }
    12.  
    13.         //2.获取到登录用户的id
    14.         UserInfo userInfo = UserSessionTools.getLoginUser(request);
    15.         if (userInfo == null || userInfo.getId() <= 0) {
    16.             return AjaxResult.fail(-1, "参数错误!");
    17.         }
    18.  
    19.         //3.封装id和uid进行持久化操作
    20.         return AjaxResult.success(articleService.getDetailByIdAndUid(id, userInfo.getId()));
    21.     }
    22.  
    23.     @RequestMapping("/update")
    24.     public AjaxResult update(ArticleInfo articleInfo, HttpServletRequest request) {
    25.         //1.对前端传递的参数进行判空
    26.         if (articleInfo == null || articleInfo.getId() <= 0
    27.                 || !StringUtils.hasLength(articleInfo.getTitle()) || !StringUtils.hasLength(articleInfo.getContent())) {
    28.             return AjaxResult.fail(-1, "参数错误!");
    29.         }
    30.         //2.获取uid进行封装并进行持久化
    31.         UserInfo userInfo = UserSessionTools.getLoginUser(request);
    32.         if (userInfo == null || userInfo.getId() <= 0) {
    33.             return AjaxResult.fail(-1, "参数错误!");
    34.         }
    35.         articleInfo.setUid(userInfo.getId());
    36.         articleInfo.setUpdatetime(LocalDateTime.now());
    37.         //3.给前端返回数据
    38.         int result = articleService.update(articleInfo);
    39.         return AjaxResult.success(result);
    40.     }

    根据文章id进行查找文章时,必须要进行校验,确保查询到的文章时该登录用户的文章,即文章表中的uid = 用户表中的id.

  • 相关阅读:
    continue和break的区别与用法
    [附源码]java毕业设计火车票预订系统论文2022
    NSS [NCTF 2018]小绿草之最强大脑
    华为机考：HJ43 迷宫问题
    【linux】日常用的linux命令总结
    灰度发布、蓝绿发布、滚动发布
    机器学习算法（7）—— 朴素贝叶斯算法
    4、FFmpeg命令行操作7
    接口调试工具概论
    SAP-MM-收货操作报错123
  • 原文地址：https://blog.csdn.net/qq_47908816/article/details/133483972