当前位置: 首页 > news >正文

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面:
还要实习,每次时间好少呀,进度会比较慢一点
本文主要实现是用户管理相关功能。
前文项目建立

文章目录

  • 验证码功能
    • 验证码配置
    • 验证码生成工具类
    • 添加依赖
    • 功能测试
    • 编写controller接口
    • 启动项目
  • security配置
    • 拦截器配置
      • 验证码拦截器
    • jwt拦截器
    • 思考
  • 用户登录
    • jwt管理
    • 验证
  • 用户注销

验证码功能

验证码采用的是hutool工具的验证码
hutool官方地址

工具模板采用有来开源组织

验证码配置

yml配置

CaptchaConfig:#  验证码缓存过期时间(单位:秒)ttl: 120l# 验证码内容长度length: 4# 验证码宽度width: 120# 验证码高度height: 40# 验证码字体font-name: Verdana# 验证码字体大小fontSize: 20

配置类

/*** EasyCaptcha 配置类* * @author haoxr* @since 2023/03/24*/
@ConfigurationProperties(prefix = "easy-captcha")
@Configuration
@Data
public class CaptchaConfig {// 验证码类型private CaptchaTypeEnum type = CaptchaTypeEnum.ARITHMETIC;// 验证码缓存过期时间(单位:秒)@Value("${captcha.ttl}")private long ttl;// 内容长度@Value("${captcha.length}")private int length;// 宽度@Value("${captcha.width}")private int width;// 验证码高度@Value("${captcha.height}")private int height;// 验证码字体@Value("${captcha.font-name}")private String fontName;// 字体风格private Integer fontStyle = Font.PLAIN;// 字体大小@Value("${captcha.font-size}")private int fontSize;}

验证码生成工具类

@Component
@RequiredArgsConstructor
public class EasyCaptchaProducer {private final CaptchaConfig captchaConfig;public Captcha getCaptcha() {Captcha captcha;int width = captchaConfig.getWidth();int height = captchaConfig.getHeight();int length = captchaConfig.getLength();String fontName = captchaConfig.getFontName();switch (captchaConfig.getType()) {case ARITHMETIC -> {captcha = new ArithmeticCaptcha(width, height);captcha.setLen(2);}case CHINESE -> {captcha = new ChineseCaptcha(width, height);captcha.setLen(length);}case CHINESE_GIF -> {captcha = new ChineseGifCaptcha(width, height);captcha.setLen(length);}case GIF -> {captcha = new GifCaptcha(width, height);//最后一位是位数captcha.setLen(length);}case SPEC -> {captcha = new SpecCaptcha(width, height);captcha.setLen(length);}default -> throw new RuntimeException("验证码配置信息错误!正确配置查看 CaptchaTypeEnum ");}captcha.setFont(new Font(fontName, captchaConfig.getFontStyle(), captchaConfig.getFontSize()));return captcha;}}

添加依赖

        <!-- Java8 之后JavaScript引擎nashorn被移除导致验证码解析报错--><dependency><groupId>org.openjdk.nashorn</groupId><artifactId>nashorn-core</artifactId><version>${nashorn.version}</version></dependency>

功能测试

        Captcha captcha = easyCaptchaProducer.getCaptcha();try (OutputStream ops = new FileOutputStream("d://captcha.jpg")) {captcha.out(ops);} catch (Exception e) {e.printStackTrace();}System.out.println(captcha.text());

测试结果
在这里插入图片描述
在这里插入图片描述

编写controller接口

@Tag(name = "01-认证中心")
@RestController
@RequestMapping("/auth")
@RequiredArgsConstructor
@Slf4j
public class AuthController {private final EasyCaptchaService easyCaptchaService;@Operation(summary = "获取验证码")@GetMapping("/captcha")public Result<CaptchaResult> getCaptcha() {CaptchaResult captcha = easyCaptchaService.getCaptcha();return Result.success(captcha);}
}

启动项目

记住这里,这是你spring security 的密码
在这里插入图片描述

生成http

通过base64转图片的在线工具可以看到
在这里插入图片描述
说明编写成功了。

security配置

在上面我们默认的是spring security 自动的密码。我们现在需要自己设置密码。

spring security 框架捏,不太好说这玩意。挺忘记了。
不过spring boot3使用的是spring security6.0版本和以前的有很大差别,6.0通过配置bean来进行。所以也还好,反正都是从头学。
首先需要配置security的配置类

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
@RequiredArgsConstructor
public class SecurityConfig {// 密码编码器@Beanpublic PasswordEncoder passwordEncoder() {return new BCryptPasswordEncoder();}/*** 不走过滤器链的放行配置* 默认放行静态资源、登录接口、验证码接口、Swagger接口文档*/@Beanpublic WebSecurityCustomizer webSecurityCustomizer() {return (web) -> web.ignoring().requestMatchers("/auth/captcha","/webjars/**","/doc.html","/swagger-resources/**","/swagger-ui/**","/ws/**");}
}/*** 认证管理器** @param authenticationConfiguration 认证配置* @return 认证管理器* @throws Exception 异常*/@Beanpublic AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {return authenticationConfiguration.getAuthenticationManager();}@Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {http.authorizeHttpRequests(requestMatcherRegistry ->requestMatcherRegistry.requestMatchers(SecurityConstants.LOGIN_PATH).permitAll().anyRequest().authenticated()).sessionManagement(configurer -> configurer.sessionCreationPolicy(SessionCreationPolicy.STATELESS)).exceptionHandling(httpSecurityExceptionHandlingConfigurer ->httpSecurityExceptionHandlingConfigurer.authenticationEntryPoint(authenticationEntryPoint).accessDeniedHandler(accessDeniedHandler)).csrf(AbstractHttpConfigurer::disable);// 验证码校验过滤器http.addFilterBefore(new VerifyCodeFilter(), UsernamePasswordAuthenticationFilter.class);// JWT 校验过滤器http.addFilterBefore(new JwtAuthenticationFilter(jwtTokenManager), UsernamePasswordAuthenticationFilter.class);return http.build();}

这里还用到了2个拦截器

拦截器配置

验证码拦截器

需求:对登录请求进行拦截,如果是登录则需要先校验验证码是否正常,如果正确则放行。其他请求则直接放行。

public class VerifyCodeFilter extends OncePerRequestFilter {private static final AntPathRequestMatcher LOGIN_PATH_REQUEST_MATCHER = new AntPathRequestMatcher(SecurityConstants.LOGIN_PATH, "POST");public static final String VERIFY_CODE_PARAM_KEY = "verifyCode";public static final String VERIFY_CODE_KEY_PARAM_KEY = "verifyCodeKey";@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {// 如果是登录请求则校验验证码if (LOGIN_PATH_REQUEST_MATCHER.matches(request)){String code = request.getParameter(VERIFY_CODE_PARAM_KEY);String verifyCodeKey = request.getParameter(VERIFY_CODE_KEY_PARAM_KEY);// 由于这个不是bean,不能通过注入的方式获取,所以通过SpringUtil工具类获取RedisTemplate redisTemplate = SpringUtil.getBean("redisTemplate", RedisTemplate.class);String cacheCode =  Convert.toStr(redisTemplate.opsForValue().get(SecurityConstants.VERIFY_CODE_CACHE_PREFIX + verifyCodeKey));if (cacheCode == null) {// 验证码过期ResponseUtils.writeErrMsg(response, ResultCode.VERIFY_CODE_TIMEOUT);return;}if (!StrUtil.equals(cacheCode,code)) {// 验证码错误ResponseUtils.writeErrMsg(response, ResultCode.VERIFY_CODE_ERROR);return;}}filterChain.doFilter(request, response);}
}

jwt拦截器

需求:处理登录请求以外的请求,每次需要验证jwt令牌,如果没问题则在该线程请求附加权限身份。

public class JwtAuthenticationFilter extends OncePerRequestFilter {private static final AntPathRequestMatcher LOGIN_PATH_REQUEST_MATCHER = new AntPathRequestMatcher(SecurityConstants.LOGIN_PATH, "POST");private final JwtTokenManager tokenManager;public JwtAuthenticationFilter(JwtTokenManager jwtTokenManager) {this.tokenManager = jwtTokenManager;}@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException {if (!LOGIN_PATH_REQUEST_MATCHER.matches(request)) {String jwt = RequestUtils.resolveToken(request);if (StringUtils.hasText(jwt) && SecurityContextHolder.getContext().getAuthentication() == null) {try {Claims claims = this.tokenManager.parseAndValidateToken(jwt);Authentication authentication = this.tokenManager.getAuthentication(claims);SecurityContextHolder.getContext().setAuthentication(authentication);} catch (Exception e) {ResponseUtils.writeErrMsg(response, ResultCode.TOKEN_INVALID);}} else {ResponseUtils.writeErrMsg(response, ResultCode.TOKEN_INVALID);}}chain.doFilter(request, response);}
}

思考

这2个拦截器一个需要登录一个除去登录,那么是不是可以放到一个拦截器里面去。各走各的。这样也明确一点。也不用2个拦截器找了。

如果改了记得改securityFilterChain

用户登录

需求:输入用户名和密码,验证用户身份。
需要写一个类继承UserDetails
在这里插入图片描述

另一个实现类继承SysUserService(SysUserDetailsService)
在这里插入图片描述
这2个一个是存储一个是查询。然后会自动和输入的username以及password进行比对
验证流程后面总结一个spring security的文。

SysUserDetailsService作用是查询该用户名的角色信息并返回UserDetails。

查询,调用SysUserService根据用户名查询所有的
在这里插入图片描述
由于认证信息需要角色信息和权限所以我们需要联表查询角色信息。
在依据角色信息查询权限。

        select u.id userId,u.name username,u.password,u.role,u.avatar,u.email,u.status,r.codefrom sys_user uleft join sys_user_role sur on u.id = sur.user_idleft join sys_role r on sur.role_id = r.idwhere u.name = #{username}AND u.deleted = 0

然后在依据角色查询权限
不过我感觉这个type硬编码挺严重的,也算学习一下这种mybatis里面枚举了。
如果没用角色则m.id = -1让其没权限。

<select id="listRolePerms" resultType="java.lang.String">select distinct m.permfrom sys_menu minner join sys_role_menu rm on m.id = rm.menu_idinner join sys_role r on r.id = rm.role_idwhere m.type = '${@com.yu.common.enums.MenuTypeEnum@BUTTON.getValue()}'and m.perm is not null<choose><when test="roles!=null and roles.size()>0">and r.code in<foreach collection="roles" item="role" open="(" close=")" separator=",">#{role}</foreach></when><otherwise>and m.id = -1</otherwise></choose></select>

controller验证,很明确的流程就是封装输入的,然后进行验证。失败了会报错返回。
成功则生成token将权限放入redis,将角色,用户名,id封装进jwt
然后进行返回。接下来查看jwtTokenManager.createToken

    @Operation(summary = "登录")@PostMapping("/login")public Result<LoginResult> login(@Parameter(description = "用户名", example = "admin") @RequestParam String username,@Parameter(description = "密码", example = "123456") @RequestParam String password) {// 存储username和passwordUsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username.toLowerCase().trim(),password);// 验证用户名和密码Authentication authentication = authenticationManager.authenticate(authenticationToken);// 生成tokenString accessToken = jwtTokenManager.createToken(authentication);// 返回tokenLoginResult loginResult = LoginResult.builder().tokenType("Bearer").accessToken(accessToken).build();return Result.success(loginResult);}@Schema(description ="登录响应对象")@Builderpublic static record LoginResult(@Schema(description = "访问token")String accessToken,@Schema(description = "token 类型",example = "Bearer")String tokenType,@Schema(description = "刷新token")String refreshToken,@Schema(description = "过期时间(单位:毫秒)")Long expires) {}

jwt管理

采用hutool工具包进行jwt管理,以前用过java-jwt的,这次试试hutool。

    /*** 创建token** @param authentication auth info* @return token*/public String createToken(Authentication authentication) {SysUserDetails userDetails = (SysUserDetails) authentication.getPrincipal();// 角色放入JWT的claimsSet<String> roles = userDetails.getAuthorities().stream().map(GrantedAuthority::getAuthority).collect(Collectors.toSet());// 权限数据多放入RedisSet<String> perms = userDetails.getPerms();redisTemplate.opsForValue().set(SecurityConstants.USER_PERMS_CACHE_PREFIX + userDetails.getUserId(), perms);Map<String, Object> claims = Map.of(JWTPayload.ISSUED_AT, DateTime.now(),JWTPayload.EXPIRES_AT, DateTime.now().offset(DateField.SECOND, tokenTtl),"jti", IdUtil.fastSimpleUUID(),"userId", userDetails.getUserId(),"username", userDetails.getUsername(),"authorities", roles);return JWTUtil.createToken(claims, getSecretKeyBytes());}

验证

http测试:
之前测试挺头疼的。
需要先发送验证码的。
然后去base64转图片(后面直接打印了结果了)
进行测试
在这里插入图片描述
成功
在这里插入图片描述
后面去vue3前端测了。用的是有来开源vue3-element-admin修改。
成功了!
在这里插入图片描述

用户注销

待续

相关文章:

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面&#xff1a; 还要实习&#xff0c;每次时间好少呀&#xff0c;进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …...

学习设计模式之装饰器模式,但是宝可梦

装饰模式 为了不改变组件的结构&#xff0c;动态地扩展其功能。 通常&#xff0c;扩展功能通过子类进行&#xff0c;但是继承的方式具有静态特征&#xff0c;耦合度高。 意图&#xff1a;动态地给对象添加额外的功能 主要解决&#xff1a;继承方式是静态特征&#xff0c;扩…...

【AWS】创建IAM用户;无法登录IAM用户怎么办?错误提示:您的身份验证信息错误,请重试(已解决)

目录 0.背景问题分析 1.解决步骤 0.背景问题分析 windows 11 &#xff0c;64位 我的问题情景&#xff1a; 首先我创建了aws的账户&#xff0c;并且可以用ROOT用户登录&#xff0c;但是在登录时选择IAM用户&#xff0c;输入ROOT的名字和密码&#xff0c;就会提示【您的身份验证…...

微服务基础知识

文章目录 微服务基础知识一、系统架构的演变1、单体应用架构2、垂直应用架构3、分布式SOA架构&#xff08;1&#xff09;什么是SOA&#xff08;2&#xff09;SOA架构 4、微服务架构5、SOA和微服务的关系&#xff08;1&#xff09;SOA&#xff08;2&#xff09;微服务架构 二、分…...

倒残差结构

倒残差结构&#xff1a;   倒残差结构是MobileNetV2中引入的一种设计&#xff0c;用于增强网络的表达能力和特征提取能力&#xff0c;同时保持轻量级的特点。它的核心思想是在每个瓶颈块中&#xff0c;先使用一个扩张卷积&#xff08;Dilated Convolution&#xff09;&#x…...

Docker的基本使用

Docker 概念 Docker架构 docker分为客户端&#xff0c;Docker服务端&#xff0c;仓库 客户端 Docker 是一个客户端-服务器&#xff08;C/S&#xff09;架构程序。Docker 客户端只需要向 Docker 服务端发起请求&#xff0c;服务端将完成所有的工作并返回相应结果。 Docker …...

paddlenlp安装踩坑记录

错误1 ModuleNotFoundError: No module named paddle.metric我下载paddlepaddle-gpu2.5.0.post117解决了&#xff0c;最开始下载的2.5.1报错&#xff0c;post后面的117是我的cuda版本&#xff0c;不要写你对应的版本号 python3 -m pip install paddlepaddle-gpu2.5.0.post117…...

微服务流程引擎:简单又灵活,实现流程全生命周期管理!

伴随着日益激烈的市场竞争&#xff0c;传统的办公操作已经无法满足发展需要了。如果采用微服务流程引擎加油助力&#xff0c;就可以帮助企业更好地管理数据资源&#xff0c;高效做好各种表单制作&#xff0c;实现高效率办公。流辰信息以市场为导向&#xff0c;用心钻研低代码技…...

Qt表格数据处理

概述 在Qt表格数据处理中&#xff0c;涉及到如下几个具体的类&#xff1a; QAbstractItemModel&#xff1a;这是一个抽象基类&#xff0c;定义了模型&#xff08;Model&#xff09;的接口规范。所有的模型类都应该派生自QAbstractItemModel&#xff0c;并实现它的纯虚函数&…...

EasyPOI 实战总结

EasyPOI实战总结 简介 easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言(熟悉的表达式语法),完成以前复杂的写法 使用EasyPOI 环境搭建 # 1.引入相关依…...

【LeetCode-困难题】42. 接雨水

题目 题解一&#xff1a;暴力双重for循环&#xff08;以行计算水量&#xff09; 1.先找出最高的柱子有多高&#xff08;max 3&#xff09; 2.然后第一个for为行数&#xff08;1&#xff0c;2&#xff0c;3&#xff09; 3.第二个for计算每一行的雨水量&#xff08;关键在于去除…...

npm install 安装依赖,报错 Host key verification failed

设置 git 的身份和邮箱 git config --global user.name "你的名字" > 用户名 git config --global user.email “你的邮箱" > 邮箱进入 > 用户 > [你的用户名] > .ssh文件夹下,删除 known_hosts 文件即可 进入之后有可能会看到 known_hosts…...

SOLIDWORKS焊件是什么?

SOLIDWORKS是一款广泛应用于机械设计领域的三维计算机辅助设计软件。SOLIDWORKS提供了强大的焊件功能&#xff0c;可以帮助工程师们以更高的效率设计焊接件。本文将介绍SOLIDWORKS焊件的概念、特点以及使用方法&#xff0c;以期帮助读者更好地理解和应用这一关键技术。 SOLIDWO…...

2023国赛数学建模D题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…...

git协议实现管理(三个步骤)

GitHub官网访问&#xff1a; https://github.com/dashboard 初次使用git的用户要使用git协议大概需要三个步骤: 一、生成密钥对 二、设置远程仓库(本文以github为例)上的公钥 三、把git的remote url远程仓库URL可访问路径修改为git协议(以上两个步骤初次设置过以后&#xff0c…...

“深入理解JVM:探索Java虚拟机的内部机制“

标题&#xff1a;深入理解JVM&#xff1a;探索Java虚拟机的内部机制 摘要&#xff1a; Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;是Java语言的核心&#xff0c;负责将Java源代码编译成可执行的字节码并运行。本篇博客将深入探索JVM的内部机制&a…...

Unity——各种特效的基本使用方法

特效是游戏制作不可或缺的一环&#xff0c;作为游戏开发者最重要的工作就是将特效添加到游戏中&#xff0c;并在合适的时机、合适的位置将特效播放出来&#xff0c;同时还要注意特效的管理和销毁。 某些种类的特效&#xff0c;如动效、贴花&#xff0c;还要编写脚本代码以实现…...

smiley-http-proxy-servlet 实现springboot 反向代理,结合项目鉴权,安全的引入第三方项目服务

项目中反向代理 集成第三方的服务接口或web监控界面&#xff0c;并实现与自身项目相结合的鉴权方法 依赖 smiley-http-proxy-servlet GitHub链接 2.0 版开始&#xff0c;代理切换到jakarta servlet-api<!--HTTP 代理 Servlet--><dependency><groupId>org.mit…...

(vue)多级表头且转为百分比显示

(vue)多级表头且转为百分比显示 <el-table-column align"center" label"近三个月数据情况"><el-table-column align"center" prop"amount" :label"tableLast[0]"><template slot-scope"{ row }"&g…...

Linux下C++开发

Linux下C开发 Linux 系统介绍 简介 Linux属于多用户多任务操作系统&#xff0c;而Windows属于单用户多任务操作系统Linux一切皆文件目录结构 bin 存储二进制可执行文件dev 存放的是外接设备&#xff0c;例如磁盘&#xff0c;光盘等。在其中的外接设备是不能直接被使用的&…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...