springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离 ...

欢乐狗  金牌会员 | 2024-7-25 17:04:54 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 797|帖子 797|积分 2391

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

项目github地址：https://github.com/huang-hanson/vueblog
第一章 整合新建springboot,整合mybatisplus

第一步 创建项目(第八步骤就行)+数据库:

1、 修改pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.2.6.RELEASE</version>
  9.         <relativePath/>
  10.     </parent>
  11.     <groupId>com.hanson</groupId>
  12.     <artifactId>vueblog</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>vueblog</name>
  15.     <description>vueblog</description>
  17.     <dependencies>
  18.         <!-- web -->
  19.         <dependency>
  20.             <groupId>org.springframework.boot</groupId>
  21.             <artifactId>spring-boot-starter-web</artifactId>
  22.         </dependency>
  23.         <!-- devtools -->
  24.         <dependency>
  25.             <groupId>org.springframework.boot</groupId>
  26.             <artifactId>spring-boot-devtools</artifactId>
  27.             <scope>runtime</scope>
  28.             <optional>true</optional>
  29.         </dependency>
  30.         <!-- mysql -->
  31.         <dependency>
  32.             <groupId>mysql</groupId>
  33.             <artifactId>mysql-connector-java</artifactId>
  34.             <scope>runtime</scope>
  35.         </dependency>
  36.         <!-- lombok -->
  37.         <dependency>
  38.             <groupId>org.projectlombok</groupId>
  39.             <artifactId>lombok</artifactId>
  40.             <optional>true</optional>
  41.         </dependency>
  42.         <!-- testing -->
  43.         <dependency>
  44.             <groupId>org.springframework.boot</groupId>
  45.             <artifactId>spring-boot-starter-test</artifactId>
  46.             <scope>test</scope>
  47.             <exclusions>
  48.                 <exclusion>
  49.                     <groupId>org.junit.vintage</groupId>
  50.                     <artifactId>junit-vintage-engine</artifactId>
  51.                 </exclusion>
  52.             </exclusions>
  53.         </dependency>
  54.         <!--mybatis-plus-->
  55.         <dependency>
  56.             <groupId>com.baomidou</groupId>
  57.             <artifactId>mybatis-plus-boot-starter</artifactId>
  58.             <version>3.2.0</version>
  59.         </dependency>
  60.         <!-- framework: mybatis-plus代码生成需要一个模板引擎 -->
  61.         <dependency>
  62.             <groupId>org.springframework.boot</groupId>
  63.             <artifactId>spring-boot-starter-freemarker</artifactId>
  64.         </dependency>
  65.         <!--mp代码生成器-->
  66.         <dependency>
  67.             <groupId>com.baomidou</groupId>
  68.             <artifactId>mybatis-plus-generator</artifactId>
  69.             <version>3.2.0</version>
  70.         </dependency>
  71.         <!-- hutool -->
  72.         <dependency>
  73.             <groupId>cn.hutool</groupId>
  74.             <artifactId>hutool-all</artifactId>
  75.             <version>5.3.3</version>
  76.         </dependency>
  77.         <!-- jwt -->
  78.         <dependency>
  79.             <groupId>io.jsonwebtoken</groupId>
  80.             <artifactId>jjwt</artifactId>
  81.             <version>0.9.1</version>
  82.         </dependency>
  83.         <!-- shiro-redis -->
  84.         <!--    <dependency>
  85.                 <groupId>org.crazycake</groupId>
  86.                 <artifactId>shiro-redis-spring-boot-starter</artifactId>
  87.                 <version>3.2.1</version>
  88.             </dependency>-->
  89.     </dependencies>
  91.     <build>
  92.         <plugins>
  93.             <plugin>
  94.                 <groupId>org.springframework.boot</groupId>
  95.                 <artifactId>spring-boot-maven-plugin</artifactId>
  96.             </plugin>
  97.         </plugins>
  98.     </build>
  100. </project>
复制代码
2、修改配置文件

  1. # DataSource Config
  2. spring:
  3.   datasource:
  4.     driver-class-name: com.mysql.cj.jdbc.Driver
  5.     url: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
  6.     username: root
  7.     password: 123456
  8. mybatis-plus:
  9.   mapper-locations: classpath*:/mapper/**Mapper.xml
  10. server:
  11.   port: 8081
复制代码
3、创建数据库vueblog然后执行下面命令天生表

  1. DROP TABLE IF EXISTS `m_blog`;
  2. /*!40101 SET @saved_cs_client     = @@character_set_client */;
  3. SET character_set_client = utf8mb4 ;
  4. CREATE TABLE `m_blog` (
  5.   `id` bigint(20) NOT NULL AUTO_INCREMENT,
  6.   `user_id` bigint(20) NOT NULL,
  7.   `title` varchar(255) NOT NULL,
  8.   `description` varchar(255) NOT NULL,
  9.   `content` longtext,
  10.   `created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,
  11.   `status` tinyint(4) DEFAULT NULL,
  12.   PRIMARY KEY (`id`)
  13. ) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
  14. /*!40101 SET character_set_client = @saved_cs_client */;
  16. DROP TABLE IF EXISTS `m_user`;
  17. /*!40101 SET @saved_cs_client     = @@character_set_client */;
  18. SET character_set_client = utf8mb4 ;
  19. CREATE TABLE `m_user` (
  20.   `id` bigint(20) NOT NULL AUTO_INCREMENT,
  21.   `username` varchar(64) DEFAULT NULL,
  22.   `avatar` varchar(255) DEFAULT NULL,
  23.   `email` varchar(64) DEFAULT NULL,
  24.   `password` varchar(64) DEFAULT NULL,
  25.   `status` int(5) NOT NULL,
  26.   `created` datetime DEFAULT NULL,
  27.   `last_login` datetime DEFAULT NULL,
  28.   PRIMARY KEY (`id`),
  29.   KEY `UK_USERNAME` (`username`) USING BTREE
  30. ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
  31. /*!40101 SET character_set_client = @saved_cs_client */;
  33. INSERT INTO `vueblog`.`m_user` (`id`, `username`, `avatar`, `email`, `password`, `status`, `created`, `last_login`) VALUES ('1', 'markerhub', 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', '0', '2020-04-20 10:44:01', NULL);
复制代码
第二步 配置分页MybatisPlusConfig+天生代码(dao 、service、serviceImpl等)

1、配置分页

创建MybatisPlusConfig类(创建路径com/vueblog/config)
  1. package com.vueblog.config;
  3. import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
  4. import org.mybatis.spring.annotation.MapperScan;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7. import org.springframework.transaction.annotation.EnableTransactionManagement;
  9. /**
  10. * @author hanson
  11. * @date 2024/5/17 14:02
  12. */
  13. @Configuration
  14. @EnableTransactionManagement
  15. @MapperScan("com.hanson.mapper")
  16. public class MybatisPlusConfig {
  17.     @Bean
  18.     public PaginationInterceptor paginationInterceptor() {
  19.         PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
  20.         return paginationInterceptor;
  21.     }
  22. }
复制代码
2、天生代码

创建CodeGenerator(在com.vueblog包下面)
修改对应的数据库:账号暗码、数据库名、包配置(ctrl+f可找到对应位置)
然后运行输入俩表 ,号隔开是多表
  1. package com.vueblog;
  3. import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
  4. import com.baomidou.mybatisplus.core.toolkit.StringPool;
  5. import com.baomidou.mybatisplus.core.toolkit.StringUtils;
  6. import com.baomidou.mybatisplus.generator.AutoGenerator;
  7. import com.baomidou.mybatisplus.generator.InjectionConfig;
  8. import com.baomidou.mybatisplus.generator.config.*;
  9. import com.baomidou.mybatisplus.generator.config.po.TableInfo;
  10. import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
  11. import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
  13. import java.util.ArrayList;
  14. import java.util.List;
  15. import java.util.Scanner;
  17. /**
  18. * @author hanson
  19. * @date 2024/5/17 14:06
  20. */
  21. // 演示例子，执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
  22. public class CodeGenerator {
  24.     /**
  25.      * <p>
  26.      * 读取控制台内容
  27.      * </p>
  28.      */
  29.     public static String scanner(String tip) {
  30.         Scanner scanner = new Scanner(System.in);
  31.         StringBuilder help = new StringBuilder();
  32.         help.append("请输入" + tip + "：");
  33.         System.out.println(help.toString());
  34.         if (scanner.hasNext()) {
  35.             String ipt = scanner.next();
  36.             if (StringUtils.isNotEmpty(ipt)) {
  37.                 return ipt;
  38.             }
  39.         }
  40.         throw new MybatisPlusException("请输入正确的" + tip + "！");
  41.     }
  43.     public static void main(String[] args) {
  44.         // 代码生成器
  45.         AutoGenerator mpg = new AutoGenerator();
  47.         // 全局配置
  48.         GlobalConfig gc = new GlobalConfig();
  49.         String projectPath = System.getProperty("user.dir");
  50.         gc.setOutputDir(projectPath + "/src/main/java");
  51.         // gc.setOutputDir("D:\\test");
  52.         gc.setAuthor("anonymous");
  53.         gc.setOpen(false);
  54.         // gc.setSwagger2(true); 实体属性 Swagger2 注解
  55.         gc.setServiceName("%sService");
  56.         mpg.setGlobalConfig(gc);
  58.         // 数据源配置 数据库名 账号密码
  59.         DataSourceConfig dsc = new DataSourceConfig();
  60.         dsc.setUrl("jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC");
  61.         // dsc.setSchemaName("public");
  62.         dsc.setDriverName("com.mysql.cj.jdbc.Driver");
  63.         dsc.setUsername("root");
  64.         dsc.setPassword("123456");
  65.         mpg.setDataSource(dsc);
  67.         // 包配置
  68.         PackageConfig pc = new PackageConfig();
  69.         pc.setModuleName(null);
  70.         pc.setParent("com.vueblog");
  71.         mpg.setPackageInfo(pc);
  73.         // 自定义配置
  74.         InjectionConfig cfg = new InjectionConfig() {
  75.             @Override
  76.             public void initMap() {
  77.                 // to do nothing
  78.             }
  79.         };
  81.         // 如果模板引擎是 freemarker
  82.         String templatePath = "/templates/mapper.xml.ftl";
  83.         // 如果模板引擎是 velocity
  84.         // String templatePath = "/templates/mapper.xml.vm";
  86.         // 自定义输出配置
  87.         List<FileOutConfig> focList = new ArrayList<>();
  88.         // 自定义配置会被优先输出
  89.         focList.add(new FileOutConfig(templatePath) {
  90.             @Override
  91.             public String outputFile(TableInfo tableInfo) {
  92.                 // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！
  93.                 return projectPath + "/src/main/resources/mapper/"
  94.                         + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
  95.             }
  96.         });
  98.         cfg.setFileOutConfigList(focList);
  99.         mpg.setCfg(cfg);
  101.         // 配置模板
  102.         TemplateConfig templateConfig = new TemplateConfig();
  104.         templateConfig.setXml(null);
  105.         mpg.setTemplate(templateConfig);
  107.         // 策略配置
  108.         StrategyConfig strategy = new StrategyConfig();
  109.         strategy.setNaming(NamingStrategy.underline_to_camel);
  110.         strategy.setColumnNaming(NamingStrategy.underline_to_camel);
  111.         strategy.setEntityLombokModel(true);
  112.         strategy.setRestControllerStyle(true);
  113.         strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
  114.         strategy.setControllerMappingHyphenStyle(true);
  115.         strategy.setTablePrefix("m_");
  116.         mpg.setStrategy(strategy);
  117.         mpg.setTemplateEngine(new FreemarkerTemplateEngine());
  118.         mpg.execute();
  119.     }
  120. }
复制代码
结果如下：

第三步 做测试

1、UserController类(ctrl+R可全局搜刮类)

  1. package com.vueblog.controller;
  4. import com.vueblog.service.UserService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RestController;
  11. /**
  12. * <p>
  13. *  前端控制器
  14. * </p>
  15. *
  16. * @author anonymous
  17. * @since 2024-05-17
  18. */
  19. @RestController
  20. @RequestMapping("/user")
  21. public class UserController {
  23.     @Autowired
  24.     UserService userService;
  26.     @GetMapping("/index")
  27.     public Object index(){
  28.         return userService.getById(1L);
  29.     }
  30. }
复制代码
2、运行项目 检察结果


第二章 同一结果封装

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


  • 是否乐成，可用code表示（如200表示乐成，400表示非常）
  • 结果消息
  • 结果数据
  • Result类(路径com.vueblog.common.lang;)
  1. package com.vueblog.common.lang;
  3. import lombok.Data;
  5. import java.io.Serializable;
  7. /**
  8. * @author hanson
  9. * @date 2024/5/17 14:32
  10. */
  11. @Data
  12. public class Result implements Serializable {
  14.     private int code; // 200是正常，非200表示异常
  15.     private String msg;
  16.     private Object data;
  18.     //成功
  19.     public static Result success(Object data) {
  20.         return success(200, "操作成功", data);
  21.     }
  23.     //成功
  24.     public static Result success(int code, String msg, Object data) {
  25.         Result r = new Result();
  26.         r.setCode(code);
  27.         r.setMsg(msg);
  28.         r.setData(data);
  29.         return r;
  30.     }
  32.     //失败
  33.     public static Result fail(String msg) {
  34.         return fail(400, msg, null);
  35.     }
  37.     //失败
  38.     public static Result fail(String msg, Object data) {
  39.         return fail(400, msg, data);
  40.     }
  42.     //失败
  43.     public static Result fail(int code, String msg, Object data) {
  44.         Result r = new Result();
  45.         r.setCode(code);
  46.         r.setMsg(msg);
  47.         r.setData(data);
  48.         return r;
  49.     }
  50. }
复制代码


  • 在UserController 中引用测试
  1. package com.vueblog.controller;
  4. import com.vueblog.common.lang.Result;
  5. import com.vueblog.entity.User;
  6. import com.vueblog.service.UserService;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.web.bind.annotation.GetMapping;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  13. /**
  14. * <p>
  15. *  前端控制器
  16. * </p>
  17. *
  18. * @author anonymous
  19. * @since 2024-05-17
  20. */
  21. @RestController
  22. @RequestMapping("/user")
  23. public class UserController {
  25.     @Autowired
  26.     UserService userService;
  28.     @GetMapping("/index")
  29.     public Result index(){
  30.         User user = userService.getById(1L);
  31.         return Result.success(user);
  32.     }
  33. }
复制代码


  • 页面运行结果图 (http://localhost:8082/user/index)

第三章 Shiro整合jwt逻辑分析

考虑到后面大概需要做集群、负载均衡等，所以就需要会话共享，而shiro的缓存和会话信息，我们一般考虑使用redis来存储这些数据，所以，我们不仅仅需要整合shiro，同时也需要整合redis。在开源的项目中，我们找到了一个starter可以快速整合shiro-redis，配置简朴，这里也保举大家使用。
而因为我们需要做的是前后端分离项目标骨架，所以一般我们会采用token或者jwt作为跨域身份验证办理方案。所以整合shiro的过程中，我们需要引入jwt的身份验证过程。
那么我们就开始整合：
我们使用一个shiro-redis-spring-boot-starter的jar包，详细教程可以看官方文档：
https://github.com/alexxiyang/shiro-redis/blob/master/docs/README.md#spring-boot-starter
1、导入shiro-redis的starter包：还有jwt的工具包，以及为了简化开发，引入hutool工具包。

pom.xml中导入:
  1. <!-- shiro-redis -->
  2. <dependency>
  3.      <groupId>org.crazycake</groupId>
  4.      <artifactId>shiro-redis-spring-boot-starter</artifactId>
  5.      <version>3.2.1</version>
  6. </dependency>
  7. <!-- hutool工具类 -->
  8. <dependency>       
  9.      <groupId>cn.hutool</groupId>
  10.      <artifactId>hutool-all</artifactId>
  11.      <version>5.3.3</version>
  12. </dependency>
  13.      <!-- jwt 生成工具 校验工具-->
  14. <dependency>
  15.      <groupId>io.jsonwebtoken</groupId>
  16.      <artifactId>jjwt</artifactId>
  17.      <version>0.9.1</version>
  18. </dependency>
复制代码
2、创建ShiroConfig

文件路径：com/vueblog/config
  1. package com.vueblog.config;
  3. import com.vueblog.shiro.AccountRealm;
  4. import com.vueblog.shiro.JwtFilter;
  5. import org.apache.shiro.mgt.DefaultSessionStorageEvaluator;
  6. import org.apache.shiro.mgt.DefaultSubjectDAO;
  7. import org.apache.shiro.mgt.SecurityManager;
  8. import org.apache.shiro.session.mgt.SessionManager;
  9. import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
  10. import org.apache.shiro.spring.web.config.DefaultShiroFilterChainDefinition;
  11. import org.apache.shiro.spring.web.config.ShiroFilterChainDefinition;
  12. import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
  13. import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;
  14. import org.crazycake.shiro.RedisCacheManager;
  15. import org.crazycake.shiro.RedisSessionDAO;
  16. import org.springframework.beans.factory.annotation.Autowired;
  17. import org.springframework.context.annotation.Bean;
  18. import org.springframework.context.annotation.Configuration;
  19. import java.util.HashMap;
  20. import java.util.LinkedHashMap;
  21. import java.util.Map;
  22. import javax.servlet.Filter;
  24. /**
  25. * @author hanson
  26. * @date 2024/5/17 15:13
  27. */
  28. @Configuration
  29. public class ShiroConfig {
  30.     @Autowired
  31.     private JwtFilter jwtFilter;
  33.     @Bean
  34.     public SessionManager sessionManager(RedisSessionDAO redisSessionDAO) {
  35.         DefaultWebSessionManager sessionManager = new DefaultWebSessionManager();
  36.         sessionManager.setSessionDAO(redisSessionDAO);
  37.         return sessionManager;
  38.     }
  39.     @Bean
  40.     public DefaultWebSecurityManager securityManager(AccountRealm accountRealm,
  41.                                                      SessionManager sessionManager,
  42.                                                      RedisCacheManager redisCacheManager) {
  43.         DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager(accountRealm);
  44.         securityManager.setSessionManager(sessionManager);
  45.         securityManager.setCacheManager(redisCacheManager);
  46.         /*
  47.          * 关闭shiro自带的session，详情见文档
  48.          */
  49.         DefaultSubjectDAO subjectDAO = new DefaultSubjectDAO();
  50.         DefaultSessionStorageEvaluator defaultSessionStorageEvaluator = new DefaultSessionStorageEvaluator();
  51.         defaultSessionStorageEvaluator.setSessionStorageEnabled(false);
  52.         subjectDAO.setSessionStorageEvaluator(defaultSessionStorageEvaluator);
  53.         securityManager.setSubjectDAO(subjectDAO);
  54.         return securityManager;
  55.     }
  56.     @Bean
  57.     public ShiroFilterChainDefinition shiroFilterChainDefinition() {
  58.         DefaultShiroFilterChainDefinition chainDefinition = new DefaultShiroFilterChainDefinition();
  59.         Map<String, String> filterMap = new LinkedHashMap<>();
  60.         filterMap.put("/**", "jwt"); // 主要通过注解方式校验权限
  61.         chainDefinition.addPathDefinitions(filterMap);
  62.         return chainDefinition;
  63.     }
  64.     @Bean("shiroFilterFactoryBean")
  65.     public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager,
  66.                                                          ShiroFilterChainDefinition shiroFilterChainDefinition) {
  67.         ShiroFilterFactoryBean shiroFilter = new ShiroFilterFactoryBean();
  68.         shiroFilter.setSecurityManager(securityManager);
  70.         Map<String, Filter> filters = new HashMap<>();
  71.         filters.put("jwt", jwtFilter);
  72.         shiroFilter.setFilters(filters);
  74.         Map<String, String> filterMap = shiroFilterChainDefinition.getFilterChainMap();
  76.         shiroFilter.setFilterChainDefinitionMap(filterMap);
  78.         return shiroFilter;
  79.     }
  80. }
复制代码
上面ShiroConfig，我们重要做了几件事情：

  • 引入RedisSessionDAO和RedisCacheManager，为了办理shiro的权限数据和会话信息能保存到redis中，实现会话共享。
  • 重写了SessionManager和DefaultWebSecurityManager，同时在DefaultWebSecurityManager中为了关闭shiro自带的session方式，我们需要设置为false，如许用户就不再能通过session方式登录shiro。后面将采用jwt凭证登录。
  • 在ShiroFilterChainDefinition中，我们不再通过编码形式拦截Controller访问路径，而是所有的路由都需要颠末JwtFilter这个过滤器，然后判断请求头中是否含有jwt的信息，有就登录，没有就跳过。跳过之后，有Controller中的shiro注解举行再次拦截，比如@RequiresAuthentication，如许控制权限访问。
那么，接下来，我们聊聊ShiroConfig中出现的AccountRealm，还有JwtFilter。
3、创建MybatisPlusConfig

路径:com.vueblog.config
  1. package com.vueblog.config;
  3. import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
  4. import org.mybatis.spring.annotation.MapperScan;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7. import org.springframework.transaction.annotation.EnableTransactionManagement;
  9. /**
  10. * @author hanson
  11. * @date 2024/5/17 14:02
  12. */
  13. @Configuration
  14. @EnableTransactionManagement
  15. @MapperScan("com.vueblog.mapper")
  16. public class MybatisPlusConfig {
  17.     @Bean
  18.     public PaginationInterceptor paginationInterceptor() {
  19.         PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
  20.         return paginationInterceptor;
  21.     }
  22. }
复制代码
4、创建AccountRealm

路径： com.vueblog.shiro
AccountRealm是shiro举行登录或者权限校验的逻辑所在，算是焦点了，我们需要重写3个方法，分别是


  • supports：为了让realm支持jwt的凭证校验
  • doGetAuthorizationInfo：权限校验
  • doGetAuthenticationInfo：登录认证校验
我们先来总体看看AccountRealm的代码，然后逐个分析：
  1. package com.vueblog.shiro;
  3. import org.apache.shiro.authc.AuthenticationException;
  4. import org.apache.shiro.authc.AuthenticationInfo;
  5. import org.apache.shiro.authc.AuthenticationToken;
  6. import org.apache.shiro.authz.AuthorizationInfo;
  7. import org.apache.shiro.realm.AuthorizingRealm;
  8. import org.apache.shiro.subject.PrincipalCollection;
  9. import org.springframework.stereotype.Component;
  11. /**
  12. * @author hanson
  13. * @date 2024/5/17 15:17
  14. */
  15. @Component
  16. public class AccountRealm extends AuthorizingRealm {
  18.     //为了让realm支持jwt的凭证校验
  19.     @Override
  20.     public boolean supports(AuthenticationToken token) {
  21.         return token instanceof JwtToken;
  22.     }
  24.     //权限校验
  25.     @Override
  26.     protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
  27.         return null;
  28.     }
  30.     //登录认证校验
  31.     @Override
  32.     protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
  33.         return null;
  34.     }
  35. }
复制代码
其实重要就是doGetAuthenticationInfo登录认证这个方法，可以看到我们通过jwt获取到用户信息，判断用户的状态，末了非常就抛出对应的非常信息，否者封装成SimpleAuthenticationInfo返回给shiro。
接下来我们渐渐分析里面出现的新类：
1、shiro默认supports的是UsernamePasswordToken，而我们如今采用了jwt的方式，所以这里我们自定义一个JwtToken，来完成shiro的supports方法。
注意事项如果启动不了在VueblogApplication加入@MapperScan扫描mapper
  1. @SpringBootApplication
  2. @MapperScan(basePackages = "com.vueblog.mapper")
  3. public class VueblogApplication {
  5.     public static void main(String[] args) {
  6.         SpringApplication.run(VueblogApplication.class, args);
  7.     }
  8. }
复制代码
5、创建JwtFilter

路径：com.vueblog.shiro;
这个过滤器是我们的重点，这里我们继续的是Shiro内置的AuthenticatingFilter，一个可以内置了可以主动登录方法的的过滤器，有些同学继续BasicHttpAuthenticationFilter也是可以的。
我们需要重写几个方法：

  • createToken：实现登录，我们需要天生我们自定义支持的JwtToken
  • onAccessDenied：拦截校验，当头部没有Authorization时候，我们直接通过，不需要主动登录；当带有的时候，首先我们校验jwt的有用性，没题目我们就直接执行executeLogin方法实现主动登录
  • onLoginFailure：登录非常时候进入的方法，我们直接把非常信息封装然后抛出
  • preHandle：拦截器的前置拦截，因为我们是前后端分析项目，项目中除了需要跨域全局配置之外，我们再拦截器中也需要提供跨域支持。如许，拦截器才不会在进入Controller之前就被限定了。
下面我们看看总体的代码：
  1. package com.vueblog.shiro;
  3. import cn.hutool.json.JSONUtil;
  4. import com.vueblog.common.lang.Result;
  5. import com.vueblog.util.JwtUtils;
  6. import io.jsonwebtoken.Claims;
  7. import org.apache.shiro.authc.AuthenticationException;
  8. import org.apache.shiro.authc.AuthenticationToken;
  9. import org.apache.shiro.authc.ExpiredCredentialsException;
  10. import org.apache.shiro.web.filter.authc.AuthenticatingFilter;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.stereotype.Component;
  13. import org.springframework.util.StringUtils;
  15. import javax.servlet.ServletRequest;
  16. import javax.servlet.ServletResponse;
  17. import javax.servlet.http.HttpServletRequest;
  18. import javax.servlet.http.HttpServletResponse;
  19. import java.io.IOException;
  21. /**
  22. * @author hanson
  23. * @date 2024/5/17 15:25
  24. */
  25. @Component
  26. public class JwtFilter extends AuthenticatingFilter {
  28.     @Autowired
  29.     JwtUtils jwtUtils;
  31.     //验证token
  32.     @Override
  33.     protected AuthenticationToken createToken(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
  34.         HttpServletRequest request = (HttpServletRequest) servletRequest;
  35.         // 获取头部token
  36.         String jwt = request.getHeader("Authorization");
  37.         if (StringUtils.isEmpty(jwt)) {
  38.             return null;
  39.         }
  40.         return new JwtToken(jwt);
  41.     }
  43.     @Override
  44.     protected boolean onAccessDenied(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
  45.         HttpServletRequest request = (HttpServletRequest) servletRequest;
  46.         // 获取头部token
  47.         String jwt = request.getHeader("Authorization");
  48.         if (StringUtils.isEmpty(jwt)) {
  49.             return true;
  50.         } else {
  52.             // 检验jwt
  53.             Claims claim = jwtUtils.getClaimByToken(jwt);
  54.             if (claim == null || jwtUtils.isTokenExpired(claim.getExpiration())){
  55.                 throw new ExpiredCredentialsException("token已失效，请重新登录");
  56.             }
  58.             // 执行登录
  59.             return executeLogin(servletRequest, servletResponse);
  60.         }
  61.     }
  63.     @Override
  64.     protected boolean onLoginFailure(AuthenticationToken token, AuthenticationException e, ServletRequest request, ServletResponse response) {
  66.         HttpServletResponse httpServletResponse = (HttpServletResponse) response;
  68.         Throwable throwable = e.getCause() == null ? e : e.getCause();
  70.         Result result = Result.fail(throwable.getMessage());
  72.         String json = JSONUtil.toJsonStr(result);
  74.         try {
  75.             httpServletResponse.getWriter().print(json);
  76.         } catch (IOException ex) {
  78.         }
  80.         return false;
  81.     }
  82. }
复制代码
6、创建JwtToken

路径：com.vueblog.shiro
  1. package com.vueblog.shiro;
  3. import org.apache.shiro.authc.AuthenticationToken;
  5. /**
  6. * @author hanson
  7. * @date 2024/5/17 15:41
  8. */
  9. public class JwtToken implements AuthenticationToken {
  11.     private String token;
  13.     public JwtToken(String jwt){
  14.         this.token = jwt;
  15.     }
  17.     @Override
  18.     public Object getPrincipal() {
  19.         return token;
  20.     }
  22.     @Override
  23.     public Object getCredentials() {
  24.         return token;
  25.     }
  26. }
复制代码
7、创建JwtUtils

路径：com.vueblog.util
  1. package com.vueblog.util;
  3. import io.jsonwebtoken.Claims;
  4. import io.jsonwebtoken.Jwts;
  5. import io.jsonwebtoken.SignatureAlgorithm;
  6. import lombok.Data;
  7. import lombok.extern.slf4j.Slf4j;
  8. import org.springframework.boot.context.properties.ConfigurationProperties;
  9. import org.springframework.stereotype.Component;
  11. import java.util.Date;
  13. /**
  14. * @author hanson
  15. * @date 2024/5/17 15:55
  16. */
  17. @Slf4j
  18. @Data
  19. @Component
  20. @ConfigurationProperties(prefix = "markerhub.jwt")
  21. public class JwtUtils {
  23.     private String secret;
  24.     private long expire;
  25.     private String header;
  27.     /**
  28.      * 生成jwt token
  29.      */
  30.     public String generateToken(long userId) {
  31.         Date nowDate = new Date();
  32.         //过期时间
  33.         Date expireDate = new Date(nowDate.getTime() + expire * 1000);
  35.         return Jwts.builder()
  36.                 .setHeaderParam("typ", "JWT")
  37.                 .setSubject(userId+"")
  38.                 .setIssuedAt(nowDate)
  39.                 .setExpiration(expireDate)
  40.                 .signWith(SignatureAlgorithm.HS512, secret)
  41.                 .compact();
  42.     }
  44.     public Claims getClaimByToken(String token) {
  45.         try {
  46.             return Jwts.parser()
  47.                     .setSigningKey(secret)
  48.                     .parseClaimsJws(token)
  49.                     .getBody();
  50.         }catch (Exception e){
  51.             log.debug("validate is token error ", e);
  52.             return null;
  53.         }
  54.     }
  56.     /**
  57.      * token是否过期
  58.      * @return  true：过期
  59.      */
  60.     public boolean isTokenExpired(Date expiration) {
  61.         return expiration.before(new Date());
  62.     }
  63. }
复制代码
8、创建spring-devtools.properties

路径：resources/WETA-INF/
  1. restart.include.shiro-redis=/shiro-[\\w-\\.]+jar
复制代码
第四章 Shiro逻辑开发

小提示:登录调用AccountRealm类下面的doGetAuthenticationInfo
创建类AccountProfile 用于传递数据
路径：com.vueblog.shiro
  1. package com.vueblog.shiro;
  3. import lombok.Data;
  5. import java.io.Serializable;
  7. /**
  8. * @author hanson
  9. * @date 2024/5/17 17:33
  10. */
  11. @Data
  12. public class AccountProfile implements Serializable {
  13.     private Long id;
  15.     private String username;
  17.     private String avatar;
  19.     private String email;
  21. }
复制代码
完善AccountRealm
  1. package com.vueblog.shiro;
  3. import cn.hutool.core.bean.BeanUtil;
  4. import com.vueblog.entity.User;
  5. import com.vueblog.service.UserService;
  6. import com.vueblog.util.JwtUtils;
  7. import org.apache.shiro.authc.*;
  8. import org.apache.shiro.authz.AuthorizationInfo;
  9. import org.apache.shiro.realm.AuthorizingRealm;
  10. import org.apache.shiro.subject.PrincipalCollection;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.stereotype.Component;
  14. /**
  15. * @author hanson
  16. * @date 2024/5/17 15:17
  17. */
  18. @Component
  19. public class AccountRealm extends AuthorizingRealm {
  21.     @Autowired
  22.     JwtUtils jwtUtils;
  24.     @Autowired
  25.     UserService userService;
  28.     //为了让realm支持jwt的凭证校验
  29.     @Override
  30.     public boolean supports(AuthenticationToken token) {
  31.         return token instanceof JwtToken;
  32.     }
  34.     //权限校验
  35.     @Override
  36.     protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
  37.         return null;
  38.     }
  40.     //登录认证校验
  41.     @Override
  42.     protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
  43.         JwtToken jwtToken = (JwtToken) token;
  45.         String userId = jwtUtils.getClaimByToken((String) jwtToken.getPrincipal()).getSubject();
  47.         User user = userService.getById(Long.valueOf(userId));
  49.         if (user == null){
  50.             throw new UnknownAccountException("账户不存在");
  51.         }
  53.         if (user.getStatus() == -1){
  54.             throw new LockedAccountException("账户已经被锁定");
  55.         }
  57.         AccountProfile profile = new AccountProfile();
  59.         BeanUtil.copyProperties(user,profile);
  61.         System.out.println("----------------------");
  63.         return new SimpleAuthenticationInfo(profile,jwtToken.getCredentials(),getName());
  64.     }
  65. }
复制代码
第五章 非常处理

创建GlobalExceptionHandler 类
捕获全局非常
  1. package com.vueblog.common.exception;
  3. import com.vueblog.common.lang.Result;
  4. import lombok.extern.slf4j.Slf4j;
  5. import org.apache.shiro.ShiroException;
  6. import org.springframework.http.HttpStatus;
  7. import org.springframework.web.bind.annotation.ExceptionHandler;
  8. import org.springframework.web.bind.annotation.ResponseStatus;
  9. import org.springframework.web.bind.annotation.RestControllerAdvice;
  11. /**
  12. * 日志输出
  13. * 全局异常捕获
  14. *
  15. * @author hanson
  16. * @date 2024/5/17 17:39
  17. */
  18. @Slf4j
  19. @RestControllerAdvice
  20. public class GlobalExceptionHandler {
  22.     @ResponseStatus(HttpStatus.UNAUTHORIZED)//因为前后端分离 返回一个状态 一般是401 没有权限
  23.     @ExceptionHandler(value = RuntimeException.class)//捕获运行时异常ShiroException是大部分异常的父类
  24.     public Result handler(ShiroException e) {
  25.         log.error("运行时异常:--------------------{}", e);
  26.         return Result.fail(401, e.getMessage(), null);
  27.     }
  30.     @ResponseStatus(HttpStatus.BAD_REQUEST)//因为前后端分离 返回一个状态
  31.     @ExceptionHandler(value = RuntimeException.class)//捕获运行时异常
  32.     public Result handler(RuntimeException e) {
  33.         log.error("运行时异常:--------------------{}", e);
  34.         return Result.fail(e.getMessage());
  35.     }
  36. }
复制代码
然而我们运行测试发现并没有拦截

因为我们没有举行登录拦截
@RequiresAuthentication//登录拦截注解

运行结果：
提示401登录非常

第六章 实体校验

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


  • User实体类中
  1. package com.vueblog.entity;
  3. import com.baomidou.mybatisplus.annotation.TableName;
  4. import com.baomidou.mybatisplus.annotation.IdType;
  5. import com.baomidou.mybatisplus.annotation.TableId;
  6. import java.time.LocalDateTime;
  7. import java.io.Serializable;
  8. import lombok.Data;
  9. import lombok.EqualsAndHashCode;
  10. import lombok.experimental.Accessors;
  12. import javax.validation.constraints.Email;
  13. import javax.validation.constraints.NotBlank;
  15. /**
  16. * <p>
  17. *
  18. * </p>
  19. *
  20. * @author anonymous
  21. * @since 2024-05-17
  22. */
  23. @Data
  24. @EqualsAndHashCode(callSuper = false)
  25. @Accessors(chain = true)
  26. @TableName("m_user")
  27. public class User implements Serializable {
  29.     private static final long serialVersionUID = 1L;
  31.     @TableId(value = "id", type = IdType.AUTO)
  32.     private Long id;
  34.     @NotBlank(message = "昵称不能为空")
  35.     private String username;
  37.     private String avatar;
  39.     @NotBlank(message = "邮箱不能为空")
  40.     @Email(message = "邮箱格式不正确")
  41.     private String email;
  43.     private String password;
  45.     private Integer status;
  47.     private LocalDateTime created;
  49.     private LocalDateTime lastLogin;
  50. }
复制代码


  • 在userController类中写一个方法测试
  1. /**
  2. *
  3. *@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；
  4. * GET方式无请求体，所以使用@RequestBody接收数据时，
  5. * 前端不能使用GET方式提交数据，
  6. * 而是用POST方式进行提交。在后端的同一个接收方法里，
  7. * @RequestBody与@RequestParam()可以同时使用，@RequestBody最多只能有一个，
  8. * 而@RequestParam()可以有多个。
  9. *
  10. * @Validated注解用于检查user中填写的规则  如果不满足抛出异常
  11. * 可在GlobalExceptionHandler中捕获此异常 进行自定义 返回数据信息
  12. */
  13. @PostMapping("/save")
  14. public  Result save(@Validated @RequestBody User user){
  16.     return Result.succ(user);
  17. }
复制代码


  • 启动postMan测试



  • 定义捕获非常返回处理
在捕获非常 GlobalExceptionHandler类中增加如下：
  1. @ResponseStatus(HttpStatus.BAD_REQUEST)//因为前后端分离 返回一个状态
  2. @ExceptionHandler(value = MethodArgumentNotValidException.class)//捕获运行时异常
  3. public Result handler(RuntimeException e) {
  4.     log.error("实体校验异常:--------------------{}", e);
  5.     return Result.fail(e.getMessage());
  6. }
复制代码
结果如下：(变得简短了)

输入正确的格式如下：
返回了我们需要的信息

第七章 跨域题目

因为是前后端分析，所以跨域题目是克制不了的，我们直接在背景举行全局跨域处理:
路径:com.vueblog.config
注意：此配置是配置到confroller的，在confroller之前是颠末jwtFilter，所以在举行访问之前配置一下Filter的跨域题目
  1. package com.vueblog.config;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. /**
  8. * 解决跨域问题
  9. *
  10. * @author hanson
  11. * @date 2024/5/17 19:10
  12. */
  13. @Configuration
  14. public class CorsConfig implements WebMvcConfigurer {
  15.     @Override
  16.     public void addCorsMappings(CorsRegistry registry) {
  17.         registry.addMapping("/**")
  18.                 .allowedOrigins("*")
  19.                 .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
  20.                 .allowCredentials(true)
  21.                 .maxAge(3600)
  22.                 .allowedHeaders("*");
  23.     }
  24. }
复制代码
jwtFilter举行跨域处理:
  1. /**
  2. * 对跨域提供支持
  3. * @param request
  4. * @param response
  5. * @return
  6. * @throws Exception
  7. */
  8. @Override
  9. protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
  11.     HttpServletRequest httpServletRequest = WebUtils.toHttp(request);
  12.     HttpServletResponse httpServletResponse = WebUtils.toHttp(response);
  13.     httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
  14.     httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
  15.     httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
  16.     // 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
  17.     if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
  18.         httpServletResponse.setStatus(org.springframework.http.HttpStatus.OK.value());
  19.         return false;
  20.     }
  22.     return super.preHandle(request, response);
  23. }
复制代码
----根本框架已经搭建完成-----
第八章 登录接口开发



  • 创建LoginDto
  • 路径： com.vueblog.common.dto
  1. package com.vueblog.dto;
  3. import lombok.Data;
  5. import javax.validation.constraints.NotBlank;
  6. import java.io.Serializable;
  8. /**
  9. * @author hanson
  10. * @date 2024/5/17 19:17
  11. */
  12. @Data
  13. public class LoginDto implements Serializable {
  15.     @NotBlank(message = "昵称不能为空")
  16.     private String username;
  18.     @NotBlank(message = "密码不能为空")
  19.     private String password;
  20. }
复制代码


  • 在GlobalExceptionHandler类中增加断言非常
  • 路径：com.vueblog.common.exception
  1. /**
  2. * 断言异常
  3. * @param e
  4. * @return
  5. */
  6. @ResponseStatus(HttpStatus.BAD_REQUEST)
  7. @ExceptionHandler(value = IllegalArgumentException.class)
  8. public Result handler(IllegalArgumentException e){
  9.     log.error("Assert异常:------------------>{}",e);
  10.     return Result.fail(e.getMessage());
  11. }
复制代码


  • 创建AccountController类

登录和退出逻辑
  1. package com.vueblog.controller;
  3. import cn.hutool.core.map.MapUtil;
  4. import cn.hutool.crypto.SecureUtil;
  5. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  6. import com.vueblog.common.lang.Result;
  7. import com.vueblog.dto.LoginDto;
  8. import com.vueblog.entity.User;
  9. import com.vueblog.service.UserService;
  10. import com.vueblog.util.JwtUtils;
  11. import io.jsonwebtoken.lang.Assert;
  12. import org.apache.shiro.SecurityUtils;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.validation.annotation.Validated;
  15. import org.springframework.web.bind.annotation.GetMapping;
  16. import org.springframework.web.bind.annotation.PostMapping;
  17. import org.springframework.web.bind.annotation.RequestBody;
  18. import org.springframework.web.bind.annotation.RestController;
  20. import javax.servlet.http.HttpServletResponse;
  22. /**
  23. * @author hanson
  24. * @date 2024/5/17 19:16
  25. */
  26. @RestController
  27. public class AccountController {
  29.     @Autowired
  30.     UserService userService;
  32.     @Autowired
  33.     JwtUtils jwtUtils;
  36.     @PostMapping("/login")
  37.     public Result login(@Validated @RequestBody LoginDto loginDto, HttpServletResponse response) {
  39.         User user = userService.getOne(new QueryWrapper<User>().eq("username", loginDto.getUsername()));
  40.         Assert.notNull(user,"用户不存在");
  42.         if (!user.getPassword().equals(SecureUtil.md5(loginDto.getPassword()))){
  43.             return Result.fail("密码不正确");
  44.         }
  45.         String jwt = jwtUtils.generateToken(user.getId());
  47.         response.setHeader("Authorization",jwt);
  48.         response.setHeader("Access-control-Expose-Headers","Authorization");
  51.         return Result.success(MapUtil.builder()
  52.                 .put("id",user.getId())
  53.                 .put("username",user.getUsername())
  54.                 .put("avatar",user.getAvatar())
  55.                 .put("password",user.getPassword())
  56.                 .map()
  57.         );
  58.     }
  60.     @GetMapping("/logout")
  61.     public Result logout(){
  62.         SecurityUtils.getSubject().logout();
  64.         return Result.success(null);
  65.     }
  66. }
复制代码
测试运行结果:


假设输入错误的暗码：

第九章 博客接口的开发



  • 创建工具类ShiroUtil
路径com.vueblog.util，可于判断等等
  1. package com.vueblog.util;
  3. import com.vueblog.shiro.AccountProfile;
  4. import org.apache.shiro.SecurityUtils;
  6. /**
  7. * @author hanson
  8. * @date 2024/5/17 20:13
  9. */
  10. public class ShiroUtil {
  12.     public static AccountProfile getProfile(){
  13.         return (AccountProfile) SecurityUtils.getSubject().getPrincipal();
  14.     }
  15. }
复制代码


  • 完善BlogController类
  1. package com.vueblog.controller;
  4. import cn.hutool.core.bean.BeanUtil;
  5. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  6. import com.baomidou.mybatisplus.core.metadata.IPage;
  7. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  8. import com.vueblog.common.lang.Result;
  9. import com.vueblog.entity.Blog;
  10. import com.vueblog.service.BlogService;
  11. import com.vueblog.util.ShiroUtil;
  12. import io.jsonwebtoken.lang.Assert;
  13. import org.apache.shiro.authz.annotation.RequiresAuthentication;
  14. import org.springframework.beans.factory.annotation.Autowired;
  15. import org.springframework.validation.annotation.Validated;
  16. import org.springframework.web.bind.annotation.*;
  18. import java.time.LocalDateTime;
  20. /**
  21. * <p>
  22. * 前端控制器
  23. * </p>
  24. *
  25. * @author anonymous
  26. * @since 2024-05-17
  27. */
  28. @RestController
  29. public class BlogController {
  31.     @Autowired
  32.     BlogService blogService;
  34.     //木有值默认为1
  35.     @GetMapping("/blogs")
  36.     public Result list(@RequestParam(defaultValue = "1") Integer currentPage) {
  38.         Page page = new Page(currentPage, 5);
  39.         IPage pageData = blogService.page(page, new QueryWrapper<Blog>().orderByDesc("created"));
  41.         return Result.success(pageData);
  42.     }
  44.     //@PathVariable动态路由
  45.     @GetMapping("/blog/{id}")
  46.     public Result detail(@PathVariable(name = "id") Long id) {
  47.         Blog blog = blogService.getById(id);
  49.         Assert.notNull(blog, "该博客已被删除");
  51.         return Result.success(blog);
  52.     }
  55.     //@Validated校验
  56.     //@RequestBody
  57.     //添加删除  木有id则添加 有id则编辑
  58.     @RequiresAuthentication //需要认证之后才能操作
  59.     @PostMapping("/blog/edit")
  60.     public Result edit(@Validated @RequestBody Blog blog) {
  61.         System.out.println(blog.toString());
  62.         Blog temp = null;
  63.         //如果有id则是编辑
  64.         if(blog.getId() != null) {
  65.             temp = blogService.getById(blog.getId());//将数据库的内容传递给temp
  66.             //只能编辑自己的文章
  67.             Assert.isTrue(temp.getUserId().longValue()  == ShiroUtil.getProfile().getId().longValue() , "没有权限编辑");
  68.         } else {
  69.             temp = new Blog();
  70.             temp.setUserId(ShiroUtil.getProfile().getId());
  71.             temp.setCreated(LocalDateTime.now());
  72.             temp.setStatus(0);
  73.         }
  74.         //将blog的值赋给temp 忽略 id userid created status 引用于hutool
  75.         BeanUtil.copyProperties(blog, temp, "id", "userId", "created", "status");
  76.         blogService.saveOrUpdate(temp);
  77.         return Result.success(null);
  78.     }
  80.     //@PathVariable动态路由
  81.     @RequiresAuthentication  //需要认证之后才能操作
  82.     @PostMapping("/blogdel/{id}")
  83.     public Result del(@PathVariable Long id){
  84.         boolean b = blogService.removeById(id);
  85.         //判断是否为空 为空则断言异常
  86.         if(b==true){
  88.             return Result.success("文章删除成功");
  89.         }else{
  90.             return Result.fail("文章删除失败");
  91.         }
  92.     }
  93. }
复制代码


  • 运行程序
查询测试:




  • 新增编辑测试:
测试修改别人文章

得到token

选中header=>填写token

选中body=>raw=>json填写请求
新增
  1. {
  2.         "title":"标题测试",
  3.         "description":"描述测试aabbcc",
  4.         "content":"内容测试1234567"
  5. }
复制代码

文章删除

后端总结
后端的一个骨架根本完成然后开始我们的前端开发
第十章 Vue前端页面开发

1、前言

接下来，我们来完成vueblog前端的部分功能。大概会使用的到技能如下：


  • vue
  • element-ui
  • axios
  • mavon-editor
  • markdown-it
  • github-markdown-css
2、环境预备



  • node.js安装:
https://nodejs.org/zh-cn/

安装完成之后查抄下版本信息：



  • 接下来，我们安装vue的环境
  1. # 安装淘宝npm
  2. npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. # vue-cli 安装依赖包
  4. cnpm install --g vue-cli
复制代码
如果报错信息显示证书过期，更换路径

  1. http://npm.taobao.org => http://npmmirror.com
  2. http://registry.npm.taobao.org => http://registry.npmmirror.com
复制代码

3、新建项目

方式一：使用Vue ui

选中要创建的文件cmd打开，输入vue ui


点击在此创建新项目

点手动配置

打开Router和Vuex，关掉Linter

勾选

前端基础框架初始化乐成

目录下天生了对应文件

方式二：命令行

选中要创建的文件cmd打开，进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

   输入:
vue init webpack xx
全部enter即可
  

完成

我们来看下整个vueblog-vue的项目结构

   ├── 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
  4、安装element-ui



  • 官方文档：
https://element.eleme.cn/#/zh-CN/component/installation
ctrl+`(~键)打开终端输入安装命令
  1. # 安装element-ui
  2. cnpm install element-ui --save
复制代码
然后我们打开项目src目录下的main.js，引入element-ui依赖。
  1. import Element from 'element-ui'
  2. import "element-ui/lib/theme-chalk/index.css"
  4. Vue.use(Element)
复制代码



  • 测试elementUi是否引入乐成
在AboutView.vue引入button组件
  1. <template>
  2.   <div class="about">
  3.     <h1>This is an about page</h1>
  4.     <el-button plain>朴素按钮</el-button>
  5.   </div>
  6. </template>
复制代码

运行检察结果

引入乐成
5、安装axios

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


  • 安装命令:
  1. cnpm install axios --save
复制代码



  • 然后同样我们在main.js中全局引入axios。
  1. import axios from 'axios'
  2. //引用全局
  3. Vue.prototype.$axios = axios
复制代码

6、页面路由

接下来，我们先定义好路由和页面，因为我们只是做一个简朴的博客项目，页面比较少，所以我们可以直接先定义好，然后在慢慢开发，如许需要用到链接的地方我们就可以直接可以使用：
我们在views文件夹下定义几个页面：


  • BlogDetail.vue（博客详情页）
  • BlogEdit.vue（编辑博客）
  • Blogs.vue（博客列表）
  • Login.vue（登录页面）
可以配置插件:VueHelper(新建vue项目 最上方输入vuet按键tab可直接天生模板)
几个页面相同，以Login为例

注意:每个页面下方 里面只能有一个
  

测试结果





所有路由正确
7、登录页面开发

登录页面制作
Login.vie
  1. <template>
  2.   <div>
  3.     <el-container>
  4.       <el-header>
  5.         <img class="mlogo" src="https://img1.baidu.com/it/u=3430690511,3867923153&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=453" alt="">
  6.       </el-header>
  7.       <el-main>
  8.         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  9.           <el-form-item label="用户名" prop="username">
  10.             <el-input v-model="ruleForm.username"></el-input>
  11.           </el-form-item>
  13.           <el-form-item label="密码" prop="password">
  14.             <el-input type="password" v-model="ruleForm.password"></el-input>
  15.           </el-form-item>
  17.           <el-form-item>
  18.             <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  19.             <el-button @click="resetForm('ruleForm')">重置</el-button>
  20.           </el-form-item>
  21.         </el-form>
  22.       </el-main>
  23.     </el-container>
  25.   </div>
  26. </template>
  29. <script>
  30. export default {
  31.   name: "Login",
  32.   data() {
  33.     return {
  34.       ruleForm: {
  35.         username: '',
  36.         password: ''
  37.       },
  38.       rules: {
  39.         username: [
  40.           {required: true, message: '请输入用户名', trigger: 'blur'},
  41.           {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
  42.         ],
  43.         password: [
  44.           {required: true, message: '请选输入密码', trigger: 'change'}
  45.         ]
  46.       }
  47.     };
  48.   },
  49.   methods: {
  50.     submitForm(formName) {
  51.       this.$refs[formName].validate((valid) => {
  52.         if (valid) {
  53.           alert('submit!');
  54.         } else {
  55.           console.log('error submit!!');
  56.           return false;
  57.         }
  58.       });
  59.     },
  60.     resetForm(formName) {
  61.       this.$refs[formName].resetFields();
  62.     }
  63.   }
  64. }
  66. </script>
  69. <style scoped>
  70. .el-header, .el-footer {
  71.   background-color: #B3C0D1;
  72.   color: #333;
  73.   text-align: center;
  74.   line-height: 60px;
  75. }
  77. .el-aside {
  78.   background-color: #D3DCE6;
  79.   color: #333;
  80.   text-align: center;
  81.   line-height: 200px;
  82. }
  84. .el-main {
  85. //background-color: #E9EEF3; color: #333; text-align: center;
  86.   line-height: 160px;
  87. }
  89. body > .el-container {
  90.   margin-bottom: 40px;
  91. }
  93. .el-container:nth-child(5) .el-aside,
  94. .el-container:nth-child(6) .el-aside {
  95.   line-height: 260px;
  96. }
  98. .el-container:nth-child(7) .el-aside {
  99.   line-height: 320px;
  100. }
  102. .mlogo {
  103.   height: 60%;
  104.   margin-top: 10px;
  105. }
  107. .demo-ruleForm {
  108.   max-width: 500px;
  109.   margin: 0 auto;
  110. }
  112. </style>
复制代码

在Login.vie中添加axios

测试

登陆乐成，请求头中携带token
8、登录发起请求 (配置完善store)

配置完善store/index.js
在store下面的index.js添加
mutationsx相称于java中实体类的set
getters相称于get*
   userInfo可以存入会话的sessionStorage里面
sessionStorage中只能存字符串 不能存入对象所以我们存入序列化 jons串:
sessionStorage.setItem(“userInfo”,JSON.stringify(userInfo))
会话获取
sessionStorage.getInte(userInfo)
    token可以存入浏览器的localStorage里面
localStorage.setItem(“token”,token)
token获取：
localStorage.getItem(“token”)
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  6. export default new Vuex.Store({
  7.   //定义全局参数 其他页面可以直接获取state里面的内容
  8.   state: {
  9.     token: '', //方法一 localStorage.getItem("token")
  10.     //反序列化获取session会话中的 userInfo对象
  11.     userInfo:JSON.parse(sessionStorage.getItem("userInfo"))
  12.   },
  13.   mutations: {
  14.     //相当于实体类的set
  15.     SET_TOKEN:(state,token)=>{
  16.       state.token=token//将传入的token赋值 给state的token
  17.       //同时可以存入浏览器的localStorage里面
  18.       localStorage.setItem("token",token)
  19.     },
  20.     SET_USERINFO:(state,userInfo)=>{
  21.       state.userInfo=userInfo//将传入的tuserInfo赋值 给state的userInfo
  22.       //同时可以存入会话的sessionStorage里面 sessionStorage中只能存字符串 不能存入对象所以我们存入序列化 jons串
  23.       sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
  24.     },
  25.     //删除token及userInfo
  26.     REMOVE_INFO:(state)=>{
  27.       state.token = '';
  28.       state.userInfo = {};
  29.       localStorage.setItem("token",'')
  30.       sessionStorage.setItem("userInfo",JSON.stringify(''))
  31.     }
  32.   },
  33.   getters: {
  34.     //相当于get
  35.     //配置一个getUser可以直接获取已经反序列化对象的一个userInfo
  36.    getUser: state=>{
  37.      return state.userInfo;
  38.    },getToken: state=>{
  39.     return state.token;
  40.   }
  41.   },
  42.   actions: {
  43.    
  44.   },
  45.   modules: {
  46.    
  47.   }
  48. })
复制代码


  • 在Login.vue中添加
  1. _this.$axios.post("http://localhost:8081/login", _this.ruleForm).then(res => {
  3.          console.log(res)
  4.          const jwt = res.headers['authorization'];
  5.          const userInfo = res.data.data
  6.          _this.$store.commit('SET_TOKEN', token)
  7.          _this.$store.commit('SET_USERINFO', userInfo)
  8.        })
复制代码
  1. <template>
  2.   <div>
  3.     <el-container>
  4.       <el-header>
  5.         <img class="mlogo"
  6.              src="https://img1.baidu.com/it/u=3430690511,3867923153&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=453" alt="">
  7.       </el-header>
  8.       <el-main>
  9.         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  10.           <el-form-item label="用户名" prop="username">
  11.             <el-input v-model="ruleForm.username"></el-input>
  12.           </el-form-item>
  14.           <el-form-item label="密码" prop="password">
  15.             <el-input type="password" v-model="ruleForm.password"></el-input>
  16.           </el-form-item>
  18.           <el-form-item>
  19.             <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  20.             <el-button @click="resetForm('ruleForm')">重置</el-button>
  21.           </el-form-item>
  22.         </el-form>
  23.       </el-main>
  24.     </el-container>
  26.   </div>
  27. </template>
  30. <script>
  31. export default {
  32.   name: "Login",
  33.   data() {
  34.     return {
  35.       ruleForm: {
  36.         username: 'Hanson',
  37.         password: '111111'
  38.       },
  39.       rules: {
  40.         username: [
  41.           {required: true, message: '请输入用户名', trigger: 'blur'},
  42.           {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
  43.         ],
  44.         password: [
  45.           {required: true, message: '请选输入密码', trigger: 'change'}
  46.         ]
  47.       }
  48.     };
  49.   },
  50.   methods: {
  51.     submitForm(formName) {
  52.       this.$refs[formName].validate((valid) => {
  53.         if (valid) {
  54.           const _this = this
  55.           this.$axios.post('http://localhost:8082/login', this.ruleForm).then(res => {
  57.             const jwt = res.headers['authorization']
  59.             const userInfo = res.data.data
  61.             console.log(userInfo)
  63.             // 把数据共享出来
  64.             _this.$store.commit("SET_TOKEN",jwt)
  65.             _this.$store.commit("SET_USERINFO",userInfo)
  67.             // 获取
  68.             // console.log(this.$store.getters.getUser)
  70.             // 跳转页面
  71.             _this.$router.push("/blogs")
  72.           })
  73.         } else {
  74.           console.log('error submit!!');
  75.           return false;
  76.         }
  77.       });
  78.     },
  79.     resetForm(formName) {
  80.       this.$refs[formName].resetFields();
  81.     }
  82.   }
  83. }
  85. </script>
  88. <style scoped>
  89. .el-header, .el-footer {
  90.   background-color: #B3C0D1;
  91.   color: #333;
  92.   text-align: center;
  93.   line-height: 60px;
  94. }
  96. .el-aside {
  97.   background-color: #D3DCE6;
  98.   color: #333;
  99.   text-align: center;
  100.   line-height: 200px;
  101. }
  103. .el-main {
  104. //background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px;
  105. }
  107. body > .el-container {
  108.   margin-bottom: 40px;
  109. }
  111. .el-container:nth-child(5) .el-aside,
  112. .el-container:nth-child(6) .el-aside {
  113.   line-height: 260px;
  114. }
  116. .el-container:nth-child(7) .el-aside {
  117.   line-height: 320px;
  118. }
  120. .mlogo {
  121.   height: 60%;
  122.   margin-top: 10px;
  123. }
  125. .demo-ruleForm {
  126.   max-width: 500px;
  127.   margin: 0 auto;
  128. }
  130. </style>
复制代码
打开页面点击登录
可检察我们的信息已经存入浏览器中


localStorage中存入了token信息，sessionStorage中存入了用户信息
9、配置axios拦截



  • main.js中引入
  1. // 引入自定义axios.js
  2. import "./axios.js"
复制代码



  • 完善axios.js
  1. import axios from 'axios'
  2. import Element from "element-ui";
  3. import router from './router'
  4. import store from './store'
  6. axios.defaults.baseURL = "http://localhost:8082"
  8. // 前置拦截
  9. axios.interceptors.request.use(config => {
  10.     return config
  11. })
  13. axios.interceptors.response.use(response => {
  14.         let res = response.data;
  16.         console.log("====================")
  17.         console.log(res)
  18.         console.log("====================")
  20.         if (res.code === 200) {
  21.             return response
  22.         } else {
  23.             Element.Message.error('错了哦，这是一条错误消息', {duration: 3 * 1000});
  25.             return Promise.reject(response.data.msg)
  26.         }
  27.     },
  28.     error => {
  29.         console.log(error)
  30.         if (error.response.data){
  31.             error.message = error.response.data.msg
  32.         }
  34.         if (error.response.status === 401) {
  35.             store.commit("REMOVE_INFO")
  36.             router.push("/login")
  37.         }
  39.         Element.Message.error(error.message, {duration: 3 * 1000});
  40.         return Promise.reject(error)
  41.     }
  42. )
复制代码


  • 运行结果如下

10、公共组件Header



  • 首先，需要打开redis-serve
在application.yml中加入redis配置
  1. shiro-redis:
  2.   enabled: true
  3.   redis-manager:
  4.     host: 127.0.0.1:6379
复制代码


  • 完善配置Header组件
  1. <template>
  2.   <div class="m-content">
  3.     <h3>欢迎来到Hanson的博客</h3>
  4.     <div class="block">
  5.       <el-avatar :size="50" :src="user.avatar"></el-avatar>
  6.       <div>{{ user.username }}</div>
  7.     </div>
  9.     <div class="maction">
  10.       <span><el-link href="/blogs">主页</el-link></span>
  11.       <el-divider direction="vertical"></el-divider>
  12.       <span><el-link type="success" href="/blog/add">发表博客</el-link></span>
  14.       <el-divider direction="vertical"></el-divider>
  15.       <span v-show="!hasLogin"><el-link type="primary" href="/login">登录</el-link></span>
  17.       <el-divider direction="vertical"></el-divider>
  18.       <span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24. export default {
  25.   name: "Header",
  26.   data() {
  27.     return {
  28.       user: {
  29.         username: '请先登录',
  30.         avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  31.       },
  32.       hasLogin: false
  33.     }
  34.   },
  35.   methods: {
  36.     logout() {
  37.       const _this = this
  38.       _this.$axios.get("/logout", {
  39.         headers: {
  40.           "Authorization": localStorage.getItem("token")
  41.         }
  42.       }).then(res => {
  43.         _this.$store.commit("REMOVE_INFO")
  44.         _this.$router.push("/login")
  45.       })
  46.     }
  47.   },
  48.   created() {
  49.     if (this.$store.getters.getUser.username) {
  50.       this.user.username = this.$store.getters.getUser.username
  51.       this.user.avatar = this.$store.getters.getUser.avatar
  53.       this.hasLogin = true
  54.     }
  55.   }
  56. }
  58. </script>
  60. <style scoped>
  61. .m-content {
  62.   max-width: 960px;
  63.   margin: 0 auto;
  64.   text-align: center;
  65. }
  67. .maction {
  68.   margin: 10px 0;
  69. }
  70. </style>
复制代码


  • 运行项目可以自行测试登录退出功能


11、博客列表页面开发



  • 完善blogs.vue
先给实体类Blog加上JsonFormat

  1. @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  2. private LocalDateTime created;
复制代码


  • 完善Blogs.vue
  1. <template>
  2.   <div class="mcontaner">
  3.     <Header></Header>
  5.     <div class="block">
  6.       <el-timeline>
  8.         <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
  9.           <el-card>
  10.             <h4>
  11.               <router-link :to="{name:'BlogDetail',params:{blogId: blog.id}}">
  12.                 {{ blog.title }}
  13.               </router-link>
  14.             </h4>
  15.             <p>{{ blog.description }}</p>
  16.           </el-card>
  17.         </el-timeline-item>
  19.       </el-timeline>
  21.       <el-pagination class="mpage"
  22.                      background
  23.                      layout="prev, pager, next"
  24.                      :current-page="currentPage"
  25.                      :page-size="pageSize"
  26.                      :total="total"
  27.                      @current-change=page
  29.       >
  30.       </el-pagination>
  31.     </div>
  32.   </div>
  33. </template>
  35. <script>
  36. import Header from "../components/Header"
  38. export default {
  39.   name: "Blogs.vue",
  40.   components: {Header},
  41.   data() {
  42.     return {
  43.       blogs: {},
  44.       currentPage: 1,
  45.       total: 0,
  46.       pageSize: 5
  47.     }
  48.   },
  49.   methods: {
  50.     page(currentPage) {
  51.       const _this = this
  52.       _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
  53.         console.log(res)
  54.         _this.blogs = res.data.data.records
  55.         _this.currentPage = res.data.data.current
  56.         _this.total = res.data.data.total
  57.         _this.pageSize = res.data.data.size
  58.       })
  59.     }
  60.   },
  61.   created() {
  62.     this.page(1)
  63.   }
  64. }
  66. </script>
  69. <style scoped>
  71. .mpage {
  72.   margin: 0 auto;
  73.   text-align: center;
  74. }
  75. </style>
复制代码
结果展示：


点击第二页能翻页

12、博客编辑（发表）

安装mavon-editor


  • 基于Vue的markdown编辑器mavon-editor
  1. cnpm install mavon-editor --save
复制代码


  • 然后在main.js中全局注册：
  1. // 全局注册
  2. import mavonEditor from 'mavon-editor'
  3. import 'mavon-editor/dist/css/index.css'
  4. // use
  5. Vue.use(mavonEditor)
复制代码


  • 编写BlogEdit.vue
  1. <template>
  2.   <div>
  3.     <Header></Header>
  6.     <div class="m-content">
  8.       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  9.         <el-form-item label="标题" prop="title">
  10.           <el-input v-model="ruleForm.title"></el-input>
  11.         </el-form-item>
  13.         <el-form-item label="摘要" prop="description">
  14.           <el-input type="textarea" v-model="ruleForm.description"></el-input>
  15.         </el-form-item>
  17.         <el-form-item label="内容" prop="content">
  18.           <mavon-editor v-model="ruleForm.content"></mavon-editor>
  19.         </el-form-item>
  21.         <el-form-item>
  22.           <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  23.           <el-button @click="resetForm('ruleForm')">重置</el-button>
  24.         </el-form-item>
  25.       </el-form>
  27.     </div>
  30.   </div>
  31. </template>
  33. <script>
  34. import Header from "../components/Header"
  36. export default {
  37.   name: "BlogEdit",
  38.   components: {Header},
  39.   data() {
  40.     return {
  41.       ruleForm: {
  42.         id: "",
  43.         title: '',
  44.         description: '',
  45.         content: ''
  46.       },
  47.       rules: {
  48.         title: [
  49.           {required: true, message: '请输入标题', trigger: 'blur'},
  50.           {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
  51.         ],
  52.         description: [
  53.           {required: true, message: '请输入摘要', trigger: 'blur'}
  54.         ],
  55.         content: [
  56.           {trequired: true, message: '请输入内容', trigger: 'blur'}
  57.         ]
  58.       }
  59.     };
  60.   },
  61.   methods: {
  62.     submitForm(formName) {
  63.       this.$refs[formName].validate((valid) => {
  64.         if (valid) {
  66.           const _this = this
  67.           this.$axios.post('blog/edit', this.ruleForm, {
  68.             headers: {
  69.               "Authorization": localStorage.getItem("token")
  70.             }
  71.           }).then(res => {
  72.             console.log(res)
  73.             this.$alert('操作成功', '提示', {
  74.               confirmButtonText: '确定',
  75.               callback: action => {
  76.                 -this.$router.push("/blogs")
  77.               }
  78.             });
  79.           })
  80.         } else {
  81.           console.log('error submit!!');
  82.           return false;
  83.         }
  84.       });
  85.     },
  86.     resetForm(formName) {
  87.       this.$refs[formName].resetFields();
  88.     }
  89.   },
  90.   created() {
  91.     // 内容渲染的时候进行回显
  92.     const blogId = this.$route.params.blogId
  93.     console.log(blogId)
  94.     if (blogId) {
  95.       this.$axios.get("/blog/" + blogId).then(res => {
  96.         const _this = this
  97.         const blog = res.data.data
  98.         _this.ruleForm.id = blog.id
  99.         _this.ruleForm.title = blog.title
  100.         _this.ruleForm.description = blog.description
  101.         _this.ruleForm.content = blog.content
  102.       })
  103.     }
  104.   }
  105. }
  107. </script>
  109. <style scoped>
  110. .m-content {
  111.   text-align: center;
  112. }
  114. </style>
复制代码
结果展示


13、博客详情

博客详情中需要回显博客信息，然后有个题目就是，后端传过来的是博客内容是markdown格式的内容，我们需要举行渲染然后显示出来，这里我们使用一个插件markdown-it，用于剖析md文档，然后导入github-markdown-c，所谓md的样式。
  1. # 用于解析md文档
  2. cnpm install markdown-it --save
  3. # md样式
  4. cnpm install github-markdown-css
复制代码
然后就可以在需要渲染的地方使用：


  • views\BlogDetail.vue
  1. <template>
  2.   <div>
  3.     <Header></Header>
  4.     <div class="mblog">
  5.       <h2>{{ blog.title }}</h2>
  7.       <el-link icon="el-icon-edit">
  8.         <router-link :to="{name:'BlogEdit' ,params:{BlogId:blog.id}}">
  9.           编辑
  10.         </router-link>
  11.       </el-link>
  13.       <el-divider></el-divider>
  14.       <div class="markdown-body" v-html="blog.content"></div>
  16.     </div>
  17.   </div>
  18. </template>
  20. <script>
  22. import Header from "@/components/Header.vue";
  23. import "github-markdown-css/github-markdown.css"
  25. export default {
  26.   name: "BlogDetail.vue",
  27.   components: {Header},
  28.   data() {
  29.     return {
  30.       blog: {
  31.         id: "",
  32.         title: "",
  33.         content: ""
  34.       }
  35.     }
  36.   },
  37.   created() {
  38.     const blogId = this.$route.params.blogId
  39.     console.log(blogId)
  40.     const _this = this
  41.     this.$axios.get("/blog/" + blogId).then(res => {
  42.       const _this = this
  43.       const blog = res.data.data
  44.       _this.blog.id = blog.id
  45.       _this.blog.title = blog.title
  46.       _this.blog.content = blog.content
  48.       var MarkdownIt = require("markdown-it")
  49.       var md = new MarkdownIt()
  51.       var result = md.render(blog.content)
  52.       _this.blog.content = result
  53.     })
  54.   }
  55. }
  57. </script>
  59. <style scoped>
  60. .mblog {
  61.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  62.   width: 100%;
  63.   min-height: 700px;
  64.   padding: 20px 15px;
  65. }
  67. </style>
复制代码
结果展示：
自己的博客可以编辑

别人的博客不可以编辑

14、路由权限拦截

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


  • src\permission.js
  1. import router from "./router";
  2. // 路由判断登录 根据路由配置文件的参数
  3. router.beforeEach((to, from, next) => {
  4.   if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
  5.     const token = localStorage.getItem("token")
  6.     console.log("------------" + token)
  7.     if (token) { // 判断当前的token是否存在 ； 登录存入的token
  8.       if (to.path === '/login') {
  9.       } else {
  10.         next()
  11.       }
  12.     } else {
  13.       next({
  14.         path: '/login'
  15.       })
  16.     }
  17.   } else {
  18.     next()
  19.   }
  20. })
复制代码
通过之前我们再定义页面路由时候的的meta信息，指定requireAuth: true，需要登录才能访问，因此这里我们在每次路由之前（router.beforeEach）判断token的状态，以为是否需要跳转到登录页面。


  • src/rouer/index.js
    添加：
  1. meta: {
  2.         requireAuth: true
  3. }
复制代码
  1. {
  2.   path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
  3.   name: 'BlogAdd',
  4.   meta: {
  5.     requireAuth: true
  6.   },
  7.   component: BlogEdit
  8. },{
  9.       path: '/blog/:blogid/edit',
  10.       name: 'BlogEdit',
  11.       component: BlogEdit,
  12.       meta: {
  13.         requireAuth: true
  14.       }
复制代码
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Demo from '@/views/Demo'
  5. import Login from '@/views/Login'
  6. import Blogs from '@/views/Blogs'
  7. import BlogEdit from '@/views/BlogEdit'
  8. import BlogDetail from '@/views/BlogDetail'
  10. Vue.use(Router)
  12. export default new Router({
  13.   routes: [
  14.     {
  15.       path: '/',
  16.       name: 'Index',
  17.       redirect:{name : "Blogs"}
  18.     },
  19.     {
  20.       path: '/blogs',
  21.       name: 'Blogs',
  22.       component: Blogs
  23.     },{
  24.     path: '/Login',
  25.     name: 'Login',
  26.     component: Login
  27.     },{
  28.       path: '/blog/add',
  29.       name: 'BlogEdit',
  30.       component: BlogEdit,
  31.       meta: {
  32.         requireAuth: true
  33.       }
  34.     }, {
  35.       path: '/Demo',
  36.       name: 'Demo',
  37.       component: Demo
  38.     },{
  39.       path: '/blog/:blogid',
  40.       name: 'BlogDetail',
  41.       component: BlogDetail
  42.     } ,{
  43.       path: '/blog/:blogid/edit',
  44.       name: 'BlogEdit',
  45.       component: BlogEdit,
  46.       meta: {
  47.         requireAuth: true
  48.       }
  49.     }
  50. ]})
复制代码


  • 然后我们再main.js中import我们的permission.js
  1. // The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'// 存储import store from './store'// 路由import router from './router'// 引入element-ui依赖import Element from 'element-ui'import "element-ui/lib/theme-chalk/index.css"// 引入axios依赖import axios from 'axios'   // 引入自定义axios.js
  2. import "./axios.js"
  3. import './permission.js' // 路由拦截//mavonEditorimport mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'//引用全局Vue.prototype.$axios = axios // useVue.use(mavonEditor)Vue.use(Element)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  store ,  components: { App },  template: '<App/>'})
复制代码
结果展示

未登录访问编辑页面

然后跳转登陆页面
16、前端总结

ok，根本所有页面就已经开发完毕啦，css样式信息我未贴出来，大家直接上github上clone下来检察。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

欢乐狗

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表