springboot+vue+elementUI前后端分离项目练习—小试牛刀

【SpringBoot+Vue】002-Vue整合饿了么UI 运行项目,可以看到About页面多了一个按钮,点击按钮弹出提示信息,与ElementUI文档上展示的效果一致。在AboutView.vue页面加入可以提示消息的el-button。至此,Vue项目已经可以使用ElementUI进行开发!依赖会被添加至package.json中。在main.js文件中加入下面语句。1. ElementUI官方文档。3. 引入elementUI。 阅读详情

确定技术栈

后端技术栈:

  • springboot
  • mybatis plus
  • shiro
  • lombok
  • redis
  • hibernate validatior(springboot内置)
  • jwt

后端开发步骤:

1、建好数据库
2、springboot整合mybatis plus(整合之后别忘了先测试一下)
3、前后端统一结果封装

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

  • 是否成功,可用code表示(如200表示成功,400表示异常)
  • 结果消息
  • 结果数据
package com.ryan.common.lang;

import lombok.Data;
import org.springframework.stereotype.Component;

import java.io.Serializable;

@Data
public class Result implements Serializable {
   
   
    //状态码,200一般表示正常,非200表示异常
    private int code;
    //信息
    private String msg;
    //数据
    private Object data;

    //操作成功的结果封装
    //对于前端来说,操作成功一般都是200,他们一般比较注重我data,所以我们需要进一步封装
    public static Result success(Object data){
   
   
        return success(200,"操作成功",data);
    }

    //方法封装,方便别处调用
    public static Result success(int code,String msg,Object data){
   
   
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }

    //往往操作失败之后,没有什么数据返回的,看中的是msg,所以我们可以再进一层封装
    public static Result fail(String msg){
   
   
        return success(400, msg,null);
    }

    //操作失败的状态码一般是400,msg一般是错误原因什么的,所以这里最好也加上
    public static Result fail(String msg, Object data){
   
   
        return success(400,msg,data);
    }

    //操作失败的结果封装
    public static Result fail(int code,String msg,Object data){
   
   
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }


}
4、shiro整合jwt逻辑分析
  • 登陆逻辑
    在这里插入图片描述
  • 访问资源(接口)时的shiro&jwt逻辑
    在这里插入图片描述
shiro代码编写

考虑到后面可能需要做集群、负载均衡等,所以就需要会话共享,而shiro的缓存和会话信息,我们一般考虑使用redis来存储这些数据,所以,我们不仅仅需要整合shiro,同时也需要整合redis。在开源的项目中,我们找到了一个starter可以快速整合shiro-redis,配置简单,这里也推荐大家使用。

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

第一步:导入shiro-redis的starter包:还有jwt的工具包,以及为了简化开发,我引入了hutool工具包。

<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>

第二部:配置shiro

package com.ryan.config;

import com.ryan.shiro.AccountRealm;
import com.ryan.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.security.interceptor.AuthorizationAttributeSourceAdvisor;
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.aop.framework.autoproxy.DefaultAdvisorAutoProxyCreator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.servlet.Filter;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;

/**
 * shiro启用注解拦截控制器
 */
@Configuration
public class ShiroConfig {
   
   
    @Autowired
    JwtFilter jwtFilter;
    @Bean
    public SessionManager sessionManager(RedisSessionDAO redisSessionDAO) {
   
   
        DefaultWebSessionManager sessionManager = new DefaultWebSessionManager();
        sessionManager.setSessionDAO(redisSessionDAO);
        return sessionManager;
    }
    @Bean
    public 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;
    }
    //shiro过滤器链的定义
    @Bean
    public ShiroFilterChainDefinition shiroFilterChainDefinition() {
   
   
        DefaultShiroFilterChainDefinition chainDefinition = new DefaultShiroFilterChainDefinition();
        Map<String, String> filterMap = new LinkedHashMap<>();
        //所有的链接都会经过我们jwt
        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;
    }

    // 开启注解代理(默认好像已经开启,可以不要)
    @Bean
    public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager){
   
   
        AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = new AuthorizationAttributeSourceAdvisor();
        authorizationAttributeSourceAdvisor.setSecurityManager(securityManager);
        return authorizationAttributeSourceAdvisor;
    }
    @Bean
    public static DefaultAdvisorAutoProxyCreator getDefaultAdvisorAutoProxyCreator() {
   
   
        DefaultAdvisorAutoProxyCreator creator = new DefaultAdvisorAutoProxyCreator();
        return creator;
    }
}

第三步:导入jwt工具类

package com.ryan.utils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.util.Date;

/**
 * jwt工具类
 */
@Slf4j
@Data
@Component
@ConfigurationProperties(prefix = "ryan.jwt")
public class JwtUtils {
   
   

    private String secret;
    private long expire;
    private String header;

    /**
     * 生成jwt token
     */
    public String generateToken
基于SpringBoot+Vue的前后端分离练习项目 这是一款基于SpringBoot+Vue的前后端分离的项目,麻雀虽小,五脏俱全,值得拥有! 阅读详情

相关推荐

SpringBoot+vue练手项目---博客系统

SpringBoot+vue练手项目之博客系统,适合新手拿来练项目

du_ai_me的博客 1192

Sentinel--哨兵系列数据下载地址及流程更新【202310】

哨兵系列数据下载地址及流程更新。哨兵系列卫星作为哥白尼计划的一部分,主要目标便是对地球的观测任务。哥白尼计划由三部分组成:空间部分(哨兵系列太空任务与其他太空机构任务)、测量部分(提供海洋、大陆表面和大气信息的陆基和机载数据收集网络)、数据管理与全球共享。

twg666的博客 3万+

【调试记录】GT ip跑aurora 64b66b协议

如果不用,会出现这种情况:自回环测试,数据收发ok.一旦和对方通信,对方接收的就是一堆乱码,因为GT链路发送数据不能是全1或全0,或者长时间的1或0.否则线路容易受到干扰,毕竟线速率10多G,用了加扰和解扰,就可以提高抗干扰能力。64B66B编码,数据输入是64bit,输出是66bit,所以这之间存在着2bit的带宽差,Gearbox 就是用来解决这种差异的,实现方式是:将66bit数据拿出来2bit先存入Gearbox,然后输出64bit.发送同步码或控制数据时,配置成2.2.4 加扰和解扰!

weixin_41246509的博客 1603

PaddleOCR转ONNX模型实战:5分钟搞定中文OCR推理部署(附完整代码)

本文详细介绍了将PaddleOCR模型转换为ONNX格式并进行高效推理部署的完整实战方案。通过Paddle2ONNX工具实现模型转换,利用ONNX Runtime构建跨平台推理引擎,涵盖环境配置、模型优化、批量处理及多平台部署等关键步骤,显著提升中文OCR在边缘设备上的推理性能。

weixin_29051811的博客 617

SpringBoot Actuator未授权访问漏洞实战:从发现到利用

本文深入剖析了SpringBoot Actuator未授权访问漏洞的成因、危害与利用手法。文章详细演示了如何发现暴露的端点,并通过实战案例复现了从敏感信息泄露到利用反序列化漏洞实现远程代码执行(RCE)的全过程,为开发与运维人员提供了从漏洞发现到修复加固的完整安全指南。

weixin_29231221的博客 260

第十七章:载板成本结构分析

本文分析了ABF和BT载板的成本结构,其中ABF载板材料成本占比50%(主要来自ABF薄膜),制造成本35%,利润15%;BT载板材料成本45%,制造成本40%。ABF薄膜价格预计将从2023年的80-90美元/panel上涨至2026年的120-150美元。良率每提升1%可降低成本约5%,产能利用率每提高10%可降本3-5%。通过设计优化(如减少层数)、工艺改进(提升良率)和供应链优化(材料国产化)可有效降低成本。预计2024-2028年AI用ABF载板成本将上涨10-15%,而手机用BT载板涨幅约5%。

Open 317

YOLOv8中的可变形卷积改进 | 从DCNv1到DCNv3的多位置替换可变形卷积保姆级实操

可变形卷积(Deformable Convolution)最早由Dai等人在2017年提出,其核心思想是在标准卷积操作的基础上,引入可学习的偏移量(offsets),使卷积核能够自适应调整其采样位置,从而增强模型对目标变形的感知能力。return x本文通过深入探讨可变形卷积在YOLOv8中的应用,详细介绍了DCNv1、DCNv2和DCNv3的原理和实现,并通过实验验证了其在目标检测任务中的有效性。未来,我们将继续探索更多优化策略和技术,提升YOLOv8模型的性能,以应对更复杂的目标检测任务。

一键难忘的博客 4051

【图像去噪】基于梯度为0法实现图像去噪附matlab代码

近几年,徐立提出的 L0 梯度最小化模型在图像平滑领域得到了广泛的应用和发展[11]. 和以往的局部滤波模型不同的是该模型可以全局的估计图像的像素值,因此,L0 梯度最小化模型在处理图像的同时能够很好的保护图像的边缘.​。

qq_59747472的博客 186

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

上一篇: 自学java之MybatisPlus,再也不用写sql了
下一篇: 关于安装redis6.05出现的问题
codebeef
博客等级 码龄7年 8粉丝 20原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值