SSM项目前后端分离+IDEA运行环境（含前端源码）（个人博客系统）

浅浅的花香味﹌ 2023-10-12 22:47 23阅读 0赞

**目录**

后端项目环境配置

1、创建一个SpringBoot项目，添加MyBatis框架和数据库MySQL驱动依赖

2、配置项目文件：application.yml

3、创建数据库表

4、创建分层结构目录

返回统一数据格式

创建统一数据格式返回类：AjaxResult

创建实现统一数据返回的保底类：ResponseAdvice

统一处理

登录拦截器

配置拦截规则

实现用户的注册功能

步骤一：编写前端发送ajax请求代码

步骤二： 后端接收前端返回ajax数据进行判断

实体类entity

数据持久层mapper

服务层service

控制层Controller

MyBatis 配置文件插入语句

实现用户的登录功能

前端提交Ajax代码

后端验证过程代码

定义全局变量类AppVariable

数据持久层mapper

数据库配置文件mapper.xml

服务层service

控制层controller

个人信息功能

获取文章数量功能

获取文章数量前端代码

获取文章数量后端代码

实体类包vo

数据持久层ArticleMapper

服务层ArticleService

控制层controller

数据库配置文件ArticleMapper.xml

获取文章列表分类数量功能

获取文章列表分类数量前端代码

获取文章列表分类数量后端代码

创建文章列表分类实体类Articleinfo

控制层ArticleController

删除文章功能

删除文章前端代码

删除文章后端代码

ArticleMapper.xml配置

数据持久层ArticleMapper

服务层ArticleService

控制层ArticleController

注销功能

注销功能前端代码实现

注销功能后端代码实现

控制层UserController

查看详情页功能和实现阅读量功能

查询详情信息和阅读量前端代码

查询详情信息和阅读量后端代码

数据持久层ArticleMapper

ArticleMapper.xml配置信息

服务层ArticleService

控制层ArticleController

添加文章功能

前端JS代码

后端实现代码

修改文章功能

前端代码

后端代码

分页查询文章列表功能

后端代码

前端代码

密码加盐加密

1、原始明文密码存储

2、传统的加密方式：MD5

3、加盐加密算法

手动使用加盐加密实现的代码

加盐加密算法方式二：使用Spring Security 框架

--------------------

前端静态页面源码下载地址：[https://pan.baidu.com/s/1RHxWTX1xUNJdK1GNVrImsw?pwd=ofep][https_pan.baidu.com_s_1RHxWTX1xUNJdK1GNVrImsw_pwd_ofep]

提取码：ofep

本篇文章记录个人从零搭建个人博客系统总结，主要是介绍后端项目功能实现，前端代码已提前实现就不在本篇文章过多概述。

前端代码静态效果展示：

注册界面

![91b1da74b29e43da9da12a3dd44fff88.png][]

登录界面

![6bd3993f5265431da1c05b64e68b8713.png][]

博客主页界面

![163085b59623467f9c67b3ba249e5c9f.png][]

将前端代码文件导入IDEA创建的SpringBoot项目中的resources目录下面的static目录下

![36268f5e510648c0a2a6fdcf7f0d6972.png][]

## 后端项目环境配置 ##

#### 1、创建一个SpringBoot项目，添加MyBatis框架和数据库MySQL驱动依赖 ####

操作详情见之前博客文章：[https://pan.baidu.com/s/1RHxWTX1xUNJdK1GNVrImsw?pwd=ofep][https_pan.baidu.com_s_1RHxWTX1xUNJdK1GNVrImsw_pwd_ofep 1]

#### 2、配置项目文件：application.yml ####

# 配置数据库的连接字符串
    spring:
      datasource:
        url: jdbc:mysql://127.0.0.1:3306/mycnblog?characterEncoding=utf8&useSSL=false
        username: "root"
        password: "xzf1314520"
        driver-class-name: com.mysql.cj.jdbc.Driver
    
    # 配置 mybatis xml 保存路径
    mybatis:
      mapper-locations: classpath:mapper/*Mapper.xml
      configuration: # 配置打印MyBatis执行的SQL
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    # 配置打印日志输出
    logging:
      level:
        com:
          example:
            demo: debug

#### 3、创建数据库表 ####

-- 创建数据库
    drop database if exists mycnblog;
    create database mycnblog DEFAULT CHARACTER SET utf8mb4;
     
    -- 使用数据数据
    use mycnblog;
     
    -- 创建表[用户表]
    drop table if exists  userinfo;
    create table userinfo(
        id int primary key auto_increment,
        username varchar(100) not null unique,
        password varchar(100) not null,
        photo varchar(500) default '',
        createtime datetime default now(),
        updatetime datetime default now(),
        `state` int default 1
    ) default charset 'utf8mb4';
     
    -- 创建文章表
    drop table if exists  articleinfo;
    create table articleinfo(
        id int primary key auto_increment,
        title varchar(100) not null,
        content text not null,
        createtime datetime default now(),
        updatetime datetime default now(),
        uid int not null,
        rcount int not null default 1,
        `state` int default 1
    )default charset 'utf8mb4';
     
    -- 创建视频表
    drop table if exists videoinfo;
    create table videoinfo(
      	vid int primary key,
      	`title` varchar(250),
      	`url` varchar(1000),
    		createtime datetime default now(),
    		updatetime datetime default now(),
      	uid int
    )default charset 'utf8mb4';
     
    -- 添加一个用户信息
    INSERT INTO `mycnblog`.`userinfo` (`id`, `username`, `password`, `photo`, `createtime`, `updatetime`, `state`) VALUES 
    (1, 'admin', 'admin', '', '2021-12-06 17:10:48', '2021-12-06 17:10:48', 1);
     
    -- 文章添加测试数据
    insert into articleinfo(title,content,uid)
        values('Java','Java正文',1);
        
    -- 添加视频
    insert into videoinfo(vid,title,url,uid) values(1,'java title','http://www.baidu.com',1);

#### 4、创建分层结构目录 ####

数据持久层接口mapper 、服务层service 、控制层controller 、实体类entity 、 项目配置类config

![23036d312f7f4ac789893cae9161cb69.png][]

##  ##

## 返回统一数据格式 ##

### 创建统一数据格式返回类：**AjaxResult** ###

1、创建公共包commer 来存放统一的返回格式给前端

2、在公共包commer下创建一个**统一数据格式返回的类：AjaxResult**

**AjaxResult类包含了状态码、状态码描述信息以及返回的数据结果**

3、返回操作成功和失败的结果的方法

4、**AjaxResult类实现序列化接口SeriaLizable ，可以实现特殊操作，代码不会进行报错**

package com.example.demo.commer;
    import lombok.Data;
    
    import java.io.Serializable;
    
    /*
    * 返回统一数据格式
    * */
    @Data // 注解：添加get和set方法
    public class AjaxResult implements Serializable {
    
        // 状态码
        private Integer code;
        // 状态码描述信息
        private String mesg;
        // 返回的数据
        private Object data;
    
    
    
        public static AjaxResult success(Object data){
            /*
             * 操作成功返回的结果
             * */
            AjaxResult result = new AjaxResult();
            result.setCode(200);
            result.setMesg("");
            result.setData(data);
            return result;
        }
        public static AjaxResult success(Integer code,Object data){
            /*
             * 操作成功返回的结果
             * */
            AjaxResult result = new AjaxResult();
            result.setCode(code);
            result.setMesg("");
            result.setData(data);
            return result;
        }
        public static AjaxResult success(Integer code,String mesg,Object data){
            /*
             * 操作成功返回的结果
             * */
            AjaxResult result = new AjaxResult();
            result.setCode(code);
            result.setMesg(mesg);
            result.setData(data);
            return result;
        }
        public static AjaxResult fail(Integer code,String mesg,Object data){
            /*
            * 返回失败的结果
            * */
            AjaxResult result = new AjaxResult();
            result.setCode(code);
            result.setMesg(mesg);
            result.setData(null);
            return result;
        }
    
    }

当创建了统一数据返回格式类，当需要返回统一数据格式时就需要调用AjaxResult类来返回数据。然而在一个项目中许多的人会进行共同协同操作，这时就会发生忘记调用统一数据返回格式类的可能性，因此就需要创建一个在返回数据之前检测是否实现统一数据返回的保底类。

实现统一数据返回的保底类可以在返回数据之前，检测数据的类型是否为统一的对象，如果不是统一的数据返回格式，就封装成统一的数据格式

### 创建实现统一数据返回的保底类：ResponseAdvice ###

在系统的配置类中创建保底类ResponseAdvice

![924a323f51ad44818ad9d0c90dd8e8dd.png][]

package com.example.demo.config;
    
    import com.example.demo.commer.AjaxResult;
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import lombok.SneakyThrows;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.core.MethodParameter;
    import org.springframework.http.MediaType;
    import org.springframework.http.server.ServerHttpRequest;
    import org.springframework.http.server.ServerHttpResponse;
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
    /*
    *  实现统一的数据格式的返回保底类
    *  在返回数据之前进行检测数据是否为统一数据格式，如果不是统一数据格式就封装成统一的数据返回格式
    * */
    @ControllerAdvice
    public class ResponseAdvice implements ResponseBodyAdvice {
        @Autowired
        private ObjectMapper objectMapper;
    
        /*
        * 开关，如果为true,则会调用beforeBodyWrite方法
        * */
        @Override
        public boolean supports(MethodParameter returnType, Class converterType) {
            return true;
        }
    
       /*
       * 对数据格式进行封装和效验
       * */
        @Override
        @SneakyThrows // 抛出异常的注解
        public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
            if(body instanceof AjaxResult){
                return body;
            }
            if(body instanceof String ){
                    return objectMapper.writeValueAsString(AjaxResult.success(body));
            }
            return AjaxResult.success(body);
        }
    }

## 统一处理 ##

统一处理的作用就是实现统一异常处理、统一的数据返回格式以及统一登录验证拦截的实现

#### 登录拦截器 ####

登录拦截器需要实现**接口HandlerInterceptor**并且**重写 preHandle方法**

在config包下面创建登录拦截类LoginInterceptor

package com.example.demo.config;
    
    import com.example.demo.commer.AppVariable;
    import org.springframework.web.servlet.HandlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    /*
    * 登录拦截器
    * */
    public class LoginInterceptor implements HandlerInterceptor {
    
        /*
        * true -> 用户已登录
        * false -> 用户未登录
        * */
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
            HttpSession session = request.getSession();
            if(session != null && session.getAttribute(AppVariable.USER_SESSION_KEY) != null){
                // 用户已登录
                return true;
            }
                // 用户未登录 需要跳转到登录界面
            response.sendRedirect("/login.html");
            return false;
        }
    }

#### 配置拦截规则 ####

在编写完登录拦截器后，需要设置拦截规则，说明哪些是需要拦截的，哪些是不需要拦截的

在config包下面创建配置拦截规则类AppConfig, **实现接口WebMvcConfigurer** 并且**重写addInterceptors方法**

package com.example.demo.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /*
    * 配置拦截规则
    * */
    @Configuration // 拦截注解
    public class AppConfig implements WebMvcConfigurer {
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
           registry.addInterceptor(new LoginInterceptor())
                   .addPathPatterns("/**") // 拦截所有接口
                   .excludePathPatterns("/css/**")  // 不拦截css文件下所有目录
                   .excludePathPatterns("/editor.md/**") // 不拦截editor.md文件下所有目录
                   .excludePathPatterns("/img/**") // 不拦截img文件下所有目录
                   .excludePathPatterns("/js/**") // 不拦截js文件下所有目录
                   .excludePathPatterns("/login.html") // 不拦截 登录页面 文件下所有目录
                   .excludePathPatterns("/reg.html") // 不拦截 注册页面 文件下所有目录
                   //.excludePathPatterns("/blog_list.html") //不拦截 博客所有人 文件下所有目录
                   .excludePathPatterns("/blog_content.html") // 不拦截 博客列表 文件下所有目录
                   .excludePathPatterns("/art/detail")  // 不拦截 文章详情页面
                   .excludePathPatterns("/art/listbypage") // 不拦截 文章主页分页页面
                   .excludePathPatterns("/art/incr-rcount") // 不拦截阅读文章量加1
                   .excludePathPatterns("/user/login") //不拦截登录接口
                   .excludePathPatterns("/user/getuserbyid") // 不拦截查询文章详情页的用户id
                   .excludePathPatterns("/user/reg"); // 不拦截注册接口
    
        }
    }

## 实现用户的注册功能 ##

实现用户的注册功能包括两个步骤：

1、前端用户向后端发送ajax请求

2、后端接收前端返回ajax数据进行判断

#### 步骤一：编写前端发送ajax请求代码 ####

在前端**reg.html**页面编写效验和请求ajax代码

#####  #####

#### 步骤二： 后端接收前端返回ajax数据进行判断 ####

##### 实体类entity #####

package com.example.demo.entity;
    
    import lombok.Data;
    
    import java.time.LocalDateTime;
    
    @Data
    public class Userinfo {
    
        /*
        * 创建实体类对象
        * */
        private Integer id;
        private String username;
        private String password;
        private String photo;
        private LocalDateTime createtime;
        private LocalDateTime updatetime;
        private Integer state;
    }

##### 数据持久层mapper #####

package com.example.demo.mapper;
    
    import com.example.demo.entity.Userinfo;
    import org.apache.ibatis.annotations.Mapper;
    
    @Mapper
    public interface UserMapper {
    
        // 传递实体类对象，方便后续维护参数的修改
        // 注册
        public int reg(Userinfo userinfo);
    
    }

##### 服务层service #####

package com.example.demo.service;
    
    import com.example.demo.entity.Userinfo;
    import com.example.demo.mapper.UserMapper;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    @Service
    public class UserService {
    
        @Autowired
        private UserMapper userMapper;
    
        public  int reg(Userinfo userinfo){
            return userMapper.reg(userinfo);
        }
    }

##### 控制层Controller #####

package com.example.demo.controller;
    
    import com.example.demo.commer.AjaxResult;
    import com.example.demo.entity.Userinfo;
    import com.example.demo.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    @RequestMapping("/user")
    public class UserController {
        @Autowired
        private UserService userService;
    
        @RequestMapping("/reg")
        public AjaxResult reg(Userinfo userinfo){
            // 非空效验，判断前端返回参数是否非空及有效性效验
    
            //若前端返回Ajax参数为空则返回Ajax失败参数
            if(userinfo == null || !StringUtils.hasLength(userinfo.getUsername()) ||
                    !StringUtils.hasLength(userinfo.getPassword()) ){
                return AjaxResult.fail(-1,"非法参数");
            }
            //返回ajax成功参数
            return AjaxResult.success(userService.reg(userinfo));
        }
    }

##### MyBatis 配置文件插入语句 #####

UserMapping.xml

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.example.demo.mapper.UserMapper">
          <insert id="reg">
              insert into userinfo(username,password) values(#{username},#{password)
          </insert>
    </mapper>

![b62d10dae4254614a88c443043c1785e.png][]

验证注册功能是否能够按照我们的要求实现，运行项目，输入http://localhost:8080/reg.html来访问我们的注册界面

![b30d6c6e35824640a180b60d4df183d3.png][]

当注册成功后可以选择是否跳转登录界面，此时查询数据库看是否已经有数据插入数据库中

![99e5bc47a4464c039c2dbb2cdeb64039.png][]

## 实现用户的登录功能 ##

用户登录功能与注册功能逻辑差不多，都是先进行前端 提交ajax数据请求给后端，在进行效验，其中后端进行数据库查询判断用户名或者密码是否存在且正确。

#### 前端提交Ajax代码 ####

#### 后端验证过程代码 ####

后端在验证登录过程中，如果登录成功就需要将用户存储到session中，此时就先定义一个全局变量 ，用来表示用户的session

##### 定义全局变量类AppVariable #####

package com.example.demo.commer;
    /*
     * 全局变量
     * */
    public class AppVariable {
        // 用户session 的key
        public static final String USER_SESSION_KEY = "USER_SESSION_KEY";
    }

##### 数据持久层mapper #####

根据用户名来查询用户对象，返回给服务层service来调用

// 根据用户查询userinfo 对象
        Userinfo getUsername(@Param("username") String username);

##### 数据库配置文件mapper.xml #####

根据前端传递的ajax用户名，在数据库中查询是否存在该用户名

<select id="getUsername" resultType="com.example.demo.entity.Userinfo">
            select * from userinfo where username=#{username}
        </select>

##### 服务层service #####

服务层拿到数据持久层传递的用户名并返回给控制层controller

//登录方法
        public Userinfo getUsername(String username){
            return userMapper.getUsername(username);
        }

##### 控制层controller #####

1、控制层先进行前端ajax数据进行非空效验，

2、拿到前端传递的用户名数据再去数据库查询是否存在该用户名和密码

3、将从数据库查询到的密码与前端返回的密码进行比对，若**不同则将data置为null，返回给前端**

4、比对相同的话则将**用户信息存入session中进行保存记录**，然后将**密码置为空（隐藏敏感信息，保证信息安全）**，把数据返回给前端

// 登录效验
        @RequestMapping("/login")
        public AjaxResult login(HttpServletRequest request,String username, String password){
            // 1、非空效验
            //若前端返回Ajax参数为空则返回Ajax失败参数
            if(!StringUtils.hasLength(username)  || !StringUtils.hasLength(password)){
                return AjaxResult.fail(-1,"非法参数");
            }
            // 2、查询数据库
            Userinfo userinfo = userService.getUsername(username);
            if(userinfo != null && userinfo.getId() > 0){
                // 有效的用户
                // 判断两个密码是否相同
                if(password.equals(userinfo.getPassword())){
                    //登录成功
                    // 将用户存储在session中
                    HttpSession session = request.getSession();
                    session.setAttribute(AppVariable.USER_SESSION_KEY,userinfo);
                    //返回前端之前，隐藏密码等敏感信息
                    userinfo.setPassword("");
                    return AjaxResult.success(userinfo);
                }
            }
            return AjaxResult.success(0,null);
        }

运行项目，输入登录界面进行效果验证，之前注册用户名为张三、密码为123，如果登录成功的话则将跳转到博客列表主界面

![578a167c2631442f8d55de1bb761d14a.png][]

![0e2b6f37568741a6aec720f16bb27963.png][]

##  ##

#####  #####

## 个人信息功能 ##

在个人信息中可以查询最新文章数量和文章列表分类数量、删除文章和注销用户功能，在实现这些功能的前提是需要前端向后端发送ajax请求来得到数据。

## 获取文章数量功能 ##

#### 获取文章数量前端代码 ####

#### 获取文章数量后端代码 ####

在公共类commer下创建一个类记录当前登录用户的session

![68a4bc6d79134e729b322bdbbc9aef20.png][]

package com.example.demo.commer;
    
    import com.example.demo.entity.Userinfo;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    
    /**
     * 当前用户登录相关的操作
     */
    public class UserSessionUtils {
        /**
         * 得到当前的登录用户
         */
        public static Userinfo getUser(HttpServletRequest request){
            HttpSession session = request.getSession(false);
            if(session != null && session.getAttribute(AppVariable.USER_SESSION_KEY) != null){
                // 说明用户已经正常登录
                return (Userinfo) session.getAttribute(AppVariable.USER_SESSION_KEY);
            }
            return null;
        }
    }

##### 实体类包vo #####

新创建实体包vo，在包下面创建实体类UserinfoVO 继承于实体类Userinfo

新添加一个实体属性：此人发表的文章总数

package com.example.demo.entity.vo;
    
    import com.example.demo.entity.Userinfo;
    import lombok.Data;
    
    @Data
    public class UserinfoVO extends Userinfo {
    
        private Integer artCount; // 此人发表的文章总数
    
    }

##### 数据持久层ArticleMapper #####

package com.example.demo.mapper;
    
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    
    @Mapper
    public interface ArticleMapper {
    
        int getArtCountByUid(@Param("uid") Integer uid);
    }

##### 服务层ArticleService #####

package com.example.demo.service;
    
    import com.example.demo.mapper.ArticleMapper;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    @Service
    public class ArticleService {
    
        @Autowired
        private ArticleMapper articleMapper;
    
        public int getArtCountByUid(Integer uid){
            return articleMapper.getArtCountByUid(uid);
        }
    }

##### 控制层controller #####

// 获取用户id
        @RequestMapping("/showinfo")
        public AjaxResult showinfo(HttpServletRequest request){
            UserinfoVO userinfoVO = new UserinfoVO();
            // 1.得到当前的登录用户 (从session中获取)
            Userinfo userinfo = UserSessionUtils.getUser(request);
            if(userinfo == null){
                return AjaxResult.fail(-1,"非法请求");
            }
            // Spring 提供的深拷贝方法
            BeanUtils.copyProperties(userinfo,userinfoVO);
    
            // 2.得到用户发表文章的总数
            userinfoVO.setArtCount(articleService.getArtCountByUid(userinfo.getId()));
            return AjaxResult.success(userinfoVO);
        }

##### 数据库配置文件ArticleMapper.xml #####

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.example.demo.mapper.ArticleMapper">
    
        <select id="getArtCountByUid" resultType="Integer">
            select count(*) from articleinfo where uid=#{uid}
        </select>
    </mapper>

实现效果：

![ae476ddb60304f4c88590a4613720d99.png][]

![aefd5b17728246479f9a44a9695ddba1.png][]

##  ##

## 获取文章列表分类数量功能 ##

#### 获取文章列表分类数量前端代码 ####

// 获取我的文章列表数量
            function getMyArtList(){
                    jQuery.ajax({
                        url:"/art/myList",
                        method:"post",
                        data:{},
                        success:function(result){
                            if(result != null && result.code == 200){
                                // 有两种情况：发表了文章和从未发表过任何文章
                                if(result.data != null && result.data.length > 0){
                                    // 此用户发表了文章
                                    var artListDiv = "";
                                    for(var i=0; i< result.data.length;i++){
                                        var artItem = result.data[i];
                                        artListDiv += '<div class="blog">';
                                        artListDiv += '<div class="title">' + artItem.title + '</div>';
                                        artListDiv += '<div class="date">' + artItem.createtime + '</div>';
                                        artListDiv += '<div class="desc">';
                                        artListDiv += artItem.content;
                                        artListDiv += '</div>';
                                        artListDiv += '<a href="blog_content.html?id=' + artItem.id + '" class="detail">查看全文 >></a>';
                                        artListDiv += '<a href="blog_edit.html?id=' + artItem.id + '" class="detail">修改 >></a>';
                                        artListDiv += '<a href="javascript:myDel(' + artItem.id + ');" class="detail">删除 >></a>';
                                        artListDiv += '</div>';
                                    }
                                    jQuery("#artDiv").html(artListDiv);
                                }else{
                                      // 当前用户从未发表任何文章
                                      jQuery("#artDiv").html("<h3>暂无文章</h3>");
                                }
                            }else{
                              
                                alert("查询文章列表出错，请重试")
                            }
                        }
                    });
            }
            getMyArtList();

#### 获取文章列表分类数量后端代码 ####

##### 创建文章列表分类实体类Articleinfo #####

package com.example.demo.entity;
    
    import com.fasterxml.jackson.annotation.JsonFormat;
    import lombok.Data;
    
    import java.time.LocalDateTime;
    
    @Data
    public class Articleinfo {
        /**
         * 文章列表实体属性
         */
        private  Integer id;
        private String title;
        private String content;
        // 设置时间格式化
        @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
        private LocalDateTime createtime;
        // 设置时间格式化
        @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
        private LocalDateTime updatetime;
        private Integer uid;
        private Integer rcount;
        private Integer state;
    }

##### **控制层ArticleController** #####

package com.example.demo.controller;
    
    import com.example.demo.commer.AjaxResult;
    import com.example.demo.commer.UserSessionUtils;
    import com.example.demo.entity.Articleinfo;
    import com.example.demo.entity.Userinfo;
    import com.example.demo.service.ArticleService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.List;
    
    @RequestMapping("/art")
    @RestController
    public class ArticleController {
    
        @Autowired
        public ArticleService articleService;
    
        @RequestMapping("/myList")
        public AjaxResult  getMyList(HttpServletRequest request){
            Userinfo userinfo = UserSessionUtils.getUser(request);
            if(userinfo == null){
                return AjaxResult.fail(-1,"非法请求");
            }
            List<Articleinfo> list = articleService.getMyList(userinfo.getId());
            return AjaxResult.success(list);
        }
    }

实现效果：

![cf7bc3b8b30b4b40b8b2aba068ac7129.png][]

## 删除文章功能 ##

#### 删除文章前端代码 ####

#### 删除文章后端代码 ####

##### ArticleMapper.xml配置 #####

<delete id="del">
            delete from articleinfo where id = #{id} and uid = #{uid}
        </delete>

##### 数据持久层ArticleMapper #####

//  删除文章
       int del(@Param("id") Integer id,@Param("uid") Integer uid);

##### 服务层ArticleService #####

// 删除文章
        public int del(Integer id,Integer uid){
            return articleMapper.del(id,uid);
        }

##### 控制层ArticleController #####

//删除文章
        @RequestMapping("/del")
        public AjaxResult del(HttpServletRequest request,Integer id){
            if(id == null || id <= 0 ){
                // 参数有误
                return  AjaxResult.fail(-1,"参数有误");
            }
            Userinfo user = UserSessionUtils.getUser(request);
            if(user == null){
                return  AjaxResult.fail(-2,"用户未登录");
            }
            return AjaxResult.success(articleService.del(id, user.getId()));
        }

## 注销功能 ##

#### 注销功能前端代码实现 ####

// 退出登录，实现注销功能
            function logout(){
                if(confirm("确认是否注销？")){
                    jQuery.ajax({
                        url:"/user/logout",
                        method:"post",
                        data:{},
                        success:function(result){
                            if(result != null && result.code == 200){
                                location.href = "/login.html";
                            }
                        }
    
                    });
                }
            }

#### 注销功能后端代码实现 ####

##### 控制层UserController #####

// 注销 (退出登录)功能
        @RequestMapping("/logout")
        public  AjaxResult logout(HttpSession session){
            session.removeAttribute(AppVariable.USER_SESSION_KEY);
            return AjaxResult.success(1);
        }

实现效果：点击注销按钮，自动跳转登录界面

![f1808ad2dd444eefae3cedf5895eb8b6.png][]

![d6095456841f41c084f1af1170a10957.png][]

## 查看详情页功能和实现阅读量功能 ##

> **查看详情页功能包括实现用户的文章数量以及实现阅读量加1**

查看详情页功能的实现主要有以下几个步骤：

1、从rurl 中得到文章 id

2、从后端查询当前文章的详情信息以及用户uid

3、根据上一步查询的uid 查询用户的信息

4、请求后端接口实现阅读量+1

#### 查询详情信息和阅读量前端代码 ####

#### 查询详情信息和阅读量后端代码 ####

##### 数据持久层ArticleMapper #####

// 文章详情页
        Articleinfo getDetail(@Param("id") Integer id);
        // 实现阅读量加1
        int incrmentRCount(@Param("id") Integer id);

##### ArticleMapper.xml配置信息 #####

<select id="getDetail" resultType="com.example.demo.entity.Articleinfo">
            select * from articleinfo where id=#{id}
        </select>
    
        <update id="incrmentRCount">
            update articleinfo set rcount = rcount+1 where id=#{id}
        </update>

##### 服务层ArticleService #####

//  查询文章详情
        public Articleinfo getDetail(Integer id){
            return articleMapper.getDetail(id);
        }
        // 实现阅读量加1
        public int incrmentRCount (Integer id){
            return articleMapper.incrmentRCount(id);
        }

##### 控制层ArticleController #####

// 查询文章详情信息
        @RequestMapping("/detail")
        public AjaxResult getDetail(Integer id){
            if(id == null && id <= 0){
                return AjaxResult.fail(-1,"非法参数");
            }
            return AjaxResult.success(articleService.getDetail(id));
        }
    
        // 实现阅读量加1
        @RequestMapping("/incr-rcount")
        public AjaxResult incrRCount(Integer id){
            if(id != null && id >0){
                return AjaxResult.success(articleService.incrmentRCount(id));
            }
            return AjaxResult.fail(-1,"未知错误");
        }

实现效果：

点击查看全文按钮就可以进入文章详情页，查看文章详情以及文章的阅读量

![76dee90c74c5460da6ab78d3c07b1450.png][]

![bbda75b191d54fa2a7ad4d1f2ef84518.png][]

## 添加文章功能 ##

#### 前端JS代码 ####

#### 后端实现代码 ####

数据库配置文件

<insert id="add">
            insert into articleinfo(title,content,uid) values(#{title},#{content},#{uid})
        </insert>

数据持久层

// 实现添加文章
        int add(Articleinfo articleinfo);

服务层

// 实现添加文章功能
        public int add(Articleinfo articleinfo){
            return articleMapper.add(articleinfo);
        }

控制层

// 实现添加文章功能
        @RequestMapping("/add")
        public AjaxResult add(HttpServletRequest request, Articleinfo articleinfo){
            // 1、非空效验
            if(articleinfo == null || !StringUtils.hasLength(articleinfo.getTitle())
                    ||!StringUtils.hasLength(articleinfo.getContent())){
                // 非法参数
                return AjaxResult.fail(-1,"非法参数");
            }
             // 2、数据库添加操作
            // a. 得到当前登录用户的uid
            Userinfo userinfo = UserSessionUtils.getUser(request);
            if(userinfo  == null || userinfo.getId() <=0){
                // 无效的登录用户
                return AjaxResult.fail(-2,"无效的登录用户");
            }
            articleinfo.setUid(userinfo.getId());
            return AjaxResult.success(articleService.add(articleinfo));
        }

实现效果：

![85ca3552fc0340f6b2a17938d92832c9.png][]

## 修改文章功能 ##

#### 前端代码 ####

#### 后端代码 ####

控制层ArticleController

// 实现修改文章功能
        @RequestMapping("/update")
        public AjaxResult update(HttpServletRequest request, Articleinfo articleinfo) {
            // 非空效验
            if (articleinfo == null && !StringUtils.hasLength(articleinfo.getTitle()) ||
                    !StringUtils.hasLength(articleinfo.getContent()) || articleinfo.getId() == null) {
                // 非法参数
                return AjaxResult.fail(-1, "非法参数");
            }
            // 得到当前登录用户的id
            Userinfo userinfo = UserSessionUtils.getUser(request);
            if (userinfo == null && userinfo.getId() == null) {
                // 无效登录用户
                return AjaxResult.fail(-2, "无效用户");
            }
            // 核心代码：解决了修改文章归属人的问题
            articleinfo.setUid(userinfo.getId());
            return AjaxResult.success(articleService.update(articleinfo));
        }

实现效果

![88dcc3d4d94545fcb089ee3b5d77b114.png][]

## 分页查询文章列表功能 ##

#### 后端代码 ####

数据持久层ArticleMapper

// 实现文章分页
        // psize 为每页显示条数 offsize 为分数页数
        List<Articleinfo> getListByPage(@Param("psize") Integer psize,@Param("offsize") Integer offsize);

数据库配置文件ArticleMapper.xml

> **主要注意的点：在实现文章分页功能时候，使用sql查询语句：select \* from articleinfo limit A offset B;**

<select id="getListByPage" resultType="com.example.demo.entity.Articleinfo">
            select * from articleinfo limit #{psize} offset #{offsize}
        </select>

服务层ArticleService

// 实现文章分页功能
        public List<Articleinfo> getListByPage(Integer psize,Integer offsize){
            return articleMapper.getListByPage(psize, offsize);
        }

控制层ArticleController

/**
         * // 实现文章的分页功能
         * @param pindex 当前页码（从1开始）
         * @param psize 每页显示条数
         * @return
         */
        @RequestMapping("/listbypage")
        public AjaxResult getListByPage(Integer pindex,Integer psize){
            //1. 参数校正
            if(pindex == null || pindex <=1){
                pindex =1;
            }
            if(psize == null || psize <= 1){
                psize = 2;
            }
            // 分页公式的值 = （当前页码-1）* 每页显示条数
            int offset = (pindex - 1)* psize;
            List<Articleinfo> list = articleService.getListByPage(psize,offset);
            return  AjaxResult.success(list);
        }

#### 前端代码 ####

实现效果：

![700a0bf5b3f8420e81cfb37506c80335.png][]

![2eee22e995aa48a9b2e3ec0a566ff693.png][]

## 密码加盐加密 ##

##### 1、原始明文密码存储 #####

在使用明文密码进行登录或者注册时，存储在数据库时也是明文存储的，这存在一定的密码泄露风险。因为当不法分子获取到存储密码的数据库时，就会导致我们的隐私被泄露。因此需要考虑到对用户密码进行加密处理，将用户的密码进行加密处理后，再将加密后的密码存储到数据库中。

##### 2、传统的加密方式：MD5 #####

MD5加密是通过使用一种算法来对密码进行加密，生成128位密码结果，得到加密后的密码。MD5加密是不可逆的，即无法使用加密算法来解密加密的密码来得到原密码，因此是不可逆的。

> 缺点：MD5加密算法虽然是不可逆的，但**加密的字符串是固定的，存在一定规律可循**，也还是会存在密码泄露风险。
> 
> 因为：只需要提前知道明文密码对应的使用MD5加密后的加密密码 来对加密密码进行一一比对，使用暴力破解，这样就可以知道未加密的密码了，像这样**记录未加密密码与加密密码映射的表格称为彩虹表（记录了几乎所有字符串的MD5对照表）。**

##### 3、加盐加密算法 #####

加盐就是使用一组随机的字符串，系统随机生成，字符串随机的插入在明文密码的任何一个位置上，没有规律可言。然后在使用MD5对加盐的明文密码进行加密，再将得到的加密密码存储在数据库中。使用加盐加密算法会大大增加破解的难度和破解的成本。

#####  #####

### 手动使用加盐加密实现的代码 ###

package com.example.demo.commer;
    
    import org.springframework.util.DigestUtils;
    import org.springframework.util.StringUtils;
    
    
    import java.util.UUID;
    /*
    * 加盐算法的实现
    * */
    public class PasswordUtils {
        // 1.加盐并生成密码，存储到数据库中
        public static String encrypt(String password){
            // a. 产生盐值（32位）
            String salt = UUID.randomUUID().toString().replace("-","");
            // b.生成加盐后的密码
            String saltPassword = DigestUtils.md5DigestAsHex((salt+password).getBytes());
            // c.生成最后的加盐密码（保存在数据库中的密码）【约定格式：盐值+$+加盐密码】
            String finalPassword = salt +"$" +saltPassword;
    
            return finalPassword;
        }
    
        // 2.生成加盐密码并进行验证数据库密码（方法一的重载）
        public static String encrypt(String password,String salt){
            // a.使用盐值生成加密密码
            String saltPassword = DigestUtils.md5DigestAsHex((salt+password).getBytes());
            // b.生成约定格式的加密密码
            String finalPassword = salt+"$"+saltPassword;
            return finalPassword;
        }
    
        /**
         * 3.验证密码
         * inputPassword 用户输入的明文密码
         * finalPassword 数据库保存的最终密码
         */
        public static boolean check(String inputPassword,String finalPassword){
            if(StringUtils.hasLength(inputPassword) && StringUtils.hasLength(finalPassword)
                    && finalPassword.length() == 65){
                // 1.得到盐值
                String salt = finalPassword.substring(0,32); // 截取最终密码前32位为盐值
                // 2.得到之前加密的步骤，将明文密码和已经得到的盐值进行加密，生成最终得到密码
                String confirmPassword = PasswordUtils.encrypt(inputPassword,salt);
                // 对比由盐值加明文生成的加盐密码和数据库密码是否匹配
                return confirmPassword.equals(finalPassword);
            }
            return false;
        }
    }

此时就可以修改注册界面和登录界面进行加盐加密来判断密码，因此数据库就可以存储加盐加密的密码了。

登录界面的修改代码如下：

![97875a8c399a437280207059afa67e72.png][]

注册界面的修改代码如下：

![0485ad4fcb8543a6a3b2ce288d9978cb.png][]

实现效果：

重新注册新用户，查看数据库存储加盐加密的密码

![933534d8bdf7439f8228406a92d0ae42.png][]

查看数据库的存储密码，此时数据库存储的张三密码就是加盐加密后的密码，在登陆界面，重新输入用户名：张三，密码：123 仍可以登录成功

![8f08a98d44b04f4583bb7ae681c4f735.png][]

### 加盐加密算法方式二：使用Spring Security 框架 ###

![391505dee53d444d9b80cd718fef9afb.png][]

[https_pan.baidu.com_s_1RHxWTX1xUNJdK1GNVrImsw_pwd_ofep]: https://pan.baidu.com/s/1RHxWTX1xUNJdK1GNVrImsw?pwd=ofep
[91b1da74b29e43da9da12a3dd44fff88.png]: https://img-blog.csdnimg.cn/91b1da74b29e43da9da12a3dd44fff88.png
[6bd3993f5265431da1c05b64e68b8713.png]: https://img-blog.csdnimg.cn/6bd3993f5265431da1c05b64e68b8713.png
[163085b59623467f9c67b3ba249e5c9f.png]: https://img-blog.csdnimg.cn/163085b59623467f9c67b3ba249e5c9f.png
[36268f5e510648c0a2a6fdcf7f0d6972.png]: https://img-blog.csdnimg.cn/36268f5e510648c0a2a6fdcf7f0d6972.png
[https_pan.baidu.com_s_1RHxWTX1xUNJdK1GNVrImsw_pwd_ofep 1]: https://blog.csdn.net/qq_73471456/article/details/131194829?spm=1001.2014.3001.5502
[23036d312f7f4ac789893cae9161cb69.png]: https://img-blog.csdnimg.cn/23036d312f7f4ac789893cae9161cb69.png
[924a323f51ad44818ad9d0c90dd8e8dd.png]: https://img-blog.csdnimg.cn/924a323f51ad44818ad9d0c90dd8e8dd.png
[b62d10dae4254614a88c443043c1785e.png]: https://img-blog.csdnimg.cn/b62d10dae4254614a88c443043c1785e.png
[b30d6c6e35824640a180b60d4df183d3.png]: https://img-blog.csdnimg.cn/b30d6c6e35824640a180b60d4df183d3.png
[99e5bc47a4464c039c2dbb2cdeb64039.png]: https://img-blog.csdnimg.cn/99e5bc47a4464c039c2dbb2cdeb64039.png
[578a167c2631442f8d55de1bb761d14a.png]: https://img-blog.csdnimg.cn/578a167c2631442f8d55de1bb761d14a.png
[0e2b6f37568741a6aec720f16bb27963.png]: https://img-blog.csdnimg.cn/0e2b6f37568741a6aec720f16bb27963.png
[68a4bc6d79134e729b322bdbbc9aef20.png]: https://img-blog.csdnimg.cn/68a4bc6d79134e729b322bdbbc9aef20.png
[ae476ddb60304f4c88590a4613720d99.png]: https://img-blog.csdnimg.cn/ae476ddb60304f4c88590a4613720d99.png
[aefd5b17728246479f9a44a9695ddba1.png]: https://img-blog.csdnimg.cn/aefd5b17728246479f9a44a9695ddba1.png
[cf7bc3b8b30b4b40b8b2aba068ac7129.png]: https://img-blog.csdnimg.cn/cf7bc3b8b30b4b40b8b2aba068ac7129.png
[f1808ad2dd444eefae3cedf5895eb8b6.png]: https://img-blog.csdnimg.cn/f1808ad2dd444eefae3cedf5895eb8b6.png
[d6095456841f41c084f1af1170a10957.png]: https://img-blog.csdnimg.cn/d6095456841f41c084f1af1170a10957.png
[76dee90c74c5460da6ab78d3c07b1450.png]: https://img-blog.csdnimg.cn/76dee90c74c5460da6ab78d3c07b1450.png
[bbda75b191d54fa2a7ad4d1f2ef84518.png]: https://img-blog.csdnimg.cn/bbda75b191d54fa2a7ad4d1f2ef84518.png
[85ca3552fc0340f6b2a17938d92832c9.png]: https://img-blog.csdnimg.cn/85ca3552fc0340f6b2a17938d92832c9.png
[88dcc3d4d94545fcb089ee3b5d77b114.png]: https://img-blog.csdnimg.cn/88dcc3d4d94545fcb089ee3b5d77b114.png
[700a0bf5b3f8420e81cfb37506c80335.png]: https://img-blog.csdnimg.cn/700a0bf5b3f8420e81cfb37506c80335.png
[2eee22e995aa48a9b2e3ec0a566ff693.png]: https://img-blog.csdnimg.cn/2eee22e995aa48a9b2e3ec0a566ff693.png
[97875a8c399a437280207059afa67e72.png]: https://img-blog.csdnimg.cn/97875a8c399a437280207059afa67e72.png
[0485ad4fcb8543a6a3b2ce288d9978cb.png]: https://img-blog.csdnimg.cn/0485ad4fcb8543a6a3b2ce288d9978cb.png
[933534d8bdf7439f8228406a92d0ae42.png]: https://img-blog.csdnimg.cn/933534d8bdf7439f8228406a92d0ae42.png
[8f08a98d44b04f4583bb7ae681c4f735.png]: https://img-blog.csdnimg.cn/8f08a98d44b04f4583bb7ae681c4f735.png
[391505dee53d444d9b80cd718fef9afb.png]: https://img-blog.csdnimg.cn/391505dee53d444d9b80cd718fef9afb.png