根据B站up主MarkerHub视频制作的一个笔记
我的博客
B站博主链接:
/video/BV1PQ4y1P7hZ?p=1
博主的开发文档:
/post/6844903823966732302
部署视频
/video/BV17A411E7aE?p=1
up主的部署文档
https://juejin.im/post/6886061338804617229/
开源项目源码 :
up主的:
/MarkerHub/vueblog
我的:
/hntianshu/vueblog
热部署配置:
/erlongxizhu-03/p/12193646.html
idea报Could not autowired解决办法:
/yxm234786/article/details/81460752
ElementUI官方文档
/#/zh-CN/component/quickstart
PostMan安装包下载
/weixin_43184774/article/details/100578557
VsCode保存自动格式化样式
/wang0112233/article/details/90608328
Redis的安装和启动
/pretty-sunshine/p/10615287.html
搞定Shiro集成redis实现会话共享
/m0_46995061/article/details/106751848
nginx官网
/en/download.html
文章目录
简易博客项目(springboot+jwt+shiro+vue+elementUI+axios+redis+mysql)第一章 整合新建springboot,整合mybatisplus第一步 创建项目(第八步骤就行)+数据库:配置分页MybatisPlusConfig+生成代码(dao 、service、serviceImpl等)第三步 做测试 第二章 统一结果封装第三章 Shiro整合jwt逻辑分析第四章 Shiro逻辑开发第五章 异常处理第六章 实体校验第七章 跨域问题第七章 登录接口开发第八章 博客接口的开发后端总结第九章 Vue前端页面开发前言环境准备新建项目项目的架构vscode前端常用插件推荐,搭建JQuery、Vue等开发环境**使用vscode打开项目并且运行** 安装element-ui补充配置:安装axios页面路由路由中心配置登录页面开发登录页面制作配置store登录发起请求 (配置完善store)**配置axios拦截**公共组件Header 博客编辑(发表)安装mavon-editor 博客详情和编辑按钮的权限路由权限拦截 第十章 其他增加删除文章功能简易博客项目(springboot+jwt+shiro+vue+elementUI+axios+redis+mysql)
第一章 整合新建springboot,整合mybatisplus
第一步 创建项目(第八步骤就行)+数据库:
/weixin_43247803/article/details/113622480
修改pom.xml借鉴
<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><!-- lookup parent from repository --><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.6.RELEASE</version><relativePath/></parent><groupId>com.vueblog</groupId><artifactId>vueblog</artifactId><version>0.0.1-SNAPSHOT</version><name>vueblog</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><!-- web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- devtools --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><!-- mysql --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!-- lombok --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!-- testing --><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><!--mybatis-plus--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.2.0</version></dependency><!-- framework: mybatis-plus代码生成需要一个模板引擎 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency><!--mp代码生成器--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.2.0</version></dependency><!-- hutool --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.3</version></dependency><!-- jwt --><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency><!-- shiro-redis --><!-- <dependency><groupId>org.crazycake</groupId><artifactId>shiro-redis-spring-boot-starter</artifactId><version>3.2.1</version></dependency>--></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
修改配置文件
# DataSource Configspring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456mybatis-plus:mapper-locations: classpath*:/mapper/**Mapper.xmlserver:port: 8081
创建数据库vueblog然后执行下面命令生成表
DROP TABLE IF EXISTS `m_blog`;/*!40101 SET @saved_cs_client= @@character_set_client */;SET character_set_client = utf8mb4 ;CREATE TABLE `m_blog` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`user_id` bigint(20) NOT NULL,`title` varchar(255) NOT NULL,`description` varchar(255) NOT NULL,`content` longtext,`created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,`status` tinyint(4) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;/*!40101 SET character_set_client = @saved_cs_client */; DROP TABLE IF EXISTS `m_user`;/*!40101 SET @saved_cs_client= @@character_set_client */;SET character_set_client = utf8mb4 ;CREATE TABLE `m_user` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`username` varchar(64) DEFAULT NULL,`avatar` varchar(255) DEFAULT NULL,`email` varchar(64) DEFAULT NULL,`password` varchar(64) DEFAULT NULL,`status` int(5) NOT NULL,`created` datetime DEFAULT NULL,`last_login` datetime DEFAULT NULL,PRIMARY KEY (`id`),KEY `UK_USERNAME` (`username`) USING BTREE) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;/*!40101 SET character_set_client = @saved_cs_client */; INSERT INTO `vueblog`.`m_user` (`id`, `username`, `avatar`, `email`, `password`, `status`, `created`, `last_login`) VALUES ('1', 'markerhub', 'https://image-1300566513.cos.ap-/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', '0', '-04-20 10:44:01', NULL);
配置分页MybatisPlusConfig+生成代码(dao 、service、serviceImpl等)
1.0 配置分页
创建MybatisPlusConfig类(创建路径com/vueblog/config)
package com.vueblog.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 {@Beanpublic PaginationInterceptor paginationInterceptor() {PaginationInterceptor paginationInterceptor = new PaginationInterceptor();return paginationInterceptor;}}
2.0 生成代码
创建CodeGenerator(在com.vueblog包下面)
**修改对应的数据库:账号密码、数据库名、包配置(ctrl+f可找到对应位置) **
然后运行输入俩表 ,号隔开是多表
package com.vueblog;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("anonymous");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.vueblog");mpg.setPackageInfo(pc);// 自定义配置InjectionConfig cfg = new InjectionConfig() {@Overridepublic void initMap() {// to do nothing}};// 如果模板引擎是 freemarkerString templatePath = "/templates/mapper.xml.ftl";// 如果模板引擎是 velocity// String templatePath = "/templates/mapper.xml.vm";// 自定义输出配置List<FileOutConfig> focList = new ArrayList<>();// 自定义配置会被优先输出focList.add(new FileOutConfig(templatePath) {@Overridepublic 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();}}
效果如下:
第三步 做测试
1.0 UserController类(ctrl+R可全局搜索类)
package com.vueblog.controller;import com.vueblog.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/*** <p>* 前端控制器* </p>** @author 深林中的书海* @since -02-05*/@RestController@RequestMapping("/user")public class UserController {@Autowiredprivate UserService userService;@GetMapping("/index")public Object index(){return userService.getById(1);}}
2.0 运行项目 查看效果
第二章 统一结果封装
这里我们用到了一个Result的类,这个用于我们的异步统一返回的结果封装。一般来说,结果里面有几个要素必要的
是否成功,可用code表示(如200表示成功,400表示异常)结果消息结果数据Result类(路径mon.lang;)
package mon.lang;import lombok.Data;import java.io.Serializable;@Datapublic class Result implements Serializable {//序列化private int code; //200是正常 400表示异常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;}}
在UserController 中引用测试
package com.vueblog.controller;import mon.lang.Result;import com.vueblog.entity.User;import com.vueblog.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/*** <p>* 前端控制器* </p>** @author 深林中的书海* @since -02-05*/@RestController@RequestMapping("/user")public class UserController {@Autowiredprivate UserService userService;@GetMapping("/index")public Object index(){User user = userService.getById(1);return Result.succ(200,"操作成功",user);}}
页面运行效果图 (http://localhost:8081/user/index)
第三章 Shiro整合jwt逻辑分析
考虑到后面可能需要做集群、负载均衡等,所以就需要会话共享,而shiro的缓存和会话信息,我们一般考虑使用redis来存储这些数据,所以,我们不仅仅需要整合shiro,同时也需要整合redis。在开源的项目中,我们找到了一个starter可以快速整合shiro-redis,配置简单,这里也推荐大家使用。
而因为我们需要做的是前后端分离项目的骨架,所以一般我们会采用token或者jwt作为跨域身份验证解决方案。所以整合shiro的过程中,我们需要引入jwt的身份验证过程。
那么我们就开始整合:
我们使用一个shiro-redis-spring-boot-starter的jar包,具体教程可以看官方文档:/alexxiyang/…
导入shiro-redis的starter包:还有jwt的工具包,以及为了简化开发,引入hutool工具包。
pom.xml中导入:
<!-- shiro-redis --><dependency><groupId>org.crazycake</groupId><artifactId>shiro-redis-spring-boot-starter</artifactId><version>3.2.1</version></dependency> <!-- hutool工具类 --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.3</version></dependency><!-- jwt 生成工具 校验工具--><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency>
创建ShiroConfig
文件路径:com/vueblog/config
package com.vueblog.config;import com.vueblog.shiro.AccountRealm;import com.vueblog.shiro.JwtFilter;import org.apache.shiro.mgt.DefaultSessionStorageEvaluator;import org.apache.shiro.mgt.DefaultSubjectDAO;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 java.util.HashMap;import java.util.LinkedHashMap;import java.util.Map;import javax.servlet.Filter;/*** shiro启用注解拦截控制器*/@Configurationpublic class ShiroConfig {@Autowiredprivate JwtFilter jwtFilter;@Beanpublic SessionManager sessionManager(RedisSessionDAO redisSessionDAO) {DefaultWebSessionManager sessionManager = new DefaultWebSessionManager();sessionManager.setSessionDAO(redisSessionDAO);return sessionManager;}@Beanpublic DefaultWebSecurityManager securityManager(AccountRealm accountRealm,SessionManager sessionManager,RedisCacheManager redisCacheManager) {DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager(accountRealm);securityManager.setSessionManager(sessionManager);securityManager.setCacheManager(redisCacheManager);/** 关闭shiro自带的session,详情见文档*/DefaultSubjectDAO subjectDAO = new DefaultSubjectDAO();DefaultSessionStorageEvaluator defaultSessionStorageEvaluator = new DefaultSessionStorageEvaluator();defaultSessionStorageEvaluator.setSessionStorageEnabled(false);subjectDAO.setSessionStorageEvaluator(defaultSessionStorageEvaluator);securityManager.setSubjectDAO(subjectDAO);return securityManager;}@Beanpublic 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;}}
创建MybatisPlusConfig
路径:com.vueblog.config
package com.vueblog.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 {@Beanpublic PaginationInterceptor paginationInterceptor() {PaginationInterceptor paginationInterceptor = new PaginationInterceptor();return paginationInterceptor;}}
创建AccountRealm
路径: com.vueblog.shiro
package com.vueblog.shiro;import org.apache.shiro.authc.AuthenticationException;import org.apache.shiro.authc.AuthenticationInfo;import org.apache.shiro.authc.AuthenticationToken;import org.apache.shiro.authz.AuthorizationInfo;import org.apache.shiro.realm.AuthorizingRealm;import org.apache.shiro.subject.PrincipalCollection;import org.ponent;@Componentpublic class AccountRealm extends AuthorizingRealm {//为了让realm支持jwt的凭证校验@Overridepublic boolean supports(AuthenticationToken token) {return token instanceof JwtToken;}//权限校验@Overrideprotected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {return null;}//登录认证校验@Overrideprotected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {JwtToken jwtToken = (JwtToken) token;return null;}}
注意事项如果启动不了在VueblogApplication加入@MapperScan扫描mapper
@SpringBootApplication@MapperScan(basePackages = "com.vueblog.mapper")public class VueblogApplication {public static void main(String[] args) {SpringApplication.run(VueblogApplication.class, args);}}
创建JwtFilter
路径:com.vueblog.shiro;
package com.vueblog.shiro;import cn.hutool.http.server.HttpServerRequest;import cn.hutool.json.JSONUtil;import com.baomidou.mybatisplus.core.toolkit.StringUtils;import mon.lang.Result;import com.vueblog.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.springframework.beans.factory.annotation.Autowired;import org.ponent;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@Componentpublic class JwtFilter extends AuthenticatingFilter {@AutowiredJwtUtils jwtUtils;//验证token@Overrideprotected AuthenticationToken createToken(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {HttpServletRequest request = (HttpServletRequest)servletRequest;//获取头部tokenString jwt = request.getHeader("Authorization");if(StringUtils.isEmpty(jwt)){return null;}return new JwtToken(jwt);}@Overrideprotected boolean onAccessDenied(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {HttpServletRequest request = (HttpServletRequest)servletRequest;//获取头部tokenString jwt = request.getHeader("Authorization");if(StringUtils.isEmpty(jwt)){return true;}else{// 校验jwtClaims claims = jwtUtils.getClaimByToken(jwt);//校验是否为空和时间是否过期if(claims == null || jwtUtils.isTokenExpired(claims.getExpiration())){throw new ExpiredCredentialsException("token已失效,请重新登录");}//执行登录return executeLogin(servletRequest,servletResponse);}}//捕捉错误重写方法返回Result@Overrideprotected 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());//返回jsonString json = JSONUtil.toJsonStr(result);try {//打印jsonhttpServletResponse.getWriter().print(json);}catch (IOException ioException){}return false;}}
创建JwtToken
路径:com.vueblog.shiro
package com.vueblog.shiro;import org.apache.shiro.authc.AuthenticationToken;public class JwtToken implements AuthenticationToken {private String token;public JwtToken(String jwt){this.token = jwt;}@Overridepublic Object getPrincipal() {return token;}@Overridepublic Object getCredentials() {return token;}}
创建JwtUtils
路径:com.vueblog.util
package com.vueblog.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.ponent;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
路径:resources/WETA-INF/
restart.include.shiro-redis=/shiro-[\\w-\\.]+jar
第四章 Shiro逻辑开发
小提示:登录调用AccountRealm类下面的doGetAuthenticationInfo
创建类AccountProfile 用于传递数据
路径:com.vueblog.shiro
package com.vueblog.shiro;import lombok.Data;import java.io.Serializable;@Datapublic class AccountProfile implements Serializable {private Long id;private String username;private String avatar;private String email;}
完善AccountRealm
package com.vueblog.shiro;import cn.hutool.core.bean.BeanUtil;import com.vueblog.entity.User;import com.vueblog.service.UserService;import com.vueblog.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.ponent;@Componentpublic class AccountRealm extends AuthorizingRealm {@AutowiredJwtUtils jwtUtils;@AutowiredUserService userService;//为了让realm支持jwt的凭证校验@Overridepublic boolean supports(AuthenticationToken token) {return token instanceof JwtToken;}//权限校验@Overrideprotected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {return null;}//登录认证校验@Overrideprotected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {JwtToken jwtToken = (JwtToken) token;//获取userIdString userId = jwtUtils.getClaimByToken((String) jwtToken.getPrincipal()).getSubject();//获取用户内容User user = userService.getById(Long.valueOf(userId));if(user == null){throw new UnknownAccountException("账户不存在");}if(user.getStatus() == -1){throw new LockedAccountException("账户不存在");}AccountProfile profile = new AccountProfile();BeanUtil.copyProperties(user,profile);//将user数据转移到profile//用户信息 密钥token 用户名字return new SimpleAuthenticationInfo(profile,jwtToken.getCredentials(),getName());}}
第五章 异常处理
创建GlobalExceptionHandler 类
捕获全局异常
package mon.exception;import mon.lang.Result;import lombok.extern.slf4j.Slf4j;import org.apache.shiro.ShiroException;import org.springframework.http.HttpStatus;import org.springframework.web.bind.annotation.ExceptionHandler;import org.springframework.web.bind.annotation.ResponseStatus;import org.springframework.web.bind.annotation.RestControllerAdvice;/*** 日志输出* 全局捕获异常*/@Slf4j@RestControllerAdvicepublic class GlobalExceptionHandler {@ResponseStatus(HttpStatus.UNAUTHORIZED) //因为前后端分离 返回一个状态 一般是401 没有权限@ExceptionHandler(value = ShiroException.class)//捕获运行时异常ShiroException是大部分异常的父类public Result handler(ShiroException e){log.error("运行时异常:-----------------{}",e);return Result.fail(401,e.getMessage(),null);}@ResponseStatus(HttpStatus.BAD_REQUEST) //因为前后端分离 返回一个状态@ExceptionHandler(value = RuntimeException.class)//捕获运行时异常public Result handler(RuntimeException e){log.error("运行时异常:-----------------{}",e);return Result.fail(e.getMessage());}}
然而我们运行测试发现并没有拦截
因为我们没有进行登录拦截
@RequiresAuthentication//登录拦截注解
运行效果:
提示401登录异常
第六章 实体校验
当我们表单数据提交的时候,前端的校验我们可以使用一些类似于jQuery Validate等js插件实现,而后端我们可以使用Hibernate validatior来做校验。 我们使用springboot框架作为基础,那么就已经自动集成了Hibernate validatior。(校验登录非空等等)
User实体类中
import javax.validation.constraints.Email;import javax.validation.constraints.NotBlank;....@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;@NotBlank(message = "邮箱不能为空")@Email(message = "邮箱格式不正确")private String email;...}
在userController类中写一个方法测试
/****@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);* GET方式无请求体,所以使用@RequestBody接收数据时,* 前端不能使用GET方式提交数据,* 而是用POST方式进行提交。在后端的同一个接收方法里,* @RequestBody与@RequestParam()可以同时使用,@RequestBody最多只能有一个,* 而@RequestParam()可以有多个。** @Validated注解用于检查user中填写的规则 如果不满足抛出异常* 可在GlobalExceptionHandler中捕获此异常 进行自定义 返回数据信息*/@PostMapping("/save")public Result save(@Validated @RequestBody User user){return Result.succ(user);}
启动postMan测试 如果postman没法启动 可以新建一个环境变量POSTMAN_DISABLE_GPU = true。 1.打开高级系统设置; 2.在“高级”选项卡中,单击“环境变量”; 3.添加一个新的系统变量; 4.关闭Postman并重新打开
定义捕获异常返回处理
在捕获异常 GlobalExceptionHandler类中修改如下:
/*** 实体校验异常* MethodArgumentNotValidException捕获实体校验异常*/@ResponseStatus(HttpStatus.BAD_REQUEST) //因为前后端分离 返回一个状态@ExceptionHandler(value = MethodArgumentNotValidException.class)//捕获运行时异常public Result handler(MethodArgumentNotValidException e){log.error("实体捕获异常 :-----------------{}",e);BindingResult bindingException = e.getBindingResult();//多个异常顺序抛出异常ObjectError objectError = bindingException.getAllErrors().stream().findFirst().get();return Result.fail(objectError.getDefaultMessage());}
效果如下:(变得简短了)
输入正确的格式如下:
返回了我们需要的信息
第七章 跨域问题
因为是前后端分析,所以跨域问题是避免不了的,我们直接在后台进行全局跨域处理:
路径:com.vueblog.config
注意:此配置是配置到confroller的,在confroller之前是经过jwtFilter,所以在进行访问之前配置一下Filter的跨域问题
package com.vueblog.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** 解决跨域问题*/@Configurationpublic class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}}
jwtFilter进行跨域处理:
路径:com.vueblog.shiro
/*** 对跨域提供支持* @param request* @param response* @return* @throws Exception*/@Overrideprotected 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);}
----基本框架已经搭建完成-----
第七章 登录接口开发
创建LoginDto路径: mon.dtopackage mon.dto;import lombok.Data;import javax.validation.constraints.NotBlank;import java.io.Serializable;@Datapublic class LoginDto implements Serializable {@NotBlank(message = "用户名不能为空")private String username;@NotBlank(message = "密码不能为空")private String password;}
在GlobalExceptionHandler类中增加断言异常
路径:mon.exception
/*** 断言异常* @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.vueblog.controller;import cn.hutool.core.lang.Assert;import cn.hutool.core.map.MapUtil;import cn.hutool.crypto.SecureUtil;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import mon.dto.LoginDto;import mon.lang.Result;import com.vueblog.entity.User;import com.vueblog.service.UserService;import com.vueblog.util.JwtUtils;import org.apache.shiro.SecurityUtils;import org.apache.shiro.authz.annotation.RequiresAuthentication;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.validation.annotation.Validated;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;@RestControllerpublic class AccountController {@AutowiredUserService userService;@AutowiredJwtUtils jwtUtils;@RequestMapping("/login")public Result login(@Validated @RequestBody LoginDto loginDto, HttpServletResponse response){User user = userService.getOne(new QueryWrapper<User>().eq("username", loginDto.getUsername()));Assert.notNull(user,"用户不存在");//断言拦截//判断账号密码是否错误 因为是md5加密所以这里md5判断if(!user.getPassword().equals(SecureUtil.md5(loginDto.getPassword()))){//密码不同则抛出异常return Result.fail("密码不正确");}String jwt = jwtUtils.generateToken(user.getId());//将token 放在我们的header里面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()).put("email",user.getEmail()).map());}//需要认证权限才能退出登录@RequiresAuthentication@RequestMapping("/logout")public Result logout() {//退出登录SecurityUtils.getSubject().logout();return null;}}
运行效果:
第八章 博客接口的开发
创建工具类ShiroUtil路径om.vueblog.util,可于判断等等
package com.vueblog.util;import com.vueblog.shiro.AccountProfile;import org.apache.shiro.SecurityUtils;public class ShiroUtil {public static AccountProfile getProfile(){return (AccountProfile) SecurityUtils.getSubject().getPrincipal();}}
完善BlogController类
package com.vueblog.controller;import cn.hutool.core.bean.BeanUtil;import cn.hutool.core.lang.Assert;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.metadata.IPage;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;import mon.lang.Result;import com.vueblog.entity.Blog;import com.vueblog.service.BlogService;import com.vueblog.util.ShiroUtil;import org.apache.shiro.authz.annotation.RequiresAuthentication;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.validation.annotation.Validated;import org.springframework.web.bind.annotation.*;import java.time.LocalDateTime;/*** <p>* 前端控制器* </p>** @author 深林中的书海* @since -02-05*/@RestControllerpublic class BlogController {@AutowiredBlogService 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);}//@PathVariable动态路由@GetMapping("/blog/{id}")public Result detail(@PathVariable Long id){Blog blog = blogService.getById(id);//判断是否为空 为空则断言异常Assert.notNull(blog,"该博客已被删除");return Result.succ(blog);}//@Validated校验//@RequestBody//添加删除 木有id则添加 有id则编辑@RequiresAuthentication //需要认证之后才能操作@PostMapping("/blog/edit")public Result edit(@Validated @RequestBody Blog blog){//一个空对象用于赋值Blog temp = null;//如果有id则是编辑if(blog.getId() != null){temp = blogService.getById(blog.getId());//将数据库的内容传递给temp//只能编辑自己的文章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);}//将blog的值赋给temp 忽略 id userid created status 引用于hutoolBeanUtil.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("文章删除失败");}}}
运行程序
查询测试:
新增编辑测试:
得到token
选中header=>填写token
选中body=>raw=>json填写请求
新增
{"title":"标题测试","description":"描述测试哦奥德萨","content":"内容测试阿斯顿撒哦i等哈送到哈桑"}
修改
{"id":21,"title":"标题测试修改","description":"描述测试哦奥德萨","content":"内容测试阿斯顿撒哦i等哈送到哈桑"}
文章删除
后端总结
后端的一个骨架基本完成然后开始我们的前端开发
第九章 Vue前端页面开发
前言
接下来,我们来完成vueblog前端的部分功能。可能会使用的到技术如下: vue element-ui axios mavon-editor markdown-it github-markdown-css
环境准备
node.js安装:/zh-cn/
安装完成之后检查下版本信息:
接下来,我们安装vue的环境
# 安装淘宝npmnpm install -g cnpm --registry=https://registry.# vue-cli 安装依赖包cnpm install --g vue-cli
新建项目
选中要建立的文件cmd打开
进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名
输入:
vue init webpack xx
全部enter即可
完成
运行项目
进入demo(项目)目录 运行
cd demonpm run dev
浏览器打开
项目的架构
├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新│ ├── dev-server.js运行本地开发服务器│ ├── utils.js 构建相关工具方法│ ├── webpack.base.conf.jswabpack基础配置│ ├── webpack.dev.conf.js wabpack开发环境配置│ └── webpack.prod.conf.jswabpack生产环境配置├── config 项目配置│ ├── dev.env.js 开发环境变量│ ├── index.js 项目配置文件│ ├── prod.env.js 生产环境变量│ └── test.env.js 测试环境变量├── mock mock数据目录│ └── hello.js├── package.jsonnpm包配置文件,里面定义了项目的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.jskarma配置文件└── specs 单测case目录└── Hello.spec.js
集成开发工具Visual Studio Code(VsCode)
VsCode的安装:
/
vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
汉化插件:chinese
插件如何导入和一些推荐插件:
/jiandan1127/article/details/85957003/
使用vscode打开项目并且运行
ctrl+`(~键)打开终端
输入:
npm run dev
效果如下则成功:
安装element-ui
官方文档:/#/zh-CN/component/installation
ctrl+`(~键)打开终端输入安装命令
# 安装element-uicnpm 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)
测试elementUi是否引入成功
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Demo from '@/views/Demo' Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}, {path: '/Demo',name: 'Demo',component: Demo}]})
新建Demo.vue
src/views/demo
引入button按钮(官方直接复制)
<template><div class="Demo">{{msg}}<el-button type="primary">主要按钮</el-button></div></template><script>export default{name: "Demo",data() {return {msg: "测试"};}}</script>
App.vue添加:
<div id="nav"><router-link to="/demo">Demo页面</router-link></div>
运行项目浏览器打开项目显示下方则成功
补充配置:
autoOpenBrowser修改为true。
autoOpenBrowser:true
安装axios
接下来,我们来安装axios(www.axios-/),axios是一个基于 promise 的 HTTP 库,这样我们进行前后端对接的时候,使用这个工具可以提高我们的开发效率。
安装命令:
cnpm install axios --save
然后同样我们在main.js中全局引入axios。
import axios from 'axios'//引用全局Vue.prototype.$axios = axios
页面路由
接下来,我们先定义好路由和页面,因为我们只是做一个简单的博客项目,页面比较少,所以我们可以直接先定义好,然后在慢慢开发,这样需要用到链接的地方我们就可以直接可以使用:
我们在views文件夹下定义几个页面:
BlogDetail.vue(博客详情页) BlogEdit.vue(编辑博客) Blogs.vue(博客列表) Login.vue(登录页面)
可以配置插件:VueHelper(新建vue项目 最上方输入vuet按键tab可直接生成模板)
建立页面完成
注意:每个页面下方<template><temlate> 里面只能有一个<div></div>
路由中心配置
路径:rountr/index.js
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Demo from '@/views/Demo' import Login from '@/views/Login' import Blogs from '@/views/Blogs' import BlogEdit from '@/views/BlogEdit' import BlogDetail from '@/views/BlogDetail' Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:{name : "Blogs"}},{path: '/blogs',name: 'Blogs',component: Blogs},{path: '/Login',name: 'Login',component: Login},{path: '/blog/add',name: 'BlogEdit',component: BlogEdit}, {path: '/Demo',name: 'Demo',component: Demo},{path: '/blog/:blogid',name: 'BlogDetail',component: BlogDetail} ,{path: '/blog/:blogid/edit',name: 'BlogEdit', component: BlogEdit}]})
打开终端 npm run dev启动项目
可自行测试其他路由
测试完我们可以删掉App.vue中的测试和图片
登录页面开发
登录页面制作
Login.vie
<template><div><el-container><el-header><img class="mlogo" src="../assets/logo.jpg" alt="logo图片" /></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 v-model="ruleForm.password"></el-input></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></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: 'blur' }]}};},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm (formName) {this.$refs[formName].resetFields();}}}</script><style scoped>.el-header,.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;}.el-main {/* background-color: #e9eef3; */color: #333;text-align: center;line-height: 160px;}.mlogo {height: 80%;}.demo-ruleForm {max-width: 500px;margin: 0 auto;}</style>
配置store
在src包下面创建stroe文件夹 然后创建index.js
import Vue from 'vue'import Vuex from 'vuex';Vue.use(Vuex)export default new Vuex.Store({state: {token:'',userInfo:{}},mutations: {},actions: {},modules: {}})
然后我们给main.js中引入store
// 存储import store from './store'//在new Vue({}) 里面加入storenew Vue({el: '#app',router,store ,components: {App },template: '<App/>'})
// 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'//引用全局Vue.prototype.$axios = axios Vue.use(Element)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,store ,components: {App },template: '<App/>'})
** npm run dev启动测试**
登录发起请求 (配置完善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")
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({//定义全局参数 其他页面可以直接获取state里面的内容state: {token: '', //方法一 localStorage.getItem("token") //反序列化获取session会话中的 userInfo对象userInfo:JSON.parse(sessionStorage.getItem("userInfo"))},mutations: {//相当于实体类的setSET_TOKEN:(state,token)=>{state.token=token//将传入的token赋值 给state的token//同时可以存入浏览器的localStorage里面localStorage.setItem("token",token)},SET_USERINFO:(state,userInfo)=>{state.userInfo=userInfo//将传入的tuserInfo赋值 给state的userInfo//同时可以存入会话的sessionStorage里面 sessionStorage中只能存字符串 不能存入对象所以我们存入序列化 jons串sessionStorage.setItem("userInfo",JSON.stringify(userInfo))},//删除token及userInfoREMOVE_INFO:(state)=>{state.token = '';state.userInfo = {};localStorage.setItem("token",'')sessionStorage.setItem("userInfo",JSON.stringify(''))}},getters: {//相当于get//配置一个getUser可以直接获取已经反序列化对象的一个userInfogetUser: state=>{return state.userInfo;},getToken: state=>{return state.token;}},actions: {},modules: {}})
在Login.vue中添加
_this.$axios.post("http://localhost:8081/login", _this.ruleForm).then(res => {console.log(res)const jwt = res.headers['authorization'];const userInfo = res.data.data_this.$mit('SET_TOKEN', token)_this.$mit('SET_USERINFO', userInfo)})
<template><div><el-container><el-header><img class="mlogo" src="../assets/logo.jpg" alt="logo图片" /></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 v-model="ruleForm.password"></el-input></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></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: 'blur' }]}};},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = this;//获取整个vue的thisconsole.log("校验成功")// alert('submit!');_this.$axios.post("http://localhost:8081/login", _this.ruleForm).then(res => {console.log(res)const jwt = res.headers['authorization'];const userInfo = res.data.data//存储(共享)全局变量jwt和userInfo_this.$mit("SET_TOKEN", jwt);_this.$mit("SET_USERINFO", userInfo);//获取token和getUser// console.log(_this.$store.getters.getToken)// console.log(_this.$store.getters.getUser) })} else {console.log('error submit!!');return false;}});},resetForm (formName) {this.$refs[formName].resetFields();}}}</script><style scoped>.el-header,.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;}.el-main {/* background-color: #e9eef3; */color: #333;text-align: center;line-height: 160px;}.mlogo {height: 80%;}.demo-ruleForm {max-width: 500px;margin: 0 auto;}</style>
打开页面点击登录
可查看我们的信息已经存入浏览器中
配置axios拦截
src下面创建axios.jsmain.js中引入// 引入自定义axios.jsimport "./axios.js"
完善axios.js
// 引入axios依赖import axios from 'axios'// 引入element-ui依赖import Element from 'element-ui'import store from './store';// 引入路由import router from './router'var s=window.location.toString(); var s1=s.substr(7,s.length);var s2=s1.indexOf("/");s=s.substr(0,8+s2);var a = "http://localhost:8081/";//获取连接前缀相当于 http://localhost:8081///配置默认前缀axios.defaults.baseURL= a//配置前置拦截axios.interceptors.request.use(config => {return config})//配置后置拦截axios.interceptors.response.use(response=>{let res = response.data; if(res.code == 200){return response}else{Element.Message.error("操作错了哦",{duration : 2*1000}) //返回一个异常提示就不会继续往下走了 不+的话 res=>的里面 还是会继续走的return Promise.reject(response.data.msg)}// 捕获并处理后台异常信息},error=>{// 使得异常信息更加友好console.log(error) if (error.response.data) {//data不为空时error.message = error.response.data.msgconsole.log("-------------------------")console.log(error.message)console.log("-------------------------")}if(error.response.status == 401){mit('REMOVE_INFO')//清空token userinforouter.push("/login") //跳转登录页面} Element.Message.error(error.message)return Promise.reject(error)})
npm run dev运行效果
公共组件Header
打开AccountController
要先打开在logout方法里面返回一个Result 不然会报错
如果报错了这个需要先安装redis并且启动
/pretty-sunshine/p/10615287.html
完善配置Header组件
<template><div class="m-content"><h3>欢迎来到我的博客世界</h3><div class="block"><div class="block"><el-avatar :size="50" :src="user.avatar"></el-avatar></div><div>{{user.username}}</div><div class="maction"><span><el-link>主页</el-link></span><el-divider direction="vertical"></el-divider><span><el-link type="success">发表博客</el-link></span><el-divider direction="vertical"></el-divider><span v-show="!hasLogin"><el-link type="primary" @click="login">登录</el-link></span><span v-show="hasLogin"><el-link type="danger" @click="logout">退出</el-link></span></div></div></div></template><script>export default {name: "Header", data () {return {user: {username: '请先登录',avatar: '../assets/logo.png'},hasLogin: false}},methods: {//退出操作logout () {const _this = this//首先调用后端logout接口(因该接口需要认证权限,所以需要传入token)//其次调用$store清除用户信息及token_this.$axios.get("/logout", {headers: {"Authorization": localStorage.getItem("token")}}).then(res => {_this.$mit("REMOVE_INFO")_this.$router.push("/login")})},login () {//跳转登录页面进行登录this.$router.push("/login")}},//页面创建时即会调用,进而获取用户信息created () {console.log("=======123=")console.log(this.$store.getters.getUser)if (this.$store.getters.getUser.username) {//如果username不为空this.user.username = this.$store.getters.getUser.usernamethis.user.avatar = this.$store.getters.getUser.avatar//判断是登录状态还是非登录显示 退出按钮或者登录按钮this.hasLogin = true;}}}</script><style>.m-content {max-width: 960px;margin: 0 auto;text-align: center;}.maction {}</style>
运行项目可以自行测试登录退出功能
完善blogs.vue
先给实体类Blog加上JsonFormat
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private LocalDateTime created;
完善Blogs.vue
<template><div class="mcontaner"><Header></Header><div class="block"><el-timeline><el-timeline-item :timestamp="blog.created" placement="top" v-for="(blog,key) in blogs" :key=key><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="mage" background layout="prev, pager, next" :current-page="currentPage":page-size="pageSize" :total="total" @current-change=page></el-pagination></div></div></template><script>//引入header组件import Header from "../components/Header";export default {data () {return {blogs: {},currentPage: 1,total: 0,pageSize: 5}},name: "Blogs",components: {Header },methods: {page (currentPage) {const _this = this_this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {var data = res.data.data_this.blogs = data.records_this.currentPage = data.current_this.pageSize = data.size_this.total = data.total})}},created () {this.page(1)}}</script><style scoped>.block {margin: 20px;}.mage {margin: 0 auto;}</style>
博客编辑(发表)
安装mavon-editor
基于Vue的markdown编辑器mavon-editorcnpm install mavon-editor --save
然后在main.js中全局注册:
// 全局注册 import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)
// 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.jsimport "./axios.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/>'})
编写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",components: {Header },data () {return {ruleForm: {id: '',title: '',description: '',content: ''},rules: {title: [{required: true, message: '请输入标题', trigger: 'blur' },{min: 3, max: 5, message: '长度在 3 到 15 个字符', trigger: 'blur' }],description: [{required: true, message: '请输入摘要', trigger: 'blur' },],content: [{required: true, message: '请输入内容', trigger: 'blur' },]}};},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = thisthis.$axios.post('/blog/edit', this.ruleForm, {headers: {"Authorization": localStorage.getItem("token")}}).then(res => {_this.$alert('操作成功', '提示', {confirmButtonText: '确定',callback: action => {_this.$router.push("/blogs")}});})} else {console.log('error submit!!');return false;}});},resetForm (formName) {this.$refs[formName].resetFields();}},created () {//获取动态路由的 blogidconst blogId = this.$route.params.blogidconsole.log(blogId)const _this = thisif (blogId) {this.$axios.get("/blog/" + blogId).then(res => {console.log(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>
运行效果
编辑:
博客详情和编辑按钮的权限
博客详情中需要回显博客信息,然后有个问题就是,后端传过来的是博客内容是markdown格式的内容,我们需要进行渲染然后显示出来,这里我们使用一个插件markdown-it,用于解析md文档,然后导入github-markdown-c,所谓md的样式。
# 用于解析md文档cnpm install markdown-it --save# md样式cnpm install github-markdown-css
然后就可以在需要渲染的地方使用:
views\BlogDetail.vue
<template><div><Header></Header><div class="blog"><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-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",components: {Header },data () {return {blog: {id: '',title: '',content: '',description: ''},ownblog: false}},created () {//获取动态路由的 blogidconst blogId = this.$route.params.blogidconst _this = thisif (blogId) {this.$axios.get("/blog/" + blogId).then(res => {const blog = res.data.data_this.blog.id = blog.id_this.blog.title = blog.title_this.blog.description = blog.description//MardownIt 渲染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>.blog {margin-top: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 100%;min-height: 700px;padding: 10px;}</style>
路由权限拦截
页面已经开发完毕之后,我们来控制一下哪些页面是需要登录之后才能跳转的,如果未登录访问就直接重定向到登录页面,因此我们在src目录下定义一个js文件:
//配置一个路由前置拦截 rounter是路由
src\permission.js
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是否存在 ; 登录存入的tokenif (to.path === '/login') {} else {next()}} else {next({path: '/login'})}} else {next()}})
通过之前我们再定义页面路由时候的的meta信息,指定requireAuth: true,需要登录才能访问,因此这里我们在每次路由之前(router.beforeEach)判断token的状态,觉得是否需要跳转到登录页面。
src/rouer/index.js
添加:
meta: {
requireAuth: true
}
{path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前name: 'BlogAdd',meta: {requireAuth: true},component: BlogEdit},{path: '/blog/:blogid/edit',name: 'BlogEdit', component: BlogEdit,meta: {requireAuth: true}
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Demo from '@/views/Demo' import Login from '@/views/Login' import Blogs from '@/views/Blogs' import BlogEdit from '@/views/BlogEdit' import BlogDetail from '@/views/BlogDetail' Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:{name : "Blogs"}},{path: '/blogs',name: 'Blogs',component: Blogs},{path: '/Login',name: 'Login',component: Login},{path: '/blog/add',name: 'BlogEdit',component: BlogEdit,meta: {requireAuth: true}}, {path: '/Demo',name: 'Demo',component: Demo},{path: '/blog/:blogid',name: 'BlogDetail',component: BlogDetail} ,{path: '/blog/:blogid/edit',name: 'BlogEdit', component: BlogEdit,meta: {requireAuth: true}}]})
然后我们再main.js中import我们的permission.js
src/main.js
添加: import ‘./permission.js’ // 路由拦截
// 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.jsimport "./axios.js"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/>'})
第十章 其他
增加删除文章功能
前端src/views/BlogDetail.vue
<template><div><Header></Header><div class="blog"><h2>{{blog.title}}</h2><el-link icon="el-icon-edit" v-if="ownblog" class="linklist"><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">删除</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",components: {Header },data () {return {blog: {id: '',title: '',content: '',description: ''},ownblog: false}},methods: {delblog () {const blogId = this.$route.params.blogidconst _this = thisif (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 () {//获取动态路由的 blogidconst blogId = this.$route.params.blogidconst _this = thisif (blogId) {this.$axios.get("/blog/" + blogId).then(res => {const blog = res.data.data_this.blog.id = blog.id_this.blog.title = blog.title_this.blog.description = blog.description//MardownIt 渲染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>.blog {margin-top: 10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 100%;min-height: 700px;padding: 10px;}.linklist {margin: 5px;}</style>
后端
src/main/java/com/vuelog/controller/BlogController
//@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("文章删除失败");}}
package com.vueblog.controller;import cn.hutool.core.bean.BeanUtil;import cn.hutool.core.lang.Assert;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.metadata.IPage;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;import mon.lang.Result;import com.vueblog.entity.Blog;import com.vueblog.service.BlogService;import com.vueblog.util.ShiroUtil;import org.apache.shiro.authz.annotation.RequiresAuthentication;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.validation.annotation.Validated;import org.springframework.web.bind.annotation.*;import java.time.LocalDateTime;/*** <p>* 前端控制器* </p>** @author 深林中的书海* @since -02-05*/@RestControllerpublic class BlogController {@AutowiredBlogService 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);}//@PathVariable动态路由@GetMapping("/blog/{id}")public Result detail(@PathVariable Long id){Blog blog = blogService.getById(id);//判断是否为空 为空则断言异常Assert.notNull(blog,"该博客已被删除");return Result.succ(blog);}//@Validated校验//@RequestBody//添加删除 木有id则添加 有id则编辑@RequiresAuthentication //需要认证之后才能操作@PostMapping("/blog/edit")public Result edit(@Validated @RequestBody Blog blog){//一个空对象用于赋值Blog temp = null;//如果有id则是编辑if(blog.getId() != null){temp = blogService.getById(blog.getId());//将数据库的内容传递给temp//只能编辑自己的文章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);}//将blog的值赋给temp 忽略 id userid created status 引用于hutoolBeanUtil.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("文章删除失败");}}}