springboot + redis + 注解 + 拦截器 实现接口幂等性校验
一、概念
幂等是一个数学与计算机学概念,在数学中某一元运算为幂等时,其作用在任一元素两次后会和其作用一次的结果相同。在计算机中编程中,一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。
幂等函数或幂等方法是指可以使用相同参数重复执行,并能获得相同结果的函数。这些函数不会影响系统状态,也不用担心重复执行会对系统造成改变。
幂等性, 通俗的说就是一个接口, 多次发起同一个请求, 必须保证操作只能执行一次
比如:
- 前端重复提交表单: 在填写一些表格时候,用户填写完成提交,很多时候会因网络波动没有及时对用户做出提交成功响应,致使用户认为没有成功提交,然后一直点提交按钮,这时就会发生重复提交表单请求。
- 用户恶意进行刷单: 例如在实现用户投票这种功能时,如果用户针对一个用户进行重复提交投票,这样会导致接口接收到用户重复提交的投票信息,这样会使投票结果与事实严重不符。
- 接口超时重复提交: 很多时候 HTTP 客户端工具都默认开启超时重试的机制,尤其是第三方调用接口时候,为了防止网络波动超时等造成的请求失败,都会添加重试机制,导致一个请求提交多次。
- 消息进行重复消费: 当使用 MQ 消息中间件时候,如果发生消息中间件出现错误未及时提交消费信息,导致发生重复消费。
二、常见解决方案
- 唯一索引 -- 防止新增脏数据
- token机制 -- 防止页面重复提交
- 悲观锁 -- 获取数据的时候加锁(锁表或锁行)
- 乐观锁 -- 基于版本号version实现, 在更新数据那一刻校验数据
- 分布式锁 -- redis(jedis、redisson)或zookeeper实现
- 状态机 -- 状态变更, 更新数据时判断状态
三、本文实现
本文采用第2种方式实现, 即通过redis + token机制实现接口幂等性校验
四、实现思路
为需要保证幂等性的每一次请求创建一个唯一标识token, 先获取token, 并将此token存入redis, 请求接口时, 将此token放到header或者作为请求参数请求接口, 后端接口判断redis中是否存在此token:
- 如果存在, 正常处理业务逻辑, 并从redis中删除此
token, 那么, 如果是重复请求, 由于token已被删除, 则不能通过校验, 返回请勿重复操作提示 - 如果不存在, 说明参数不合法或者是重复请求, 返回提示即可
五、项目简介
- springboot
- redis
@ApiIdempotent注解 + 拦截器对请求进行拦截- @ControllerAdvice全局异常处理
- 压测工具: jmeter
六、代码实现
1、pom依赖加载
<!-- Redis-Jedis --><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version></dependency><!--lombok 本文用到@Slf4j注解, 也可不引用, 自定义log即可--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.16.10</version></dependency>
也可以用SpringData
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
spring:redis:ssl: falsehost: 127.0.0.1port: 6379database: 0timeout: 1000password:lettuce:pool:max-active: 100max-wait: -1min-idle: 0max-idle: 20
2、JedisUtil
package com.wangzaiplus.test.util;import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;@Component
@Slf4j
public class JedisUtil {@Autowiredprivate JedisPool jedisPool;private Jedis getJedis() {return jedisPool.getResource();}/*** 设值** @param key* @param value* @return*/public String set(String key, String value) {Jedis jedis = null;try {jedis = getJedis();return jedis.set(key, value);} catch (Exception e) {log.error("set key:{} value:{} error", key, value, e);return null;} finally {close(jedis);}}/*** 设值** @param key* @param value* @param expireTime 过期时间, 单位: s* @return*/public String set(String key, String value, int expireTime) {Jedis jedis = null;try {jedis = getJedis();return jedis.setex(key, expireTime, value);} catch (Exception e) {log.error("set key:{} value:{} expireTime:{} error", key, value, expireTime, e);return null;} finally {close(jedis);}}/*** 取值** @param key* @return*/public String get(String key) {Jedis jedis = null;try {jedis = getJedis();return jedis.get(key);} catch (Exception e) {log.error("get key:{} error", key, e);return null;} finally {close(jedis);}}/*** 删除key** @param key* @return*/public Long del(String key) {Jedis jedis = null;try {jedis = getJedis();return jedis.del(key.getBytes());} catch (Exception e) {log.error("del key:{} error", key, e);return null;} finally {close(jedis);}}/*** 判断key是否存在** @param key* @return*/public Boolean exists(String key) {Jedis jedis = null;try {jedis = getJedis();return jedis.exists(key.getBytes());} catch (Exception e) {log.error("exists key:{} error", key, e);return null;} finally {close(jedis);}}/*** 设值key过期时间** @param key* @param expireTime 过期时间, 单位: s* @return*/public Long expire(String key, int expireTime) {Jedis jedis = null;try {jedis = getJedis();return jedis.expire(key.getBytes(), expireTime);} catch (Exception e) {log.error("expire key:{} error", key, e);return null;} finally {close(jedis);}}/*** 获取剩余时间** @param key* @return*/public Long ttl(String key) {Jedis jedis = null;try {jedis = getJedis();return jedis.ttl(key);} catch (Exception e) {log.error("ttl key:{} error", key, e);return null;} finally {close(jedis);}}private void close(Jedis jedis) {if (null != jedis) {jedis.close();}}}
SpringData代码:
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Component;import java.util.concurrent.TimeUnit;/*** @description*/
@Component
public class RedisUtil {private static final Logger logger = LoggerFactory.getLogger(RedisUtil.class);@Autowiredprivate StringRedisTemplate stringRedisTemplate;/*** 设值* @param key* @param value* @return*/public void set(String key, String value) {logger.info("set key:{} value:{}", key, value);stringRedisTemplate.opsForValue().set(key,value);}/*** 设值* @param key* @param value* @param expireTime 过期时间, 单位: s* @return*/public void set(String key, String value, int expireTime) {logger.info("set key:{} value:{} expireTime:{}", key, value, expireTime);stringRedisTemplate.opsForValue().set(key,value, expireTime,TimeUnit.SECONDS);}/*** 取值* @param key* @return*/public String get(String key) {logger.info("get key:{}", key);return stringRedisTemplate.opsForValue().get(key);}/*** 删除key* @param key* @return*/public Boolean del(String key) {if (exists(key)) {return stringRedisTemplate.delete(key);} else {logger.error("del key:{}", key+" 不存在");return false;}}/*** 判断key是否存在* @param key* @return*/public Boolean exists(String key) {Boolean exists = stringRedisTemplate.hasKey(key);logger.info("exists key:{} hasKey:{}", key, exists);return exists;}
}
3、自定义注解@ApiIdempotent
package com.wangzaiplus.test.annotation;import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;/*** 在需要保证 接口幂等性 的Controller的方法上使用此注解*/
@Target({ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
public @interface ApiIdempotent {
}
4、ApiIdempotentInterceptor拦截器
package com.wangzaiplus.test.interceptor;import com.wangzaiplus.test.annotation.ApiIdempotent;
import com.wangzaiplus.test.service.TokenService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.lang.reflect.Method;/*** 接口幂等性拦截器*/
public class ApiIdempotentInterceptor implements HandlerInterceptor {@Autowiredprivate TokenService tokenService;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {if (!(handler instanceof HandlerMethod)) {return true;}HandlerMethod handlerMethod = (HandlerMethod) handler;Method method = handlerMethod.getMethod();ApiIdempotent methodAnnotation = method.getAnnotation(ApiIdempotent.class);if (methodAnnotation != null) {check(request);// 幂等性校验, 校验通过则放行, 校验失败则抛出异常, 并通过统一异常处理返回友好提示}return true;}private void check(HttpServletRequest request) {tokenService.checkToken(request);}@Overridepublic void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {}@Overridepublic void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {}
}
5、TokenServiceImpl
package com.wangzaiplus.test.service.impl;import com.wangzaiplus.test.common.Constant;
import com.wangzaiplus.test.common.ResponseCode;
import com.wangzaiplus.test.common.ServerResponse;
import com.wangzaiplus.test.exception.ServiceException;
import com.wangzaiplus.test.service.TokenService;
import com.wangzaiplus.test.util.JedisUtil;
import com.wangzaiplus.test.util.RandomUtil;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.text.StrBuilder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import javax.servlet.http.HttpServletRequest;@Service
public class TokenServiceImpl implements TokenService {private static final String TOKEN_NAME = "token";@Autowiredprivate JedisUtil jedisUtil;@Overridepublic ServerResponse createToken() {String str = RandomUtil.UUID32();StrBuilder token = new StrBuilder();token.append(Constant.Redis.TOKEN_PREFIX).append(str);jedisUtil.set(token.toString(), token.toString(), Constant.Redis.EXPIRE_TIME_MINUTE);return ServerResponse.success(token.toString());}@Overridepublic void checkToken(HttpServletRequest request) {String token = request.getHeader(TOKEN_NAME);if (StringUtils.isBlank(token)) {// header中不存在tokentoken = request.getParameter(TOKEN_NAME);if (StringUtils.isBlank(token)) {// parameter中也不存在tokenthrow new ServiceException(ResponseCode.ILLEGAL_ARGUMENT.getMsg());}}if (!jedisUtil.exists(token)) {throw new ServiceException(ResponseCode.REPETITIVE_OPERATION.getMsg());}Long del = jedisUtil.del(token);if (del <= 0) {throw new ServiceException(ResponseCode.REPETITIVE_OPERATION.getMsg());}}}
6、TestApplication
package com.wangzaiplus.test;import com.wangzaiplus.test.interceptor.ApiIdempotentInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@SpringBootApplication
@MapperScan("com.wangzaiplus.test.mapper")
public class TestApplication extends WebMvcConfigurerAdapter {public static void main(String[] args) {SpringApplication.run(TestApplication.class, args);}/*** 跨域* @return*/@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();final CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.setAllowCredentials(true);corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);return new CorsFilter(urlBasedCorsConfigurationSource);}@Overridepublic void addInterceptors(InterceptorRegistry registry) {// 接口幂等性拦截器registry.addInterceptor(apiIdempotentInterceptor());super.addInterceptors(registry);}@Beanpublic ApiIdempotentInterceptor apiIdempotentInterceptor() {return new ApiIdempotentInterceptor();}}
OK, 目前为止, 校验代码准备就绪, 接下来测试验证
七、测试验证
1、获取token的控制器TokenController
package com.wangzaiplus.test.controller;import com.wangzaiplus.test.common.ServerResponse;
import com.wangzaiplus.test.service.TokenService;
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;@RestController
@RequestMapping("/token")
public class TokenController {@Autowiredprivate TokenService tokenService;@GetMappingpublic ServerResponse token() {return tokenService.createToken();}}
2. TestController, 注意@ApiIdempotent注解, 在需要幂等性校验的方法上声明此注解即可, 不需要校验的无影响
package com.wangzaiplus.test.controller;import com.wangzaiplus.test.annotation.ApiIdempotent;
import com.wangzaiplus.test.common.ServerResponse;
import com.wangzaiplus.test.service.TestService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/test")
@Slf4j
public class TestController {@Autowiredprivate TestService testService;@ApiIdempotent@PostMapping("testIdempotence")public ServerResponse testIdempotence() {return testService.testIdempotence();}}
3. 获取token

查看redis

4. 测试接口安全性: 利用jmeter测试工具模拟50个并发请求, 将上一步获取到的token作为参数


5. header或参数均不传token, 或者token值为空, 或者token值乱填, 均无法通过校验, 如token值为"abcd"

八、注意点(非常重要)

上图中, 不能单纯的直接删除token而不校验是否删除成功, 会出现并发安全性问题, 因为, 有可能多个线程同时走到第46行, 此时token还未被删除, 所以继续往下执行, 如果不校验jedisUtil.del(token)的删除结果而直接放行, 那么还是会出现重复提交问题, 即使实际上只有一次真正的删除操作, 下面重现一下
稍微修改一下代码:

再次请求

再看看控制台

虽然只有一个真正删除掉token, 但由于没有对删除结果进行校验, 所以还是有并发问题, 因此, 必须校验
参考:https://www.jianshu.com/p/6189275403ed
相关文章:
springboot + redis + 注解 + 拦截器 实现接口幂等性校验
一、概念 幂等是一个数学与计算机学概念,在数学中某一元运算为幂等时,其作用在任一元素两次后会和其作用一次的结果相同。在计算机中编程中,一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。 幂等函数或幂等方法是…...
PLC编程:关键在于模拟操作流程和实现控制
PLC编程的核心是通过程序描述流程,完成控制过程。因此,掌握PLC编程语言和基本功能实现是必要的。 PLC语言主要分为梯形图、语句和功能图。梯形图适合基本逻辑描述,语句表用于数据处理,相对较难理解。步进式功能图的状态函数描述很…...
List的各种排序
目录 Collections.sort对list进行排序 对象中某个属性进行排序 通过比较器进行比较 JAVA8特性Stream流进行排序 Stream升降序组合使用 Collections.sort对list进行排序 public static void main(String[] args) {List<Integer> list new ArrayList<>();list…...
在自定义数据集上微调Alpaca和LLaMA
本文将介绍使用LoRa在本地机器上微调Alpaca和LLaMA,我们将介绍在特定数据集上对Alpaca LoRa进行微调的整个过程,本文将涵盖数据处理、模型训练和使用流行的自然语言处理库(如Transformers和hugs Face)进行评估。此外还将介绍如何使用grado应用程序部署和…...
Python 实现接口类的两种方式+邮件提醒+动态导入模块+反射(参考Django中间件源码)
实现抽象类的两种方式 方式一 from abc import ABCMeta from abc import abstractmethodclass BaseMessage(metaclassABCMeta):abstractmethoddef send(self,subject,body,to,name):pass 方式二 class BaseMessage(object):def send(self, subject, body, to, name):raise …...
Solr原理剖析
一、简介 Solr是一个高性能、基于Lucene的全文检索服务器。Solr对Lucene进行了扩展,提供了比Lucene更为丰富的查询语言,并实现了强大的全文检索功能、高亮显示、动态集群,具有高度的可扩展性。同时从Solr 4.0版本开始,支持SolrCl…...
解决 “无法将 ‘npm‘ 项识别为 cmdlet、函数、脚本文件或可运行程序的名称“ 错误的方法
系列文章目录 文章目录 系列文章目录前言一、错误原因:二、解决方法:三、注意事项:总结 前言 在使用 npm 进行前端项目开发时,有时会遇到错误信息 “无法将 ‘npm’ 项识别为 cmdlet、函数、脚本文件或可运行程序的名称”&#x…...
Python 电商API 开发最佳实践
一、简介 当你打卡了一家北京最具有地中海特色的餐厅,当我们在餐厅点餐时,服务员会给我们一份菜单,菜单上列出了所有可供选择的菜品和饮料。我们可以在菜单上选择我们想要的食物和饮料,然后告诉服务员我们的选择。服务员会根据我…...
JAVA基础-集合(List与Map)
目录 引言 一,Collection集合 1.1,List接口 1.1.1,ArrayList 1.1.1.1,ArrayList的add()添加方法 1.1.1.2,ArrayList的remove()删除方法 1.1.1.3,ArrayList的contai…...
19 QListWidget控件
Tips: 对于列表式数据可以使用QStringList进行左移一块输入。 代码: //listWidget使用 // QListWidgetItem * item new QListWidgetItem("锄禾日当午"); // QListWidgetItem * item2 new QListWidgetItem("汗滴禾下土"); // ui->…...
手动安装docsify
安装docsify详见:docsify 1、下载 wget https://codeload.github.com/docsifyjs/docsify/zip/refs/heads/master -o docsify-master.zip 2、解压 unzip docsify-master.zip 3、移动文件到nginx的html所在目录【略】 4、配置nginx,示例如下 locati…...
yaml语法详解
#kv #对空格的严格要求十分高 #注入到我们的配置类中 #普通的keyvalue name: qinjiang#对象 student:name: qingjiangage: 3#行内写法 student1: {name: qinjiang,age: 3}#数组 pets:- cat- dog- pigpet: [cat,dog,pig]yaml可以给实体类赋值 person:name: kuangshenage: 19happ…...
ubuntu下tmux安装
目录 0. 前言1. Tmux介绍2. 安装3. 验证安装 0. 前言 本节安装tmux终端复用工具,在Ubuntu中运行一些服务或脚本的时候往往不能退出终端,需要一直挂着。在有图形界面的linux中你还可以新开一个终端去做别的事,但是在无界面linux中,…...
ssh打开远程vscode
如果想要远程打开其他终端的vscode,首先要知道远程终端的ip地址和用户名称以及用户密码 1、打开本地vscode 2、点击左下角蓝色区域 3、页面上部出现如下图,点击ssh,我这里已经连接,所以是connect to host 4、选择Add New SSH Host…...
Socket发送数据---winsock库和boost库
一个是通过winsock库提供的api实现,一个是boost库实现,两个方法都可以,因为项目是vc++6.0实现的,不支持boost库,只能使用winsock库,vc++6.0太老,局限性大。 通过Winsock库提供的API 通过UDP #include<winsock2.h> #include<vector> #include<WS2tcpip.h…...
Qt Core学习日记——第七天QMetaObject(上)
每一个声明Q_OBJECT的类都具有QMetaObject对象 Q_OBJECT宏源代码: #define Q_OBJECT \ public: \ QT_WARNING_PUSH \ Q_OBJECT_NO_OVERRIDE_WARNING \ static const QMetaObject staticMetaObject; \ virtual const QMetaObject *metaObject() const; \ vir…...
100、用简洁的语言描述一下:TCP的三次握手和四次挥手(不需要长篇大论)
TCP的三次握手和四次挥手 TCP协议是7层网络协议中的传输层协议,负责数据的可靠传输。 1、三次握手 在建立TCP连接时,需要通过三次握手来建立,过程是: 客户端向服务端发送一个SYN服务端接收到SYN后,给客户端发送一个SYN_ACK客户…...
中南大学硕士论文latex版本全指导
要毕业了,闲下点时间写的东西。之前一直收益与师兄师姐流传下来的latex版本,用起来很舒服,希望后面的学弟学妹也能完美用上。latex功能很强大,不需要自己排版,只管内容即可,但是安装流程会多一丢丢。 目录 …...
RFC8470在HTTP中使用早期数据
摘要 使用TLS早期数据会暴露出重放攻击的可能性。本文定义了允许客户端与服务器就早期数据中发送的HTTP请求进行通信的机制。描述了使用这些机制来减轻重放风险的技术。 1. 介绍 TLS 1.3[TLS13]引入了早期数据(也称为零往返时间(0-RTT)数…...
macOS Big Sur 11.7.9 (20G1426) 正式版 ISO、PKG、DMG、IPSW 下载
macOS Big Sur 11.7.9 (20G1426) 正式版 ISO、PKG、DMG、IPSW 下载 本站下载的 macOS 软件包,既可以拖拽到 Applications(应用程序)下直接安装,也可以制作启动 U 盘安装,或者在虚拟机中启动安装。另外也支持在 Window…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构
React 实战项目:微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇!在前 29 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
Python常用模块:time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...
