springboot+jwt+shiro+vue+elementUI+axios+redis+mysql简易博客项目

小灰灰 2024-03-27 14:29 2阅读 0赞

## springboot+jwt+shiro+vue+elementUI+axios+redis+mysql简易博客项目 ##

### 简介 ###

本项目是一个结合springboot+jwt+shiro+vue+elementUI+axios+redis+mysql这些技术的一个练手的简单的博客系统

## 后端 ##

### 项目搭建 ###

#### 数据库创建 ####

*  m\_user.sql

*  m\_blog.sql

/*
     Navicat MySQL Data Transfer
    
     Source Server         : localhost_3306
     Source Server Type    : MySQL
     Source Server Version : 80028
     Source Host           : localhost:3306
     Source Schema         : vueblog
    
     Target Server Type    : MySQL
     Target Server Version : 80028
     File Encoding         : 65001
    
     Date: 08/02/2023 08:53:40
    */
    
    SET NAMES utf8mb4;
    SET FOREIGN_KEY_CHECKS = 0;
    
    -- ----------------------------
    -- Table structure for m_blog
    -- ----------------------------
    DROP TABLE IF EXISTS `m_blog`;
    CREATE TABLE `m_blog`  (
      `id` bigint NOT NULL AUTO_INCREMENT,
      `user_id` bigint NOT NULL,
      `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
      `description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
      `content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
      `created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,
      `status` tinyint NULL DEFAULT NULL,
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 18 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    
    -- ----------------------------
    -- Records of m_blog
    -- ----------------------------
    INSERT INTO `m_blog` VALUES (1, 1, '生活就像海洋，只有意志坚强的人才能到达彼岸', '这里是摘要哈哈哈', '内容？？？', '2020-05-21 22:08:42', 0);
    INSERT INTO `m_blog` VALUES (2, 1, '最值得学习的博客项目eblog', 'eblog是一个基于Springboot2.1.2开发的博客学习项目，为了让项目融合更多的知识点，达到学习目的，编写了详细的从0到1开发文档。主要学习包括：自定义Freemarker标签，使用shiro+redis完成了会话共享，redis的zset结构完成本周热议排行榜，t-io+websocket完成即时消息通知和群聊，rabbitmq+elasticsearch完成博客内容搜索引擎等。值得学习的地方很多！', '**推荐阅读：**\r\n\r\n[分享一套SpringBoot开发博客系统源码，以及完整开发文档！速度保存！](https://mp.weixin.qq.com/s/jz6e977xP-OyaAKNjNca8w)\r\n\r\n[Github上最值得学习的100个Java开源项目，涵盖各种技术栈！](https://mp.weixin.qq.com/s/N-U0TaEUXnBFfBsmt_OESQ)\r\n\r\n[2020年最新的常问企业面试题大全以及答案](https://mp.weixin.qq.com/s/lR5LC5GnD2Gs59ecV5R0XA)', '2020-05-28 09:36:38', 0);
    INSERT INTO `m_blog` VALUES (3, 1, '关注公众号JavaCat，回复xshell或navicat获取破解对应工具', '视频中所用到的xshell和navicat直接获取哈！', '### 工具获取\r\n\r\n* xshell 6 绿色破解版：关注公众号：JavaCat，回复 xshell 获取\r\n* Navicat 11 简体中文版：关注公众号：JavaCat，回复 navicat 获取\r\n\r\n公众号二维码：\r\n\r\n[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QzWS88Se-1675817747671)(//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20201020/7fa16a1f957f4cfebe7be1f6675f6f36.png \"JavaCat\")]\r\n\r\n直接扫码回复对应关键字\r\n\r\n**推荐阅读：**\r\n\r\n[B站86K播放量，SpringBoot+Vue前后端分离完整入门教程！](https://mp.weixin.qq.com/s/jGEkHTf2X8l-wUenc-PpEw)\r\n\r\n[分享一套SpringBoot开发博客系统源码，以及完整开发文档！速度保存！](https://mp.weixin.qq.com/s/jz6e977xP-OyaAKNjNca8w)\r\n\r\n[Github上最值得学习的100个Java开源项目，涵盖各种技术栈！](https://mp.weixin.qq.com/s/N-U0TaEUXnBFfBsmt_OESQ)\r\n\r\n[2020年最新的常问企业面试题大全以及答案](https://mp.weixin.qq.com/s/lR5LC5GnD2Gs59ecV5R0XA)', '2020-10-20 05:05:31', 0);
    INSERT INTO `m_blog` VALUES (7, 1, '你真的会写单例模式吗?', '单例模式可能是代码最少的模式了，但是少不一定意味着简单，想要用好、用对单例模式，还真得费一番脑筋。本文对 Java 中常见的单例模式写法做了一个总结，如有错漏之处，恳请读者指正。', '> 作者：吃桔子的攻城狮 来源：http://www.tekbroaden.com/singleton-java.html\n\n\n单例模式可能是代码最少的模式了，但是少不一定意味着简单，想要用好、用对单例模式，还真得费一番脑筋。本文对 Java 中常见的单例模式写法做了一个总结，如有错漏之处，恳请读者指正。\n\n饿汉法\n===\n\n顾名思义，饿汉法就是在第一次引用该类的时候就创建对象实例，而不管实际是否需要创建。代码如下：\n\n```\npublic class Singleton {  \n    private static Singleton = new Singleton();\n    private Singleton() {}\n    public static getSignleton(){\n        return singleton;\n    }\n}\n\n```\n\n这样做的好处是编写简单，但是无法做到延迟创建对象。但是我们很多时候都希望对象可以尽可能地延迟加载，从而减小负载，所以就需要下面的懒汉法：\n', '2020-05-22 00:42:44', 0);
    INSERT INTO `m_blog` VALUES (9, 1, '真正理解Mysql的四种隔离级别@', '事务是应用程序中一系列严密的操作，所有操作必须成功完成，否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性，一个事务中的一系列的操作要么全部成功，要么一个都不做。\n\n事务的结束有两种，当事务中的所以步骤全部成功执行时，事务提交。如果其中一个步骤失败，将发生回滚操作，撤消撤消之前到事务开始时的所以操作。', '### 什么是事务  \n\n> 事务是应用程序中一系列严密的操作，所有操作必须成功完成，否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性，一个事务中的一系列的操作要么全部成功，要么一个都不做。\n> \n> 事务的结束有两种，当事务中的所以步骤全部成功执行时，事务提交。如果其中一个步骤失败，将发生回滚操作，撤消撤消之前到事务开始时的所以操作。\n\n**事务的 ACID**\n\n事务具有四个特征：原子性（ Atomicity ）、一致性（ Consistency ）、隔离性（ Isolation ）和持续性（ Durability ）。这四个特性简称为 ACID 特性。\n\n> 1 、原子性。事务是数据库的逻辑工作单位，事务中包含的各操作要么都做，要么都不做\n> \n> 2 、一致性。事 务执行的结果必须是使数据库从一个一致性状态变到另一个一致性状态。因此当数据库只包含成功事务提交的结果时，就说数据库处于一致性状态。如果数据库系统 运行中发生故障，有些事务尚未完成就被迫中断，这些未完成事务对数据库所做的修改有一部分已写入物理数据库，这时数据库就处于一种不正确的状态，或者说是 不一致的状态。', '2020-05-22 22:04:46', 0);
    INSERT INTO `m_blog` VALUES (10, 1, '博客项目eblog讲解视频上线啦，长达17个小时！！', '1. 慕课网免费资源好久都没更新了，新教程大都付费\n2. B站上的视频繁多，通过收藏和弹幕数量通常很容易判断出视频是否优质\n3. 讲真，B站的弹幕文化，让我觉得，我不是一个在学习，自古人才出评论。哈哈哈\n4. B站视频通常广告少，up主的用心录制，通常只为了你关注他', 'ok，再回到我们的eblog项目，源码、文档、视频我都开源出来了。来些基本操作：github上给个star，B站视频给个三连支持咧。\n\neblog源码：https://github.com/MarkerHub/eblog\n\n点击这里：[10+篇完整开发文档](https://mp.weixin.qq.com/mp/homepage?__biz=MzIwODkzOTc1MQ==&hid=1&sn=8e512316c3dfe140e636d0c996951166)\n\n[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-us5jzoND-1675817747672)(//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200508/c290d945b7d24c79b172759bdb5b94e0.png)]\n\n视频讲解：（记得关注我噢！）\n\nhttps://www.bilibili.com/video/BV1ri4y1x71A\n\n[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K10Mp6cC-1675817747672)(//image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/20200508/983b5abc1c934360a1a1362347a275f7.png)]\n\n项目其实还很多bug的，哈哈，我还需要进行二次迭代，到时候再发迭代文档出来。\n\n关注下我的B站，作为一个自媒体的自由职业者，没有什么比涨粉更让我开心的了，嘻嘻。\n\n近期即将推出的视频教程：\n\n1. 搭建脚手架，前后端分离首秀\n2. Shiro入门到精通教程\n3. SpringBoot2.2.6最新入门教程', '2020-05-22 22:05:49', 0);
    INSERT INTO `m_blog` VALUES (15, 1, '测试标题1', '描述2', '内容3', '2023-02-07 14:48:57', 0);
    
    SET FOREIGN_KEY_CHECKS = 1;

**运行结果**  
这两个表的关系为，m\_user是用户表，然后了这个m\_blog是博客表，通过博客表的user\_id进行关联

![在这里插入图片描述][4e8c4719a48c4a93ad81147c55e98471.png]

### 创建项目 ###

#### 配置pom.xml ####

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.7.8</version>
            <relativePath/> 
        </parent>
        <groupId>com.markerhub</groupId>
        <artifactId>vueblog</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>vueblog</name>
        <description>vueblog</description>
        <properties>
            <java.version>1.8</java.version>
        </properties>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>com.mysql</groupId>
                <artifactId>mysql-connector-j</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
    
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.2.0</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-freemarker</artifactId>
            </dependency>
            <dependency>
                <groupId>org.crazycake</groupId>
                <artifactId>shiro-redis-spring-boot-starter</artifactId>
                <version>3.2.1</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-generator</artifactId>
                <version>3.2.0</version>
            </dependency>
    
    
            
            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>5.3.3</version>
            </dependency>
    
            
            <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>
            <dependency>
                <groupId>org.hibernate.validator</groupId>
                <artifactId>hibernate-validator</artifactId>
                <version>6.0.0.Final</version>
            </dependency>
    
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>

#### application.yml ####

# DataSource Config
    spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
        username: root
        password: 123456
    mybatis-plus:
      mapper-locations: classpath*:/mapper/**Mapper.xml
    server:
      port: 8082
    
    shiro-redis:
      enabled: true
      redis-manager:
        host: 127.0.0.1:6379
    
    markerhub:
      jwt:
        secret: f4e2e52034348f86b67cde581c0f9eb5
        expire: 604800
        header: Authorization

### 配置代码生成器 ###

#### 配置分页MybatisPlusConfig+生成代码(dao 、service、serviceImpl等) ####

![在这里插入图片描述][848218f8274a4d08937f32cdf3d9489a.png]  
**完整代码**

package com.markerhub.config;
    
    import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.transaction.annotation.EnableTransactionManagement;
    @Configuration
    @EnableTransactionManagement
    @MapperScan("com.markerhub.mapper")
    public class MybatisPlusConfig {
        
        @Bean
        public PaginationInterceptor paginationInterceptor() {
        
            PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
            return paginationInterceptor;
        }
    }

#### 生成代码 ####

修改对应的数据库:账号密码、数据库名、包配置(ctrl+f可找到对应位置)  
![在这里插入图片描述][d05c2b8a51fe4270bde443a48b4686f6.png]  
![在这里插入图片描述][196e29d95c384c58875631454e3134b2.png]

**代码生成器代码**

package com.markerhub;
    
    import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
    import com.baomidou.mybatisplus.core.toolkit.StringPool;
    import com.baomidou.mybatisplus.core.toolkit.StringUtils;
    import com.baomidou.mybatisplus.generator.AutoGenerator;
    import com.baomidou.mybatisplus.generator.InjectionConfig;
    import com.baomidou.mybatisplus.generator.config.*;
    import com.baomidou.mybatisplus.generator.config.po.TableInfo;
    import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
    import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Scanner;
    
    // 演示例子，执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
    public class CodeGenerator {
        
    
        /**
         * <p>
         * 读取控制台内容
         * </p>
         */
        public static String scanner(String tip) {
        
            Scanner scanner = new Scanner(System.in);
            StringBuilder help = new StringBuilder();
            help.append("请输入" + tip + "：");
            System.out.println(help.toString());
            if (scanner.hasNext()) {
        
                String ipt = scanner.next();
                if (StringUtils.isNotEmpty(ipt)) {
        
                    return ipt;
                }
            }
            throw new MybatisPlusException("请输入正确的" + tip + "！");
        }
    
        public static void main(String[] args) {
        
            // 代码生成器
            AutoGenerator mpg = new AutoGenerator();
    
            // 全局配置
            GlobalConfig gc = new GlobalConfig();
            String projectPath = System.getProperty("user.dir");
            gc.setOutputDir(projectPath + "/src/main/java");
    //        gc.setOutputDir("D:\\test");
            gc.setAuthor("极客李华");
            gc.setOpen(false);
            // gc.setSwagger2(true); 实体属性 Swagger2 注解
            gc.setServiceName("%sService");
            mpg.setGlobalConfig(gc);
    
            // 数据源配置
            DataSourceConfig dsc = new DataSourceConfig();
            dsc.setUrl("jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC");
            // dsc.setSchemaName("public");
            dsc.setDriverName("com.mysql.cj.jdbc.Driver");
            dsc.setUsername("root");
            dsc.setPassword("123456");
            mpg.setDataSource(dsc);
    
            // 包配置
            PackageConfig pc = new PackageConfig();
            pc.setModuleName(null);
            pc.setParent("com.markerhub");
            mpg.setPackageInfo(pc);
    
            // 自定义配置
            InjectionConfig cfg = new InjectionConfig() {
        
                @Override
                public void initMap() {
        
                    // to do nothing
                }
            };
    
            // 如果模板引擎是 freemarker
            String templatePath = "/templates/mapper.xml.ftl";
            // 如果模板引擎是 velocity
            // String templatePath = "/templates/mapper.xml.vm";
    
            // 自定义输出配置
            List<FileOutConfig> focList = new ArrayList<>();
            // 自定义配置会被优先输出
            focList.add(new FileOutConfig(templatePath) {
        
                @Override
                public String outputFile(TableInfo tableInfo) {
        
                    // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                    return projectPath + "/src/main/resources/mapper/"
                            + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
                }
            });
    
            cfg.setFileOutConfigList(focList);
            mpg.setCfg(cfg);
    
            // 配置模板
            TemplateConfig templateConfig = new TemplateConfig();
    
            templateConfig.setXml(null);
            mpg.setTemplate(templateConfig);
    
            // 策略配置
            StrategyConfig strategy = new StrategyConfig();
            strategy.setNaming(NamingStrategy.underline_to_camel);
            strategy.setColumnNaming(NamingStrategy.underline_to_camel);
            strategy.setEntityLombokModel(true);
            strategy.setRestControllerStyle(true);
            strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
            strategy.setControllerMappingHyphenStyle(true);
            strategy.setTablePrefix("m_");
            mpg.setStrategy(strategy);
            mpg.setTemplateEngine(new FreemarkerTemplateEngine());
            mpg.execute();
        }
    }

#### 第三步 做测试 ####

当前的UserController  
**完整代码**

package com.markerhub.controller;
    
    
    import cn.hutool.core.lang.Assert;
    import cn.hutool.crypto.SecureUtil;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.markerhub.common.lang.Result;
    import com.markerhub.entity.User;
    import com.markerhub.service.UserService;
    import org.apache.shiro.authz.annotation.RequiresAuthentication;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.validation.annotation.Validated;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.ArrayList;
    import java.util.Random;
    
    /**
     * <p>
     *  前端控制器
     * </p>
     *
     * @author 极客李华
     * @since 2023-02-07
     */
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
        
        @Autowired
        UserService userService;
    
        @ResponseBody
        @GetMapping("/index")
        public Object index(){
        
            User user = userService.getById(1L);
            return Result.succ(200, "操作成功", user);
        }
        
    }

通过postman进行测试

![在这里插入图片描述][953d135958a7496994c0d55e9f058a15.png]

### 统一结果封装 ###

这里我们用到了一个Result的类，这个用于我们的异步统一返回的结果封装。一般来说，结果里面有几个要素必要的

*  是否成功，可用code表示（如200表示成功，400表示异常）
 *  结果消息
 *  结果数据  
    ![在这里插入图片描述][6c7725037b1841db88db15a6a44611c6.png]  
    **完整代码**

package com.markerhub.common.lang;
    
    import lombok.Data;
    
    import java.io.Serializable;
    
    @Data
    public class Result implements Serializable {
        
    
        private int code; // 200是正常，非200表示异常
        private String msg;
        private Object data;
    
        public static Result succ(Object data) {
        
            return succ(200, "操作成功", data);
        }
    
        public static Result succ(int code, String msg, Object data) {
        
            Result r = new Result();
            r.setCode(code);
            r.setMsg(msg);
            r.setData(data);
            return r;
        }
    
        public static Result fail(String msg) {
        
            return fail(400, msg, null);
        }
    
        public static Result fail(String msg, Object data) {
        
            return fail(400, msg, data);
        }
    
        public static Result fail(int code, String msg, Object data) {
        
            Result r = new Result();
            r.setCode(code);
            r.setMsg(msg);
            r.setData(data);
            return r;
        }
    
    }

### Shiro整合jwt逻辑分析 ###

#### 分析 ####

考虑到后面可能需要做集群、负载均衡等，所以就需要会话共享，而shiro的缓存和会话信息，我们一般考虑使用redis来存储这些数据，所以，我们不仅仅需要整合shiro，同时也需要整合redis。

这里使用shiro-redis来进行操作，配置简单，这里也推荐大家使用。

而因为我们需要做的是前后端分离项目的骨架，所以一般我们会采用token或者jwt作为跨域身份验证解决方案。所以整合shiro的过程中，我们需要引入jwt的身份验证过程。

在最上面的pom.xml文件中把所有的依赖都导入了，这里再提一下是哪几个

<dependency>
                <groupId>org.crazycake</groupId>
                <artifactId>shiro-redis-spring-boot-starter</artifactId>
                <version>3.2.1</version>
            </dependency> 
    		 
            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>5.3.3</version>
            </dependency>
                
            <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>

#### 创建ShiroConfig ####

文件路径：com/vueblog/config  
![在这里插入图片描述][059ab2f4de034b3187161c04bf44c2b8.png]  
完整代码

package com.markerhub.config;
    
    import com.markerhub.shiro.AccountRealm;
    import com.markerhub.shiro.JwtFilter;
    import org.apache.shiro.mgt.SecurityManager;
    import org.apache.shiro.session.mgt.SessionManager;
    import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
    import org.apache.shiro.spring.web.config.DefaultShiroFilterChainDefinition;
    import org.apache.shiro.spring.web.config.ShiroFilterChainDefinition;
    import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
    import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;
    import org.crazycake.shiro.RedisCacheManager;
    import org.crazycake.shiro.RedisSessionDAO;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    import javax.servlet.Filter;
    import java.util.HashMap;
    import java.util.LinkedHashMap;
    import java.util.Map;
    
    @Configuration
    public class ShiroConfig {
        
    
        @Autowired
        JwtFilter jwtFilter;
    
        @Bean
        public SessionManager sessionManager(RedisSessionDAO redisSessionDAO) {
        
            DefaultWebSessionManager sessionManager = new DefaultWebSessionManager();
    
            // inject redisSessionDAO
            sessionManager.setSessionDAO(redisSessionDAO);
            return sessionManager;
        }
    
        @Bean
        public DefaultWebSecurityManager securityManager(AccountRealm accountRealm,
                                                         SessionManager sessionManager,
                                                         RedisCacheManager redisCacheManager) {
        
    
            DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager(accountRealm);
    
            //inject sessionManager
            securityManager.setSessionManager(sessionManager);
    
            // inject redisCacheManager
            securityManager.setCacheManager(redisCacheManager);
            return securityManager;
        }
    
        @Bean
        public ShiroFilterChainDefinition shiroFilterChainDefinition() {
        
            DefaultShiroFilterChainDefinition chainDefinition = new DefaultShiroFilterChainDefinition();
    
            Map<String, String> filterMap = new LinkedHashMap<>();
    
            filterMap.put("/**", "jwt");
            chainDefinition.addPathDefinitions(filterMap);
            return chainDefinition;
        }
    
        @Bean("shiroFilterFactoryBean")
        public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager,
                                                             ShiroFilterChainDefinition shiroFilterChainDefinition) {
        
            ShiroFilterFactoryBean shiroFilter = new ShiroFilterFactoryBean();
            shiroFilter.setSecurityManager(securityManager);
    
            Map<String, Filter> filters = new HashMap<>();
            filters.put("jwt", jwtFilter);
            shiroFilter.setFilters(filters);
    
            Map<String, String> filterMap = shiroFilterChainDefinition.getFilterChainMap();
    
            shiroFilter.setFilterChainDefinitionMap(filterMap);
            return shiroFilter;
        }
    
    }

#### 创建AccountRealm ####

路径： com.vueblog.shiro  
这里填写这个自定义过滤器的条件  
![在这里插入图片描述][d9da8a793b2d48778670183e1de90058.png]

package com.markerhub.shiro;
    
    import cn.hutool.core.bean.BeanUtil;
    import com.markerhub.entity.User;
    import com.markerhub.service.UserService;
    import com.markerhub.util.JwtUtils;
    import org.apache.shiro.authc.*;
    import org.apache.shiro.authz.AuthorizationInfo;
    import org.apache.shiro.realm.AuthorizingRealm;
    import org.apache.shiro.subject.PrincipalCollection;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    @Component
    public class AccountRealm extends AuthorizingRealm {
        
        //为了让realm支持jwt的凭证校验
        @Override
        public boolean supports(AuthenticationToken token) {
        
            return token instanceof JwtToken;
        }
    
        //权限校验
        @Override
        protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
        
    
            return null;
        }
        //登录认证校验
        @Override
        protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        
           JwtToken jwtToken = (JwtToken) token;
    
            return null;
        }
    }

*  注意事项如果启动不了在VueblogApplication加入@MapperScan扫描mapper

@SpringBootApplication
    @MapperScan(basePackages = "com.markerhub.mapper")
    public class VueblogApplication {
        
    
        public static void main(String[] args) {
        
            SpringApplication.run(VueblogApplication.class, args);
        }
    
    }

#### 创建JwtFilter ####

![在这里插入图片描述][5df0a41401e34d19bfc0ab0a4f67c00a.png]  
**完整代码**

package com.markerhub.shiro;
    
    import cn.hutool.json.JSONUtil;
    
    import com.markerhub.common.lang.Result;
    import com.markerhub.util.JwtUtils;
    import io.jsonwebtoken.Claims;
    import org.apache.shiro.authc.AuthenticationException;
    import org.apache.shiro.authc.AuthenticationToken;
    import org.apache.shiro.authc.ExpiredCredentialsException;
    import org.apache.shiro.web.filter.authc.AuthenticatingFilter;
    import org.apache.shiro.web.util.WebUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @Component
    public class JwtFilter extends AuthenticatingFilter {
        
    
        @Autowired
        JwtUtils jwtUtils;
    
        @Override
        protected AuthenticationToken createToken(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
        
    
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            String jwt = request.getHeader("Authorization");
            if(StringUtils.isEmpty(jwt)) {
        
                return null;
            }
    
            return new JwtToken(jwt);
        }
    
        @Override
        protected boolean onAccessDenied(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
        
    
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            String jwt = request.getHeader("Authorization");
            if(StringUtils.isEmpty(jwt)) {
        
                return true;
            } else {
        
    
                // 校验jwt
                Claims claim = jwtUtils.getClaimByToken(jwt);
                if(claim == null || jwtUtils.isTokenExpired(claim.getExpiration())) {
        
                    throw new ExpiredCredentialsException("token已失效，请重新登录");
                }
    
                // 执行登录
                return executeLogin(servletRequest, servletResponse);
            }
        }
    
        @Override
        protected boolean onLoginFailure(AuthenticationToken token, AuthenticationException e, ServletRequest request, ServletResponse response) {
        
    
            HttpServletResponse httpServletResponse = (HttpServletResponse) response;
    
            Throwable throwable = e.getCause() == null ? e : e.getCause();
            Result result = Result.fail(throwable.getMessage());
            String json = JSONUtil.toJsonStr(result);
    
            try {
        
                httpServletResponse.getWriter().print(json);
            } catch (IOException ioException) {
        
    
            }
            return false;
        }
    
        @Override
        protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
        
    
            HttpServletRequest httpServletRequest = WebUtils.toHttp(request);
            HttpServletResponse httpServletResponse = WebUtils.toHttp(response);
            httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
            httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
            httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
            // 跨域时会首先发送一个OPTIONS请求，这里我们给OPTIONS请求直接返回正常状态
            if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
        
                httpServletResponse.setStatus(org.springframework.http.HttpStatus.OK.value());
                return false;
            }
    
            return super.preHandle(request, response);
        }
    }

#### 创建JwtToken ####

![在这里插入图片描述][72f881e13a72401b87d757659b8daed1.png]

package com.markerhub.shiro;
    
    import org.apache.shiro.authc.AuthenticationToken;
    
    public class JwtToken implements AuthenticationToken {
        
    
        private String token;
    
        public JwtToken(String jwt) {
        
            this.token = jwt;
        }
    
        @Override
        public Object getPrincipal() {
        
            return token;
        }
    
        @Override
        public Object getCredentials() {
        
            return token;
        }
    }

#### 创建JwtUtils ####

![在这里插入图片描述][6854fd9e905a4f8293cc5ab1b390bd73.png]

package com.markerhub.util;
    
    import io.jsonwebtoken.Claims;
    import io.jsonwebtoken.Jwts;
    import io.jsonwebtoken.SignatureAlgorithm;
    import lombok.Data;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.stereotype.Component;
    
    import java.util.Date;
    
    /**
     * jwt工具类
     */
    @Slf4j
    @Data
    @Component
    @ConfigurationProperties(prefix = "markerhub.jwt")
    public class JwtUtils {
        
    
        private String secret;
        private long expire;
        private String header;
    
        /**
         * 生成jwt token
         */
        public String generateToken(long userId) {
        
            Date nowDate = new Date();
            //过期时间
            Date expireDate = new Date(nowDate.getTime() + expire * 1000);
    
            return Jwts.builder()
                    .setHeaderParam("typ", "JWT")
                    .setSubject(userId+"")
                    .setIssuedAt(nowDate)
                    .setExpiration(expireDate)
                    .signWith(SignatureAlgorithm.HS512, secret)
                    .compact();
        }
    
        public Claims getClaimByToken(String token) {
        
            try {
        
                return Jwts.parser()
                        .setSigningKey(secret)
                        .parseClaimsJws(token)
                        .getBody();
            }catch (Exception e){
        
                log.debug("validate is token error ", e);
                return null;
            }
        }
    
        /**
         * token是否过期
         * @return  true：过期
         */
        public boolean isTokenExpired(Date expiration) {
        
            return expiration.before(new Date());
        }
    }

#### 创建spring-devtools.properties ####

里面的内容为`restart.include.shiro-redis=/shiro-[\\w-\\.]+jar`  
![在这里插入图片描述][277350965190454cba448dcd513bc40c.png]

#### Shiro逻辑开发 ####

创建类AccountProfile 用于传递数据

package com.markerhub.shiro;
    
    import lombok.Data;
    
    import java.io.Serializable;
    
    @Data
    public class AccountProfile implements Serializable {
        
    
        private Long id;
    
        private String username;
    
        private String avatar;
    
        private String email;
    
    }

*  完善AccountRealm

package com.markerhub.shiro;
    
    import cn.hutool.core.bean.BeanUtil;
    import com.markerhub.entity.User;
    import com.markerhub.service.UserService;
    import com.markerhub.util.JwtUtils;
    import org.apache.shiro.authc.*;
    import org.apache.shiro.authz.AuthorizationInfo;
    import org.apache.shiro.realm.AuthorizingRealm;
    import org.apache.shiro.subject.PrincipalCollection;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    @Component
    public class AccountRealm extends AuthorizingRealm {
        
    
        @Autowired
        JwtUtils jwtUtils;
    
        @Autowired
        UserService userService;
    
        @Override
        public boolean supports(AuthenticationToken token) {
        
            return token instanceof JwtToken;
        }
    
        @Override
        protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
        
            return null;
        }
    
        @Override
        protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        
    
            JwtToken jwtToken = (JwtToken) token;
    
            String userId = jwtUtils.getClaimByToken((String) jwtToken.getPrincipal()).getSubject();
    
            User user = userService.getById(Long.valueOf(userId));
            if (user == null) {
        
                throw new UnknownAccountException("账户不存在");
            }
    
    
    
            AccountProfile profile = new AccountProfile();
            BeanUtil.copyProperties(user, profile);
    
            return new SimpleAuthenticationInfo(profile, jwtToken.getCredentials(), getName());
        }
    }

#### 异常处理 ####

创建GlobalExceptionHandler 类  
捕获全局异常  
![在这里插入图片描述][60591d35483349839f45bb07d2887d10.png]

package com.markerhub.common.exception;
    
    import com.markerhub.common.lang.Result;
    import lombok.extern.slf4j.Slf4j;
    import org.apache.shiro.ShiroException;
    import org.springframework.http.HttpStatus;
    import org.springframework.validation.BindingResult;
    import org.springframework.validation.ObjectError;
    import org.springframework.web.bind.MethodArgumentNotValidException;
    import org.springframework.web.bind.annotation.ExceptionHandler;
    import org.springframework.web.bind.annotation.ResponseStatus;
    import org.springframework.web.bind.annotation.RestControllerAdvice;
    
    @Slf4j
    @RestControllerAdvice
    public class GlobalExceptionHandler {
        
    
        @ResponseStatus(HttpStatus.UNAUTHORIZED)
        @ExceptionHandler(value = ShiroException.class)
        public Result handler(ShiroException e) {
        
            log.error("运行时异常：----------------{}", e);
            return Result.fail(401, e.getMessage(), null);
        }
    
        @ResponseStatus(HttpStatus.BAD_REQUEST)
        @ExceptionHandler(value = MethodArgumentNotValidException.class)
        public Result handler(MethodArgumentNotValidException e) {
        
            log.error("实体校验异常：----------------{}", e);
            BindingResult bindingResult = e.getBindingResult();
            ObjectError objectError = bindingResult.getAllErrors().stream().findFirst().get();
    
            return Result.fail(objectError.getDefaultMessage());
        }
    
        @ResponseStatus(HttpStatus.BAD_REQUEST)
        @ExceptionHandler(value = IllegalArgumentException.class)
        public Result handler(IllegalArgumentException e) {
        
            log.error("Assert异常：----------------{}", e);
            return Result.fail(e.getMessage());
        }
    
        @ResponseStatus(HttpStatus.BAD_REQUEST)
        @ExceptionHandler(value = RuntimeException.class)
        public Result handler(RuntimeException e) {
        
            log.error("运行时异常：----------------{}", e);
            return Result.fail(e.getMessage());
        }
    
    }

*  完善UserController类  
    添加登录拦截注解 @RequiresAuthentication

package com.markerhub.controller;
    
    
    import cn.hutool.core.lang.Assert;
    import cn.hutool.crypto.SecureUtil;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.markerhub.common.lang.Result;
    import com.markerhub.entity.User;
    import com.markerhub.service.UserService;
    import org.apache.shiro.authz.annotation.RequiresAuthentication;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.validation.annotation.Validated;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.ArrayList;
    import java.util.Random;
    
    /**
     * <p>
     *  前端控制器
     * </p>
     *
     * @author 极客李华
     * @since 2023-02-07
     */
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
        
        @Autowired
        UserService userService;
    
        @ResponseBody
        @RequiresAuthentication
        @GetMapping("/index")
        public Object index(){
        
            User user = userService.getById(1L);
            return Result.succ(200, "操作成功", user);
        }
    
    }

### 实体校验 ###

当我们表单数据提交的时候，前端的校验我们可以使用一些类似于jQuery Validate等js插件实现，而后端我们可以使用Hibernate validatior来做校验。  
我们使用springboot框架作为基础，那么就已经自动集成了Hibernate validatior。

package com.markerhub.entity;
    
    import com.baomidou.mybatisplus.annotation.IdType;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.TableName;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    
    import javax.validation.constraints.Email;
    import javax.validation.constraints.NotBlank;
    import java.io.Serializable;
    import java.time.LocalDateTime;
    
    
    @Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    @TableName("m_user")
    public class User implements Serializable {
        
    
        private static final long serialVersionUID = 1L;
    
        @TableId(value = "id", type = IdType.AUTO)
        private Long id;
    
        @NotBlank(message = "昵称不能为空")
        private String username;
    
        private String avatar;
    
    
        @NotBlank(message = "密码不能为空")
        private String password;
    
    }

在UserController中写测试方法

@PostMapping("/save")
        public  Result save(@Validated @RequestBody User user){
        
    
            return Result.succ(user);
        }

使用postman进行测试  
![在这里插入图片描述][de83624b8c0b460293330928abdba466.png]

### 跨域问题 ###

因为是前后端分析，所以跨域问题是避免不了的，我们直接在后台进行全局跨域处理:  
![在这里插入图片描述][c70624c203cf46db935c42814dc67f60.png]

package com.markerhub.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * 解决跨域问题
     */
    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
        
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowCredentials(true)
                    .maxAge(3600)
                    .allowedHeaders("*");
        }
    }

*  jwtFilter进行跨域处理:

/**
         * 对跨域提供支持
         * @param request
         * @param response
         * @return
         * @throws Exception
         */
        @Override
        protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
        
            HttpServletRequest httpServletRequest = WebUtils.toHttp(request);
            HttpServletResponse httpServletResponse = WebUtils.toHttp(response);
            httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
            httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
            httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
            // 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
            if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
        
                httpServletResponse.setStatus(org.springframework.http.HttpStatus.OK.value());
                return false;
            }
            return super.preHandle(request, response);
        }

### 登录接口开发 ###

*  登录接口开发

![在这里插入图片描述][ca914c3173b04b44b17fa6941ec5861e.png]

package com.markerhub.common.dto;
    
    import lombok.Data;
    
    import javax.validation.constraints.NotBlank;
    import java.io.Serializable;
    
    @Data
    public class LoginDto implements Serializable {
        
    
        @NotBlank(message = "昵称不能为空")
        private String username;
    
        @NotBlank(message = "密码不能为空")
        private String password;
    }

*  在GlobalExceptionHandler类中增加断言异常

/**
         * 断言异常
         * @param e
         * @return
         */
        @ResponseStatus(HttpStatus.BAD_REQUEST)
        @ExceptionHandler(value = IllegalArgumentException.class)
        public Result handler(IllegalArgumentException e){
        
            log.error("Assert异常:------------------>{}",e);
            return Result.fail(e.getMessage());
        }

*  创建AccountController类  
    编写登录，注册，退出逻辑

package com.markerhub.controller;
    
    import cn.hutool.core.map.MapUtil;
    import cn.hutool.crypto.SecureUtil;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.markerhub.common.dto.LoginDto;
    import com.markerhub.common.lang.Result;
    import com.markerhub.entity.User;
    import com.markerhub.service.UserService;
    import com.markerhub.util.JwtUtils;
    import org.apache.shiro.SecurityUtils;
    import org.apache.shiro.authz.annotation.RequiresAuthentication;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.util.Assert;
    import org.springframework.validation.annotation.Validated;
    import org.springframework.web.bind.annotation.*;
    
    import javax.servlet.http.HttpServletResponse;
    import java.util.ArrayList;
    import java.util.Random;
    
    @RestController
    public class AccountController {
        
    
        @Autowired
        UserService userService;
    
        @Autowired
        JwtUtils jwtUtils;
    
        // 登录处理
        @PostMapping("/login")
        public Result login(@Validated @RequestBody LoginDto loginDto, HttpServletResponse response) {
        
    
            User user = userService.getOne(new QueryWrapper<User>().eq("username", loginDto.getUsername()));
            // 通过断点处理是否用户名为空
            Assert.notNull(user, "用户不存在");
    
    
            if(!user.getPassword().equals(SecureUtil.md5(loginDto.getPassword()))){
        
                return Result.fail("密码不正确");
            }
            // 获取当前user的jwt令牌
            String jwt = jwtUtils.generateToken(user.getId());
    
            // 后面返回的时候把这个令牌也返回 让令牌延期
            response.setHeader("Authorization", jwt);
            response.setHeader("Access-control-Expose-Headers", "Authorization");
    
            return Result.succ(MapUtil.builder()
                    .put("id", user.getId())
                    .put("username", user.getUsername())
                    .put("avatar", user.getAvatar())
                    .map()
            );
        }
        @RequestMapping(value = "/register",method = RequestMethod.POST)
        @ResponseBody
        public Result save(@RequestBody User user){
        
            if (userService.getOne(new QueryWrapper<User>().eq("username", user.getUsername())) != null){
        
                cn.hutool.core.lang.Assert.isNull(user, "用户已存在");
            }
            // 随机生成一个头像
            ArrayList<String> arrayList = new ArrayList<>();
            arrayList.add("https://pic3.zhimg.com/v2-d6ddf0128212235dddf76df7f4383f53.jpg");
            arrayList.add("https://p0.ssl.img.360kuai.com/t01948ff2341a5d1ac3.jpg");
            arrayList.add("https://pic3.zhimg.com/v2-65020b1231ba55d55ee3d6a29ff3df26_r.jpg");
            arrayList.add("https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg");
            arrayList.add("https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg");
            Random random = new Random();
            user.setAvatar(arrayList.get(random.nextInt(arrayList.size())));
            System.out.println(user);
            user.setPassword(SecureUtil.md5(user.getPassword()));
            userService.save(user);
            return Result.succ(user);
        }
    
    
        // 登出处理
        @RequiresAuthentication
        @GetMapping("/logout")
        public Result logout() {
        
            SecurityUtils.getSubject().logout();
            return Result.succ(null);
        }
    
    }

*  postman测试
 *  登录测试  
    ![在这里插入图片描述][019ec6c2f290444fadae357448887aac.png]
 *  注册测试  
    当用户已经存在的时候的情况

![在这里插入图片描述][bf5cc4674cf741bfa65d84146b3e6b6e.png]

![在这里插入图片描述][4d5b7b5e78f74a26bc2ab2dbe1ad3fe3.png]

### 博客接口的开发 ###

*  创建工具类ShiroUtil![在这里插入图片描述][ce7d45b3b4c54f479c8b82583a7d9257.png]

package com.markerhub.util;
    
    import com.markerhub.shiro.AccountProfile;
    import org.apache.shiro.SecurityUtils;
    
    public class ShiroUtil {
        
    
        public static AccountProfile getProfile() {
        
            return (AccountProfile) SecurityUtils.getSubject().getPrincipal();
        }
    
    }

*  完善BlogController类  
    ![在这里插入图片描述][d744cf388bb34768a728facc0f4e24ad.png]  
    完整代码

package com.markerhub.controller;
    
    
    import cn.hutool.core.bean.BeanUtil;
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.markerhub.common.lang.Result;
    import com.markerhub.entity.Blog;
    import com.markerhub.service.BlogService;
    import com.markerhub.util.ShiroUtil;
    import org.apache.shiro.authz.annotation.RequiresAuthentication;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.util.Assert;
    import org.springframework.validation.annotation.Validated;
    import org.springframework.web.bind.annotation.*;
    
    import java.time.LocalDateTime;
    
    /**
     * <p>
     *  前端控制器
     * </p>
     *
     * @author 极客李华
     * @since 2023-02-07
     */
    @RestController
    
    public class BlogController {
        
        @Autowired
        BlogService blogService;
    
        // 查询文章
        // 最开始查询的时候默认值是1 防止没有数据的情况
        @GetMapping("/blogs")
        public Result list(@RequestParam(defaultValue = "1") Integer currentPage) {
        
    
            Page page = new Page(currentPage, 5);
            // 查询条件 分页的基础上 再按照创建时间排序
            IPage pageData = blogService.page(page, new QueryWrapper<Blog>().orderByDesc("created"));
    
            // 如果成功了返回分页查询的数据
            return Result.succ(pageData);
        }
    
        // 根据id进行查询
        @GetMapping("/blog/{id}")
        public Result detail(@PathVariable(name = "id") Long id) {
        
            Blog blog = blogService.getById(id);
            // 判断文章是否被删除了
            Assert.notNull(blog, "该博客已被删除");
    
            return Result.succ(blog);
        }
    
    
        // 编辑博客
        @RequiresAuthentication
        @PostMapping("/blog/edit")
        public Result edit(@Validated @RequestBody Blog blog) {
        
    
    //        Assert.isTrue(false, "公开版不能任意编辑！");
    
            Blog temp = null;
            // 如果博客id不为空
            if(blog.getId() != null) {
        
                temp = blogService.getById(blog.getId());
                // 只能编辑自己的文章
                System.out.println(ShiroUtil.getProfile().getId());
                // 且是自己的文章 才可以编辑
                Assert.isTrue(temp.getUserId().longValue() == ShiroUtil.getProfile().getId().longValue(), "没有权限编辑");
    
            } else {
        
            // 是空的话 创建一篇
                temp = new Blog();
                temp.setUserId(ShiroUtil.getProfile().getId());
                temp.setCreated(LocalDateTime.now());
                temp.setStatus(0);
            }
            // 创建的时候把temp copy到 blog里面 然后忽略掉后面的那些属性
            BeanUtil.copyProperties(blog, temp, "id", "userId", "created", "status");
            blogService.saveOrUpdate(temp);
    
            return Result.succ(null);
        }
        // 删除文章
        //@PathVariable动态路由
        @RequiresAuthentication  //需要认证之后才能操作
        @PostMapping("/blogdel/{id}")
        public Result del(@PathVariable Long id){
        
            boolean b = blogService.removeById(id);
            //判断是否为空 为空则断言异常
            if(b==true){
        
    
                return Result.succ("文章删除成功");
            }else{
        
                return Result.fail("文章删除失败");
            }
        }
    
    }

代码测试

*  条件查询  
    ![在这里插入图片描述][ba00e27526bf462b956402de61cc32bd.png]
 *  全部查询  
    ![在这里插入图片描述][c215f4433ec8402990863267daea5cd4.png]
 *  新增编辑测试:  
    得到token

![在这里插入图片描述][d8e4888555cd4312b4d6cdd45ee801c9.png]  
选中header=>填写token

![在这里插入图片描述][67b6babed83e4b00b18f2783625a5585.png]  
编写测试信息

![在这里插入图片描述][0e00abe7412747ebb34a5797abd92fbb.png]

*  文章删除  
    ![在这里插入图片描述][aad77b5b84164a3a81ac35c581ff5fb2.png]

## 前端 ##

### 创建项目 ###

打开vue ui开始创建项目  
![在这里插入图片描述][890ea3580ca34beea0de36471db0309b.png]  
手动创建项目  
![在这里插入图片描述][19cc7bf48db84f44933a830440c949f9.png]  
目前大概这样选择  
![在这里插入图片描述][a5cbcf8fff6445b2835465d92ab20c0c.png]

选择vue2的版本

![在这里插入图片描述][cd9510e7e1cb4bc2a5e6aba2ba7f546e.png]

选择less

![在这里插入图片描述][1e3b285068354c1dbeabee132dbc3eee.png]

点击新建项目，不保存预设  
![在这里插入图片描述][c7face2f6c504b12ac1ab53d19ae0be5.png]

等待即可  
![在这里插入图片描述][7e86fe34e83845c6b6faf7e187a110e8.png]

创建完成之后的样子  
![在这里插入图片描述][3fc15d1d76f14d73adf537658bea4306.png]

先编译一下看一下这个有没有问题，是否可以正常打开  
![在这里插入图片描述][56f35f36add944e0876d9db06a405089.png]  
![在这里插入图片描述][cef87e680d2345468019e22c4a4d0863.png]

可以正常打开，好耶  
![在这里插入图片描述][4ce920dabb8a4a3ebc02293b1e53813f.png]

### 正式开始编码 ###

项目架构

├── README.md            项目介绍
    ├── index.html           入口页面
    ├── build              构建脚本目录
    │  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
    │  ├── build.js            生产环境构建脚本
    │  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    │  ├── dev-server.js          运行本地开发服务器
    │  ├── utils.js            构建相关工具方法
    │  ├── webpack.base.conf.js      wabpack基础配置
    │  ├── webpack.dev.conf.js       wabpack开发环境配置
    │  └── webpack.prod.conf.js      wabpack生产环境配置
    ├── config             项目配置
    │  ├── dev.env.js           开发环境变量
    │  ├── index.js            项目配置文件
    │  ├── prod.env.js           生产环境变量
    │  └── test.env.js           测试环境变量
    ├── mock              mock数据目录
    │  └── hello.js
    ├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
    ├── src               源码目录 
    │  ├── main.js             入口js文件
    │  ├── app.vue             根组件
    │  ├── components           公共组件目录
    │  │  └── title.vue
    │  ├── assets             资源目录，这里的资源会被wabpack构建
    │  │  └── images
    │  │    └── logo.png
    │  ├── routes             前端路由
    │  │  └── index.js
    │  ├── store              应用级数据（state）状态管理
    │  │  └── index.js
    │  └── views              页面目录
    │    ├── hello.vue
    │    └── notfound.vue
    ├── static             纯静态资源，不会被wabpack构建。
    └── test              测试文件目录（unit&e2e）
      └── unit              单元测试
        ├── index.js            入口脚本
        ├── karma.conf.js          karma配置文件
        └── specs              单测case目录
          └── Hello.spec.js

### 安装element-ui ###

在终端中运行下面命令  
`cnpm install element-ui --save`

然后我们打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
    import "element-ui/lib/theme-chalk/index.css"
    Vue.use(Element)

然后运行测试  
![在这里插入图片描述][d77267e3a6444f23bcb7d2f3d3be9499.png]

*  App.vue添加：

<div id="nav">
          <router-link to="/demo">Demo页面</router-link>
        </div>

![在这里插入图片描述][52035df9878a4c0c8b0415cf5f97d3e0.png]

*  运行项目浏览器打开项目  
    ![在这里插入图片描述][05b49f47fa204b4089126c132b7975ac.png]
 *  测试成功  
    ![在这里插入图片描述][0fb7666c333f45eeb2581dbb9678b29a.png]
 *  补充配置：  
    autoOpenBrowser修改为true。

autoOpenBrowser:true

![在这里插入图片描述][fd510cb9efaf426da0b20ea326ba3d2c.png]

*  安装axios  
    接下来，我们来安装axios（www.axios-js.com/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

安装命令:  
`cnpm install axios --save`

![在这里插入图片描述][961b7be071f34bc2bd4ded04a5fabb6e.png]

*  然后同样我们在main.js中全局引入axios

import axios from 'axios'
    //引用全局
    Vue.prototype.$axios = axios

![在这里插入图片描述][1d908288e5364642be997eea835cec49.png]

### 页面路由 ###

下载开始配置下面几个页面的路由

我们在views文件夹下定义几个页面：

BlogDetail.vue（博客详情页）  
BlogEdit.vue（编辑博客）  
Blogs.vue（博客列表）  
Login.vue（登录页面）  
![在这里插入图片描述][ed7025b44e274ffb9775b6ef417d6477.png]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login.vue'
    import Blogs from '../views/Blogs.vue'
    import BlogEdit from '../views/BlogEdit.vue'
    import BlogDetail from '../views/BlogDetail.vue'
    import Register from "../views/Register.vue";
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Index',
        redirect: {name: "Blogs"}
      },
      {
        path: '/blogs',
        name: 'Blogs',
        component: Blogs
      },
      {
        path: '/login',
        name: 'Login',
        component: Login
      },
      {
        path: '/register',
        name: 'Register',
        component: Register
      },
      {
        path: '/blog/add',
        name: 'BlogAdd',
        component: BlogEdit,
        meta: {
          requireAuth: true
        }
      },
      {
        path: '/blog/:blogId',
        name: 'BlogDetail',
        component: BlogDetail
      },
      {
        path: '/blog/:blogId/edit',
        name: 'BlogEdit',
        component: BlogEdit,
        meta: {
          requireAuth: true
        }
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

### 页面开发 ###

#### 登录页面 ####

<template>
      <div>
    
        <el-container>
          <el-header>
            <img class="mlogo" src="https://pic2.zhimg.com/v2-5e049963b2180c98d5016490b85d0768_xs.jpg" alt="">
          </el-header>
          <el-main>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
              </el-form-item>
    
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="register">注册</el-button>
              </el-form-item>
            </el-form>
    
          </el-main>
        </el-container>
    
      </div>
    </template>
    
    <script>
    export default {
          
      name: "Login",
      data() {
          
        return {
          
          ruleForm: {
          
            username: 'admin',
            password: '111111'
          },
          rules: {
          
            username: [
              {
           required: true, message: '请输入用户名', trigger: 'blur' },
              {
           min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            password: [
              {
           required: true, message: '请选择密码', trigger: 'change' }
            ]
          }
        };
      },
      methods: {
          
        submitForm(formName) {
          
          this.$refs[formName].validate((valid) => {
          
            if (valid) {
          
              const _this = this
              this.$axios.post('/login', this.ruleForm).then(res => {
          
    
                console.log(res.data)
                const jwt = res.headers['authorization']
                const userInfo = res.data.data
    
                // 把数据共享出去
                _this.$store.commit("SET_TOKEN", jwt)
                _this.$store.commit("SET_USERINFO", userInfo)
    
                // 获取
                console.log(_this.$store.getters.getUser)
    
                _this.$router.push("/blogs")
              })
    
            } else {
          
              console.log('error submit!!');
              return false;
            }
          });
        },
        register(){
          
          location.href="/register";
        }
      }
    }
    </script>
    
    <style scoped>
    .el-header, .el-footer {
          
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
          
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
          
      /*background-color: #E9EEF3;*/
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
          
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
          
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
          
      line-height: 320px;
    }
    
    .mlogo {
          
      height: 60%;
      margin-top: 10px;
    }
    
    .demo-ruleForm {
          
      max-width: 500px;
      margin: 0 auto;
    }
    
    </style>

#### 注册页面 ####

<template>
      <div>
    
        <el-container>
          <el-header>
            <img class="mlogo" src="https://pic2.zhimg.com/v2-5e049963b2180c98d5016490b85d0768_xs.jpg" alt="">
          </el-header>
          <el-main>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
              </el-form-item>
    
              <el-form-item>
                <el-button @click="submitForm('ruleForm')">注册</el-button>
              </el-form-item>
            </el-form>
    
          </el-main>
        </el-container>
    
      </div>
    </template>
    
    <script>
    export default {
          
      name: "Login",
      data() {
          
        return {
          
          ruleForm: {
          
            username: '',
            password: ''
          },
          rules: {
          
            username: [
              {
           required: true, message: '请输入用户名', trigger: 'blur' },
              {
           min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            password: [
              {
           required: true, message: '请选择密码', trigger: 'change' }
            ]
          }
        };
      },
      methods: {
          
        submitForm(formName) {
          
          this.$refs[formName].validate((valid) => {
          
    
            if (valid) {
          
              const _this = this
              this.$axios({
          
                method: "post",
                url: "/register",
                data: this.ruleForm
              }).then(function (resp) {
          
                console.log(resp.data)
                const jwt = resp.headers['authorization']
                const userInfo = resp.data.data
    
                // 把数据共享出去
                _this.$store.commit("SET_TOKEN", jwt)
                _this.$store.commit("SET_USERINFO", userInfo)
    
                // 获取
                console.log(_this.$store.getters.getUser)
                _this.$router.push("/login")
              })
            }
          });
        }}
    }
    </script>
    
    <style scoped>
    .el-header, .el-footer {
          
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
          
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
          
      /*background-color: #E9EEF3;*/
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
          
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
          
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
          
      line-height: 320px;
    }
    
    .mlogo {
          
      height: 60%;
      margin-top: 10px;
    }
    
    .demo-ruleForm {
          
      max-width: 500px;
      margin: 0 auto;
    }
    
    </style>

### 组件开发 ###

![在这里插入图片描述][66fae920bdf446e9ba1f7b0141ea53ec.png]

<template>
      <div class="m-content">
        <h3>欢迎来到极客李华的博客</h3>
        <div class="block">
          <el-avatar :size="50" :src="user.avatar"></el-avatar>
          <div>{
       { user.username }}</div>
        </div>
    
        <div class="maction">
          <span><el-link href="/blogs">主页</el-link></span>
          <el-divider direction="vertical"></el-divider>
          <span><el-link type="success" href="/blog/add">发表博客</el-link></span>
    
          <el-divider direction="vertical"></el-divider>
          <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>
    
          <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
        </div>
    
      </div>
    </template>
    
    <script>
    export default {
          
      name: "Header",
      data() {
          
        return {
          
          user: {
          
            username: '请先登录',
            avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
          },
          hasLogin: false
        }
      },
      methods: {
          
        logout() {
          
          const _this = this
          _this.$axios.get("/logout", {
          
            headers: {
          
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
          
            _this.$store.commit("REMOVE_INFO")
            _this.$router.push("/login")
    
          })
        }
      },
      created() {
          
        if(this.$store.getters.getUser.username) {
          
          this.user.username = this.$store.getters.getUser.username
          this.user.avatar = this.$store.getters.getUser.avatar
    
          this.hasLogin = true
        }
    
      }
    }
    </script>
    
    <style scoped>
    
    .m-content {
          
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
    }
    .maction {
          
      margin: 10px 0;
    }
    
    </style>

### 博客页面 ###

#### 富文本编辑器的安装 ####

*  安装mavon-editor
 *  基于Vue的markdown编辑器mavon-editor  
    `cnpm install mavon-editor --save`

然后在main.js中全局注册：

// 全局注册 
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)

*  Blogs.vue

<template>
      <div class="mcontaner">
        <Header></Header>
    
        <div class="block">
          <el-timeline>
    
            <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
              <el-card>
                <h4>
                  <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
                    {
       {blog.title}}
                  </router-link>
                </h4>
                <p>{
       {blog.description}}</p>
              </el-card>
            </el-timeline-item>
    
          </el-timeline>
    
          <el-pagination class="mpage"
                         background
                         layout="prev, pager, next"
                         :current-page="currentPage"
                         :page-size="pageSize"
                         :total="total"
                         @current-change=page>
          </el-pagination>
    
        </div>
    
      </div>
    </template>
    
    <script>
    import Header from "../components/Header";
    
    export default {
          
      name: "Blogs.vue",
      components: {
          Header},
      data() {
          
        return {
          
          blogs: {
          },
          currentPage: 1,
          total: 0,
          pageSize: 5
        }
      },
      methods: {
          
        page(currentPage) {
          
          const _this = this
          _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
          
            console.log(res)
            _this.blogs = res.data.data.records
            _this.currentPage = res.data.data.current
            _this.total = res.data.data.total
            _this.pageSize = res.data.data.size
    
          })
        }
      },
      created() {
          
        this.page(1)
      }
    }
    </script>
    
    <style scoped>
    
    .mpage {
          
      margin: 0 auto;
      text-align: center;
    }
    
    </style>

*  BlogEdit.vue

<template>
      <div>
        <Header></Header>
    
        <div class="m-content">
    
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
    
            <el-form-item label="摘要" prop="description">
              <el-input type="textarea" v-model="ruleForm.description"></el-input>
            </el-form-item>
    
            <el-form-item label="内容" prop="content">
              <mavon-editor v-model="ruleForm.content"></mavon-editor>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    
        </div>
    
    
    
      </div>
    </template>
    
    <script>
    import Header from "../components/Header";
    export default {
          
      name: "BlogEdit.vue",
      components: {
          Header},
      data() {
          
        return {
          
          ruleForm: {
          
            id: '',
            title: '',
            description: '',
            content: ''
          },
          rules: {
          
            title: [
              {
           required: true, message: '请输入标题', trigger: 'blur' },
              {
           min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
            ],
            description: [
              {
           required: true, message: '请输入摘要', trigger: 'blur' }
            ],
            content: [
              {
           trequired: true, message: '请输入内容', trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
          
        submitForm(formName) {
          
          this.$refs[formName].validate((valid) => {
          
            if (valid) {
          
    
              const _this = this
              this.$axios.post('/blog/edit', this.ruleForm, {
          
                headers: {
          
                  "Authorization": localStorage.getItem("token")
                }
              }).then(res => {
          
                console.log(res)
                _this.$alert('操作成功', '提示', {
          
                  confirmButtonText: '确定',
                  callback: action => {
          
                    _this.$router.push("/blogs")
                  }
                });
    
              })
    
            } else {
          
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          
          this.$refs[formName].resetFields();
        }
      },
      created() {
          
        const blogId = this.$route.params.blogId
        console.log(blogId)
        const _this = this
        if(blogId) {
          
          this.$axios.get('/blog/' + blogId).then(res => {
          
            const blog = res.data.data
            _this.ruleForm.id = blog.id
            _this.ruleForm.title = blog.title
            _this.ruleForm.description = blog.description
            _this.ruleForm.content = blog.content
          })
        }
    
      }
    }
    </script>
    
    <style scoped>
    .m-content {
          
      text-align: center;
    }
    </style>

*  BlogDetail  
    博客详情和编辑按钮的权限  
    博客详情中需要回显博客信息，然后有个问题就是，后端传过来的是博客内容是markdown格式的内容，我们需要进行渲染然后显示出来，这里我们使用一个插件markdown-it，用于解析md文档，然后导入github-markdown-c，所谓md的样式。

# 用于解析md文档
    cnpm install markdown-it --save
    # md样式
    cnpm install github-markdown-css

<template>
      <div>
        <Header></Header>
    
        <div class="mblog">
          <h2> {
       { blog.title }}</h2>
          <el-link icon="el-icon-edit" v-if="ownBlog">
            <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" >
              编辑
            </router-link>
          </el-link>
    
          <el-link icon="el-icon-delete" v-if="ownBlog" class="linklist">
            <el-button type="danger" round @click="delblog(blog.id)">删除</el-button>
          </el-link>
    
          <el-divider></el-divider>
          <div class="markdown-body" v-html="blog.content"></div>
        </div>
      </div>
    </template>
    
    <script>
    import 'github-markdown-css'
    import Header from "../components/Header";
    
    export default {
          
      name: "BlogDetail.vue",
      components: {
          Header},
      data() {
          
        return {
          
          blog: {
          
            id: "",
            title: "",
            content: ""
          },
          ownBlog: false
        }
      },
      methods: {
          
        delblog (id) {
          
          console.log("删除")
          const blogId = id
          const _this = this
          console.log(blogId)
          if (blogId) {
          
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
          
              _this.$axios.post(`/blogdel/${ blogId}`, null, {
          
                headers: {
          
                  "Authorization": localStorage.getItem("token")
                }
              }).then(res => {
          
                this.$message({
          
                  type: 'success',
                  message: res.data.data
                });
                _this.$router.push("/blogs")
              })
    
            }).catch(() => {
          
    
              this.$message({
          
                type: 'info',
                message: '已取消删除'
              });
            });
    
    
          }
        }
      },
      created() {
          
        const blogId = this.$route.params.blogId
        console.log(blogId)
        const _this = this
        this.$axios.get('/blog/' + blogId).then(res => {
          
          const blog = res.data.data
          _this.blog.id = blog.id
          _this.blog.title = blog.title
    
          var MardownIt = require("markdown-it")
          var md = new MardownIt()
    
          var result = md.render(blog.content)
          _this.blog.content = result
          // 是自己的博客的时候才可以编辑
          _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
    
        })
      }
    }
    </script>
    
    <style scoped>
    .mblog {
          
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 100%;
      min-height: 700px;
      padding: 20px 15px;
    }
    .linklist {
          
      margin: 5px;
    }
    </style>

### 路由权限拦截 ###

页面已经开发完毕之后，我们来控制一下哪些页面是需要登录之后才能跳转的，如果未登录访问就直接重定向到登录页面，因此我们在src目录下定义一个js文件：

![在这里插入图片描述][b56c82a792134e5aab1e5217df6d0937.png]

import router from "./router";
    // 路由判断登录 根据路由配置文件的参数
    router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
        const token = localStorage.getItem("token")
        console.log("------------" + token)
        if (token) { // 判断当前的token是否存在 ； 登录存入的token
          if (to.path === '/login') {
          } else {
            next()
          }
        } else {
          next({
            path: '/login'
          })
        }
      } else {
        next()
      }
    })

通过之前我们再定义页面路由时候的的meta信息，指定requireAuth: true，需要登录才能访问，因此这里我们在每次路由之前（router.beforeEach）判断token的状态，觉得是否需要跳转到登录页面。

添加：  
![在这里插入图片描述][d4fbe65bd3be430db89a9ae6c021b544.png]

{
      path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
      name: 'BlogAdd',
      meta: {
        requireAuth: true
      },
      component: BlogEdit
    },{
          path: '/blog/:blogid/edit',
          name: 'BlogEdit', 
          component: BlogEdit,
          meta: {
            requireAuth: true
          }

### 全局main.js ###

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import Element from 'element-ui'
    import axios from 'axios'
    //引用全局
    Vue.prototype.$axios = axios
    import mavonEditor from 'mavon-editor'
    
    import "element-ui/lib/theme-chalk/index.css"
    import 'mavon-editor/dist/css/index.css'
    
    import "./axios"
    import "./permission"
    Vue.use(Element)
    Vue.use(mavonEditor)
    
    Vue.config.productionTip = false
    Vue.prototype.$axios = axios
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

— 项目完结 —

[4e8c4719a48c4a93ad81147c55e98471.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a0c93e077b4240dd9730b03f8e0a2071.png
[848218f8274a4d08937f32cdf3d9489a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8e402c7a478c46dfb23f630146aad314.png
[d05c2b8a51fe4270bde443a48b4686f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b910f73b0f944e66977dcd71f72b9428.png
[196e29d95c384c58875631454e3134b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9eb98ec5b48a409dbf1d5094de4a8a25.png
[953d135958a7496994c0d55e9f058a15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b28dea2620714c7680f122cd251778fc.png
[6c7725037b1841db88db15a6a44611c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f1d22b2217fc4483ae0a0bd27e6832e2.png
[059ab2f4de034b3187161c04bf44c2b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/84018d2a77504eb1bc334b0916f88e3f.png
[d9da8a793b2d48778670183e1de90058.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7c9d0557e31c4fa68f2f87605265eb89.png
[5df0a41401e34d19bfc0ab0a4f67c00a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8fcdfd6e2c85413597f61602e3656bd2.png
[72f881e13a72401b87d757659b8daed1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9de5bf0358d44019a530fbb6ba973dcb.png
[6854fd9e905a4f8293cc5ab1b390bd73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/13d49a2af9d14fd09e409c98a44d2409.png
[277350965190454cba448dcd513bc40c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1e3c51f6238f4292a9225831f674c35e.png
[60591d35483349839f45bb07d2887d10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f107f1b6502449b49308e6fcf007bb95.png
[de83624b8c0b460293330928abdba466.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ab9e926f9b0a4d78a2b5ae8ef4921522.png
[c70624c203cf46db935c42814dc67f60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5769d3edc6a84cb693fefb7b24a181b9.png
[ca914c3173b04b44b17fa6941ec5861e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9806e3737bab400c89e36332b36dd140.png
[019ec6c2f290444fadae357448887aac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3d9a337861f64f5cbd229903ad295ec2.png
[bf5cc4674cf741bfa65d84146b3e6b6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5a99f1dd3dd64d6ca9c4068f861da200.png
[4d5b7b5e78f74a26bc2ab2dbe1ad3fe3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a06a6c9f97094000b3eef167655117a9.png
[ce7d45b3b4c54f479c8b82583a7d9257.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f56057d81ff14e2596ddc7aeaeeb184b.png
[d744cf388bb34768a728facc0f4e24ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2306fe53e1784b038f943f3f220c7b74.png
[ba00e27526bf462b956402de61cc32bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d646374d93c34c538b9ce3e070c5e6f0.png
[c215f4433ec8402990863267daea5cd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a2f48c5e11be4f63a719610e55182e8c.png
[d8e4888555cd4312b4d6cdd45ee801c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3f8bbfca09f44aba856a070b197b6e7e.png
[67b6babed83e4b00b18f2783625a5585.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/605dc88b072b4064b41efdd4932c3912.png
[0e00abe7412747ebb34a5797abd92fbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/029d2c5351f74a059f47b6aa4422acb2.png
[aad77b5b84164a3a81ac35c581ff5fb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/bb61f01b9e1647288482599ffce566d5.png
[890ea3580ca34beea0de36471db0309b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9cc643ba4a2742779b550e04a9350493.png
[19cc7bf48db84f44933a830440c949f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3f77b14294d64cd683c0d77ef015bc1b.png
[a5cbcf8fff6445b2835465d92ab20c0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1ea3b4390c5041db8f299c4a5e8036e7.png
[cd9510e7e1cb4bc2a5e6aba2ba7f546e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2c64926dad8640fbb5bd84dc99f46098.png
[1e3b285068354c1dbeabee132dbc3eee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/74b140011cf04cd4980dbecfcbe6d370.png
[c7face2f6c504b12ac1ab53d19ae0be5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/94b9b46782044e7ebbe17aca5fdd8dd4.png
[7e86fe34e83845c6b6faf7e187a110e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/415d8563a1a442d3aea3cd19b280b460.png
[3fc15d1d76f14d73adf537658bea4306.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/475d2b6edc414285931829d6cd79b644.png
[56f35f36add944e0876d9db06a405089.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7928749da1e44ae99874b8540c69a5cd.png
[cef87e680d2345468019e22c4a4d0863.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/73c5957755a6485692d5c9d06f21a06e.png
[4ce920dabb8a4a3ebc02293b1e53813f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3b382c37a5864745a1b3663414c5d30c.png
[d77267e3a6444f23bcb7d2f3d3be9499.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e79512c212f54e3dacdfcb5de6c50dbf.png
[52035df9878a4c0c8b0415cf5f97d3e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7bddbe95275644d4acbf661196703701.png
[05b49f47fa204b4089126c132b7975ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2174938da88a4aa3b90f63ab7f8aacb7.png
[0fb7666c333f45eeb2581dbb9678b29a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e7501d8a029843e0b7e3345380404ccb.png
[fd510cb9efaf426da0b20ea326ba3d2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3563d30a7a48474abd7c2b28cf545eb8.png
[961b7be071f34bc2bd4ded04a5fabb6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ce292e170fef4e918d3cffa6cc2b758b.png
[1d908288e5364642be997eea835cec49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4c47c62041194c11a2e3443838311bfb.png
[ed7025b44e274ffb9775b6ef417d6477.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1f6e71da389d4c468bedce2fb9a19545.png
[66fae920bdf446e9ba1f7b0141ea53ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d5272b280f8e48e98ae2fec8189983dc.png
[b56c82a792134e5aab1e5217df6d0937.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/61bb5fa19b0f49cb8f2559c4a970c274.png
[d4fbe65bd3be430db89a9ae6c021b544.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1341c55011724845aaf1e6444372b784.png