在Spring Cloud中使用OpenFeign完成从一个微服务上传到另一个微服务中

跨服务上传文件，嘿嘿，来一篇实用性高的，本篇将主要完成在Feign中上传文件到另一个微服务中。步骤如下：

我们需要在服务提供者和服务消费者的项目中添加相应的依赖：

对于服务提供者的项目，你需要添加Spring Boot的Web依赖和Spring Cloud的Feign依赖。在pom.xml文件中添加以下依赖：

<dependencies><!-- Spring Boot Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Spring Cloud Feign --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency>
</dependencies>

对于服务消费者的项目，除了上述的依赖外，还需要添加Feign的文件上传支持依赖。在pom.xml文件中添加以下依赖：

<dependencies><!-- Spring Boot Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Spring Cloud Feign --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><!-- Feign 文件上传支持 --><dependency><groupId>io.github.openfeign.form</groupId><artifactId>feign-form</artifactId><version>3.8.0</version></dependency>
</dependencies>

注意，Feign的文件上传支持依赖是feign-form，需要指定相应的版本号。

正式开始

在服务提供者的微服务中，创建一个接收文件上传的接口。可以使用@RequestParam(“file”) MultipartFile file来接收文件参数。

@PostMapping("/upload")
void uploadFile(@RequestParam("file") MultipartFile file);

在服务消费者的微服务中，创建一个Feign接口，并使用@FeignClient注解标记它。在接口中定义上传文件的方法，使用@PostMapping注解，并指定上传文件的路径。

@FeignClient(name = "file-service")
public interface FileServiceClient {@PostMapping("/upload")void uploadFile(@RequestParam("file") MultipartFile file);
}

在服务消费者的微服务中，配置Feign的文件上传支持。在配置类中添加@Configuration注解，并创建一个FeignClientConfig类，使用@Bean注解配置Encoder和Decoder。

@Configuration
public class FeignClientConfig {@Beanpublic Encoder feignFormEncoder() {return new SpringFormEncoder();}@Beanpublic Decoder feignDecoder() {return new ResponseEntityDecoder(new SpringDecoder(feignHttpMessageConverter()));}private ObjectFactory<HttpMessageConverters> feignHttpMessageConverter() {final HttpMessageConverters httpMessageConverters = new HttpMessageConverters(new FormHttpMessageConverter());return () -> httpMessageConverters;}
}

在服务消费者的微服务中，使用@EnableFeignClients注解启用Feign客户端，并在需要上传文件的地方注入FileServiceClient接口，调用uploadFile方法即可完成文件上传。

@SpringBootApplication
@EnableFeignClients
public class ConsumerApplication {@Autowiredprivate FileServiceClient fileServiceClient;public static void main(String[] args) {SpringApplication.run(ConsumerApplication.class, args);}public void uploadFile(MultipartFile file) {fileServiceClient.uploadFile(file);}
}

这样，通过Feign客户端调用uploadFile方法时，会将文件作为参数上传到服务提供者的微服务中。注意，需要确保服务提供者和服务消费者的微服务都引入了相应的依赖，并且配置正确。

在以上代码中，我们已经定义了Feign客户端接口FileServiceClient，并在服务消费者的代码中注入了该接口。现在，我们只需要在服务消费者的代码中调用FileServiceClient的uploadFile方法，即可完成文件上传。

假设我们要上传的文件是一个MultipartFile对象，可以按照以下方式完成文件上传：

@Autowired
private FileServiceClient fileServiceClient;public void uploadFile(MultipartFile file) {fileServiceClient.uploadFile(file);
}

在调用uploadFile方法时，Feign会将MultipartFile对象转换为multipart/form-data格式，并将其作为请求体发送到服务提供者的微服务中。服务提供者的微服务会接收到文件，并进行相应的处理。

需要注意的是，Feign默认使用的是application/json格式进行请求和响应的序列化和反序列化。如果要使用multipart/form-data格式进行文件上传，需要在服务消费者的代码中配置Feign的文件上传支持。

前端界面：

在网页中实现文件上传，可以使用HTML的<form>元素和<input type="file">元素来创建一个文件上传表单。然后，通过JavaScript和AJAX将文件发送到服务端。

<!DOCTYPE html>
<html>
<head><title>文件上传</title>
</head>
<body><h1>文件上传</h1><form id="uploadForm" enctype="multipart/form-data"><input type="file" name="file" id="fileInput"><button type="submit">上传</button></form><div id="message"></div><script>document.getElementById("uploadForm").addEventListener("submit", function(event) {event.preventDefault(); // 阻止表单默认提交行为var fileInput = document.getElementById("fileInput");var file = fileInput.files[0]; // 获取选择的文件var formData = new FormData();formData.append("file", file); // 将文件添加到FormData对象中var xhr = new XMLHttpRequest();xhr.open("POST", "/upload"); // 设置请求方法和URLxhr.onload = function() {if (xhr.status === 200) {document.getElementById("message").textContent = "文件上传成功！";} else {document.getElementById("message").textContent = "文件上传失败！";}};xhr.send(formData); // 发送请求});</script>
</body>
</html>

要通过localhost:端口号直接访问HTML页面，需要在Spring Boot应用程序中添加一个控制器，将HTML页面映射到一个URL路径上。

我的HTML页面名为upload.html，并且位于src/main/resources/static目录下。

@Controller
public class UploadController {@GetMapping("/")public String index() {return "upload.html";}
}

在上述代码中，我们创建了一个名为UploadController的控制器，并使用@GetMapping注解将/路径映射到upload.html页面。当用户访问localhost:端口号时，将自动跳转到upload.html页面。

需要注意的是，为了使Spring Boot能够正确地处理静态资源，你需要在application.properties文件中添加以下配置：

spring.mvc.static-path-pattern=/static/**

这将告诉Spring Boot将所有以/static/开头的URL路径映射到src/main/resources/static目录下的静态资源。因此，你需要将upload.html文件放置在src/main/resources/static目录下。

至此，文件上传的大概框架就搭建好了，可以去练练手了。

案例

本案例是博主在以上代码上进行的，并添加了一个单元测试上传txt文件，干货满满，请细细品鉴，光是利用上边的代码，然后汇总，期间碰到了许多错误，才成功搭建成功本案例。

首先来看看博主的项目案例目录结构：
在这里插入图片描述
在feign模块中搭建两个字模块，一个作为服务模块一个作为消费者模块

eureka-feign-upload-server

来瞅瞅我的pom文件吧

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>feign</artifactId><groupId>com.miaow</groupId><version>0.0.1-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>eureka-feign-upload-server</artifactId><name>eureka-feign-upload-server</name><!-- FIXME change it to the project's website --><url>http://www.example.com</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>
<!--spring-cloud-starter-netflix-eureka-client：这是Eureka客户端的另一个依赖库，用于将应用程序注册到Eureka服务器并从服务器中发现其他服务。它与spring-cloud-starter-eureka功能相似，但是它是基于Netflix Ribbon的，可以提供更多的负载均衡策略和配置选项。通过添加该依赖库，你可以在应用程序中实现Eureka客户端功能，并使用Netflix Ribbon进行负载均衡。--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependency><!--spring-cloud-starter-eureka是Eureka客户端的依赖库，用于将服务注册到Eureka服务器并从Eureka服务器发现其他服务。它包含了Eureka客户端的核心功能，如服务注册、服务发现、负载均衡等。--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka</artifactId><version>1.4.2.RELEASE</version></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>Hoxton.SR8</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

配置好pom文件，引入相关依赖之后，我们在Application.yml文件中配置我们的相关属性：

server:port: 3401spring:application:name: eureka-feign-upload-server# eureka客户端注册到Eureka注册中心，切记需要启动eureka服务
eureka:client:service-url:defaultZone: http://localhost:1000/eureka#ribbon:
#  eureka:
#    enabled: true

在这里插入图片描述
之后创建一个FileController类

@RestController
public class FileController {@PostMapping("/upload")public String uploadFile(@RequestParam("file") MultipartFile file) {return "文件上传成功";}
}

启动类：

@EnableDiscoveryClient
@EnableFeignClients
@SpringBootApplication
public class EurekaUploadServerApplication {public static void main(String[] args) {SpringApplication.run(EurekaUploadServerApplication.class);}
}

PS:实际上这里没啥好讲的，按照我的配置方式进行，把它当做服务器就行了。

eureka-feign-upload-client

声明：这个模块看起来简单，但是配置稍有问题就会出现错误，或者服务器找不到，以下是博主使用的，并成功实现的，可以参照一下，但还是推荐你自己玩，碰到不会的可以与我对一下，我在写本篇博文最先时候的时候就是，对照demo来的，一个一个调试，最后成功(鬼知道我踩了多少坑)。

在这里插入图片描述
目录结构如上：

pom.xml文件配置：
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>feign</artifactId><groupId>com.miaow</groupId><version>0.0.1-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>eureka-feign-upload-client</artifactId><name>eureka-feign-upload-client</name><!-- FIXME change it to the project's website --><url>http://www.example.com</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka</artifactId><version>1.4.2.RELEASE</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><dependency><groupId>io.github.openfeign.form</groupId><artifactId>feign-form</artifactId><version>3.8.0</version></dependency><dependency><groupId>io.github.openfeign.form</groupId><artifactId>feign-form-spring</artifactId><version>3.8.0</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>test</scope></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>Hoxton.SR8</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
application.yml文件配置
server:port: 3402spring:application:name: eureka-feign-upload-clientmvc:static-path-pattern: /static/**# 文件上传限制大小servlet:multipart:enabled: truemax-file-size: 10MBmax-request-size: 10MB# eureka客户端注册到Eureka注册中心，切记需要启动eureka服务
eureka:client:service-url:defaultZone: http://localhost:1000/eureka

只要upload.html文件，在本文的上边，我只改了一个请求位置：
在这里插入图片描述
在这里插入图片描述

FileServiceClient
//@FeignClient注解来指定服务提供者的名称  configuration属性指定了一个内部静态类MultipartSupportConfig，用于配置Feign的编码器。
@FeignClient(value = "eureka-feign-upload-server",configuration = FileServiceClient.MultipartSupportConfig.class)
public interface FileServiceClient {//SpringFormEncoder是Feign提供的一个编码器，用于处理multipart/form-data类型的请求。@PostMapping(value = "/upload",consumes = MediaType.MULTIPART_FORM_DATA)String uploadFile(@RequestPart( value = "file") MultipartFile file);@Configuration  //代表这个是一个配置类，告诉Springclass MultipartSupportConfig{@Beanpublic Encoder feignFromEncoder(){//返回一个Feign的编码器return new SpringFormEncoder();}}
}
FeignClientConfig配置类
@Configuration
public class FeignClientConfig {@Beanpublic Encoder feignFormEncoder() {return new SpringFormEncoder();}@Beanpublic Decoder feignDecoder() {return new ResponseEntityDecoder(new SpringDecoder(feignHttpMessageConverter()));}private ObjectFactory<HttpMessageConverters> feignHttpMessageConverter() {final HttpMessageConverters httpMessageConverters = new HttpMessageConverters(new FormHttpMessageConverter());return () -> httpMessageConverters;}
}
UploadController 控制类
@RestController
@RequestMapping("/api")
public class UploadController {@Autowiredprivate FileServiceClient fileServiceClient;@GetMapping("/")public String index() {return "upload.html";}@RequestMapping("/upload")public void uploadFile(@RequestPart( value = "file") MultipartFile file) {fileServiceClient.uploadFile(file);}
}
启动类
@SpringBootApplication
@EnableDiscoveryClient
@EnableFeignClients
public class EurekaUploadClientApplication {public static void main(String[] args) {SpringApplication.run(EurekaUploadClientApplication.class);}
}
单元测试类：

注意单元测试的时候，需要一个upload.txt文件，你自己创建
在这里插入图片描述

@Slf4j
@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest
public class UploadTest {@AutowiredFileServiceClient fileServiceClient;@Testpublic void testUpload(){File file = new File("upload.txt");DiskFileItem fileItem = (DiskFileItem) new DiskFileItemFactory().createItem("file",MediaType.TEXT_PLAIN_VALUE,true,file.getName());try (InputStream input = new FileInputStream(file); OutputStream os = fileItem.getOutputStream()) {IOUtils.copy(input, os);} catch (Exception e) {throw new IllegalArgumentException("Invalid file: " + e, e);}MultipartFile multipartFile = new CommonsMultipartFile(fileItem);log.info(fileServiceClient.uploadFile(multipartFile));}
}

单元测试日志：

2023-12-15 15:03:24.077  INFO 12148 --- [           main] c.n.l.DynamicServerListLoadBalancer      : DynamicServerListLoadBalancer for client eureka-feign-upload-server initialized: DynamicServerListLoadBalancer:{NFLoadBalancer:name=eureka-feign-upload-server,current list of Servers=[localhost:3401],Load balancer stats=Zone stats: {defaultzone=[Zone:defaultzone;	Instance count:1;	Active connections count: 0;	Circuit breaker tripped count: 0;	Active connections per server: 0.0;]
},Server stats: [[Server:localhost:3401;	Zone:defaultZone;	Total Requests:0;	Successive connection failure:0;	Total blackout seconds:0;	Last connection made:Thu Jan 01 08:00:00 CST 1970;	First connection made: Thu Jan 01 08:00:00 CST 1970;	Active Connections:0;	total failure count in last (1000) msecs:0;	average resp time:0.0;	90 percentile resp time:0.0;	95 percentile resp time:0.0;	min resp time:0.0;	max resp time:0.0;	stddev resp time:0.0]
]}ServerList:org.springframework.cloud.netflix.ribbon.eureka.DomainExtractingServerList@4374c051
2023-12-15 15:03:24.168  INFO 12148 --- [           main] com.miaow.UploadTest                     : 文件上传成功
2023-12-15 15:03:24.180  INFO 12148 --- [       Thread-8] c.n.l.PollingServerListUpdater           : Shutting down the Executor Pool for PollingServerListUpdater
2023-12-15 15:03:24.181  INFO 12148 --- [extShutdownHook] o.s.c.n.e.s.EurekaServiceRegistry        : Unregistering application EUREKA-FEIGN-UPLOAD-CLIENT with eureka with status DOWN
2023-12-15 15:03:24.182  WARN 12148 --- [extShutdownHook] com.netflix.discovery.DiscoveryClient    : Saw local status change event StatusChangeEvent [timestamp=1702623804182, current=DOWN, previous=UP]
2023-12-15 15:03:24.182  INFO 12148 --- [nfoReplicator-0] com.netflix.discovery.DiscoveryClient    : DiscoveryClient_EUREKA-FEIGN-UPLOAD-CLIENT/localhost:eureka-feign-upload-client:3402: registering service...
2023-12-15 15:03:24.185  INFO 12148 --- [extShutdownHook] o.s.s.concurrent.ThreadPoolTaskExecutor  : Shutting down ExecutorService 'applicationTaskExecutor'
2023-12-15 15:03:24.188  INFO 12148 --- [extShutdownHook] c.n.u.concurrent.ShutdownEnabledTimer    : Shutdown hook removed for: NFLoadBalancer-PingTimer-eureka-feign-upload-server
2023-12-15 15:03:24.194  INFO 12148 --- [extShutdownHook] c.n.u.concurrent.ShutdownEnabledTimer    : Exception caught (might be ok if at shutdown)

单元测试成功了，那么我们去网页上看看吧：http://localhost:3402/static/upload.html
在这里插入图片描述
在这里插入图片描述
ok至此，我们完成这个功能了。算是把坑填完了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/227614.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis设计与实现之集合及有序集

Redis设计与实现之集合及有序集

目录 一、集合 1、编码的选择 2、编码的切换 3、 字典编码的集合 4、集合命令的实现 5、 求交集算法 6、求并集算法 7、 求差集算法 二、有序集 1、编码的选择 2、编码的转换 3、ZIPLIST 编码的有序集 4、SKIPLIST 编码的有序集 三、如何添加元素到集合或有序集中…
阅读更多...
万兆网络之屏蔽线序接法（中）

万兆网络之屏蔽线序接法（中）

在介绍优质网线选购之前&#xff0c;先简单介绍一下水晶头 1毛钱一颗跟1元一颗的水晶头&#xff0c;往往是金手指厚度差别&#xff0c;你可以想象压制的时候可能会有什么情况 另外&#xff0c;一些3元一颗的镀金水晶头会有15U、30U之类的是电镀厚度单位&#xff0c;数值越大镀…
阅读更多...
文档安全加固：零容忍盗窃，如何有效预防重要信息外泄

文档安全加固：零容忍盗窃，如何有效预防重要信息外泄

文档安全保护不仅需要从源头着手&#xff0c;杜绝文档在使用和传播过程中产生的泄密风险&#xff0c;同时还需要对文档内容本身进行有效的保护。为了防范通过拷贝、截屏、拍照等手段盗窃重要文档内容信息的风险&#xff0c;迅软DSE加密软件提供了文档加密保护功能&#xff0c;能…
阅读更多...
10 新字符设备驱动文件

10 新字符设备驱动文件

一、新字符设备驱动原理 因为 register_chrdev 和 unregister_chrdev 两个函数是老版本驱动文件&#xff0c;现在可以用新字符设备驱动 API 函数。 1. 分配和和释放设备号 使用 register_chrdev 函数注册字符设备的时候只需要给定一个主设备号即可&#xff0c;但是这样会带来两…
阅读更多...
信息安全和网络安全的区别

信息安全和网络安全的区别

信息安全与网络安全都属于安全领域&#xff0c;但它们的范围和重点不同。 信息安全主要关注数据的保护&#xff0c;包括对敏感数据进行加密、防止数据丢失或泄露等措施。信息安全通常与数据存储、传输和处理相关。 而网络安全更侧重于保护计算机系统和网络免受攻击、病毒、蠕…
阅读更多...
Mac安装软件显示文件已损坏处理方法

Mac安装软件显示文件已损坏处理方法

今天安装软件&#xff0c;突然遇到了文件已损坏&#xff0c;扔到废纸篓的情况&#xff0c;于是搜索了下解决办法&#xff0c;跟大家分享下&#xff0c;希望对你有所帮助 一、检查安全性设置 打开【设置】-【隐私与安全】&#xff0c;下拉找到安全性&#xff0c;将安全性更改为…
阅读更多...
System作为系统进程陔如何关闭？

System作为系统进程陔如何关闭？

一、简介 system进程是不可以关闭的&#xff0c;它是用来运行一些系统命令的&#xff0c;比如reboot、shutdown等&#xff0c;以及用来运行一些后台程序&#xff0c;比如ntfs-3g、v4l2loopback等。system进程也被用于运行一些内核模块&#xff0c;比如nvidia、atd等。system进程…
阅读更多...
mars3d加载arcgis发布的服务，⽀持4523坐标

mars3d加载arcgis发布的服务，⽀持4523坐标

问题 1.从这个服务地址加载&#xff0c;具体在哪⾥去转坐标呢&#xff1f; 加个 usePreCachedTilesIfAvailable&#xff1a;false 参数即可 坐标系为4490的arcgis影像服务图层&#xff0c;配置后瓦片加载不出来&#xff0c;没报错 甚至可以跳转 没有看出问题&#xff0c;或者测…
阅读更多...
linux系统启动时运行web程序

linux系统启动时运行web程序

1.修改rc.local文件 执行命令如果找不到会报错command not found &#xff0c;使用全路径即可 找不到的话 可以使用which 命令 找到路径 后台查看执行日志 2.修改rc.local文件的权限 chmod x rc.local 然后reboot 可以查到进程和启动日志
阅读更多...
vue3：直接修改reative的值，页面却不响应，这是什么情况？

vue3：直接修改reative的值，页面却不响应，这是什么情况？

目录 前言&#xff1a; 错误示范&#xff1a; reactive() 的局限性 解决办法&#xff1a; 1.使用ref 2.reative多套一层 3.使用Object.assign 前言&#xff1a; 今天看到有人在提问&#xff0c;问题是这样的&#xff0c;我修改了reative的值&#xff0c;数据居然失去了响…
阅读更多...
YOLOv5改进 | 注意力篇 | DAttention (DAT)注意力机制实现极限涨点

YOLOv5改进 | 注意力篇 | DAttention (DAT)注意力机制实现极限涨点

一、本文介绍 本文给大家带来的是YOLOv5改进DAT(Vision Transformer with Deformable Attention)的教程&#xff0c;其发布于2022年CVPR2022上同时被评选为Best Paper&#xff0c;由此可以证明其是一种十分有效的改进机制&#xff0c;其主要的核心思想是&#xff1a;引入可变形…
阅读更多...
微信小程序置顶导航，替代原生导航栏

微信小程序置顶导航，替代原生导航栏

效果图&#xff1a; 思路&#xff1a;Navigation是小程序的顶部导航组件&#xff0c;当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏&#xff0c;wx.getSystemInfoSync获取可使用窗口高度 wxml代码&#xff1a; <!-- 头部 --> <view cla…
阅读更多...
【docker】部署minio对象存储并用rclone同步

【docker】部署minio对象存储并用rclone同步

docker部署minio对象存储并用rclone同步 本文首发于 ❄️慕雪的寒舍 1.什么是minio&#xff1f; minio是一个开源的对象存储服务器&#xff0c;兼容S3协议。 官网&#xff1a;https://min.io/ 官方在开源的基础上也提供云端S3服务&#xff0c;分为个人和企业&#xff0c;有不…
阅读更多...
【MySQL】图形化界面工具 DataGrip

【MySQL】图形化界面工具 DataGrip

使用 dataGrip: 1.添加数据源 2.连接本地数据库 user 是 root 密码是 123456 3.展示所有数据库 4.创建数据库 5.创建表 6.修改表 在需要修改的表上&#xff0c;右键选择 "Modify Table..." 如果想增加字段&#xff0c;直接点击号&#xff0c;录入字段信息&#x…
阅读更多...
前端面试（5）

前端面试（5）

1、移动端适配 1.1、设置meta缩放比例&#xff0c;将设备窗口调整为设计图大小。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-sc…
阅读更多...
MetaAI发布Seamless：两秒内实现跨语言同声传译

MetaAI发布Seamless：两秒内实现跨语言同声传译

在当今日益互联的世界中&#xff0c;语言差异常常成为沟通的障碍。MetaAI最新发布的语音翻译大模型Seamless&#xff0c;正是为打破这一障碍而生。Seamless不仅提供流畅、高效的多语言翻译功能&#xff0c;更在保留说话人韵律和风格方面取得突破&#xff0c;是AI同声传译领域的…
阅读更多...
MX6ULL学习笔记（十三）Linux 自带按键驱动程序

MX6ULL学习笔记（十三）Linux 自带按键驱动程序

一、Linux 内核自带按键驱动使能。 Linux 内核也自带了 KEY 驱动&#xff0c;如果要使用内核自带的 KEY 驱动的话需要配置 Linux 内核&#xff0c;不过 Linux 内核一般默认已经使能了 KEY 驱动&#xff0c;但是我们还是要检查一下。 使用如下命令打开 Linux 配置菜单&#xff…
阅读更多...
docker入门小结

docker入门小结

docker是什么&#xff1f;它有什么优势&#xff1f; 快速获取开箱即用的程序 docker使得所有的应用传输就像我们日常通过聊天工具文件传输一样&#xff0c;发送方将程序传输到超级码头而接收方也只需通过超级码头进行获取即可&#xff0c;就像一只鲸鱼拖着货物来回运输一样。…
阅读更多...
前端API请求缓存的5种方案

前端API请求缓存的5种方案

文章目录 一、前言二、[方案一]数据缓存三、[方案二]单promise 缓存四、[方案三]多promise 缓存五、[方案四]添加时间有关的缓存六、[方案五]基于修饰器的方案四七、最后 一、前言 开发 web 应用程序时&#xff0c;性能都是必不可少的话题。 对于webpack打包的单页面应用程序…
阅读更多...
win中查看MD5、Linux中查看MD5

win中查看MD5、Linux中查看MD5

win中的MD5计算 1、用GitBash Git Bash Here md5sum.exe 我记得-孙燕姿.mp32、win自带命令 certutil -hashfile 我记得-孙燕姿.mp3 MD5Linux中MD5计算 md5sum 我记得-孙燕姿.mp3
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023