谷粒商城day47 -商品服务-API-品牌管理-elementui表单校验&自定义校验器

最新推荐文章于 2025-11-25 13:46:00 发布
原创 最新推荐文章于 2025-11-25 13:46:00 发布 · 240 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #表单校验 #自定义校验器

本文档介绍了如何在ElementUI中解决图片URL显示问题，通过在index.js引入Image组件实现。同时，详细阐述了动态绑定rules属性进行表单校验的方法，包括自定义校验规则和数据类型的设定，确保表单填写的正确性。

由于品牌logo地址没显示图片，显示的url所以进行优化我先添加自定义模板列

可是没有反应，发现elementui没有引入Image组件

于是在elementui下的index.js引入

可以看到这一列显示图片了

 下面才是正文,添加校验规则

1.表单上动态绑定rules属性

2.添加规则对象

如果要自定义规则就看最下面 定义validator属性绑定一个方法

3.添加校验方法

 

 4.定义数据类型

谷粒商城54-商品服务-API-品牌管理-云存储开通与使用
Java持续实践
09-29 484
文章目录分布式文件存储介绍开通阿里云对象存储创建存储空间文件上传的交互逻辑 分布式文件存储介绍 在传统的单机模式开发中, 文件只需存储在服务的服务器中即可. 但如果是集群环境, 可能把文件上传到了一台机器中, 下次请求调用的另外一台机器. 那么就会导致找不到文件了. 因此解决办法是, 把文件服务作为一个单独的服务. 此单独的文件服务, 可以是自己搭建的fastdfs等, 但是此种方式一开始的搭建比较复杂, 需要一台单独的服务器等. 因此使用第三方的文件存储就比较合适, 例如阿里云对象存储, 七牛云存储等.
谷粒商城55-商品服务-API-品牌管理-OSS整合测试 Spring Cloud Alibaba-OSS
Java持续实践
09-29 1577
文章目录安装sdk简单文件上传的代码测试Spring Cloud Alibaba-OSS 安装sdk 在对象存储的首页中, 找到文档的链接 在文档中心打开 Java sdk的安装 https://help.aliyun.com/document_detail/32009.html?spm=a2c4g.11186623.6.904.cd5758d55CFtJ7 复制如下的依赖 <dependency> <groupId>com.aliyun.oss</groupI
谷粒商城53-商品服务-API-品牌管理-效果优化与快速显示开关
Java持续实践
08-15 553
文章目录关闭eslint的语法检查需求代码实现elementui组件介绍具体代码完整代码 关闭eslint的语法检查 起前端项目的时候, 总是会有如下的报错. 可以将其关闭 注释掉build文件夹下的如下文件的,如下部分的代码 之后再重启前端服务即可 需求 在品牌管理的显示状态一栏, 弄一个开关按钮 , 可以通过按钮来控制是否显示. 代码实现 elementui组件介绍 使用表格的自定义模板 scope.row 代表这一行的数据 开关中的事件, 获取开关最新的值的监听器 由于开关默认的是传递
谷粒商城day43 -商品服务-API-品牌管理-云存储开通与使用
JavaCoder_juejue的博客
10-14 189
1.为啥要用云存储 2.注册并登录阿里云 这里就不多说 3.开通OSS对象存储服务 看到下面这个界面说明就开通成功了 4.看帮助文档 5.创建bucket 6.上传文件测试成功 7.项目中上传方式选择 选择第二种方式，通过服务端设置的账号密码生成防伪签名获取后直接上传到阿里云OSS中的bucket ...
谷粒商城56-商品服务-API-品牌管理-OSS获取服务端签名
Java持续实践
10-01 772
文章目录创建第三方的模块 创建第三方的模块 由于之后可能要调用很多的第三方服务, 因此直接创建一个模块专门用于第三方服务的调用 勾选上 远程调用的功能 . 注册中心和配置中心的依赖 , 直接用common的 ...
Day400&401&402&403&404&405&406.商品服务 -谷粒商城
阿昌爱Java
09-24 3387
商品服务 一、品牌管理 1、效果优化与快速显示开关 将逆向工程product得到的resources\src\views\modules\product文件拷贝到achangmall/renren-fast-vue/src/views/modules/product目录下，也就是下面的两个文件 brand.vue ： 显示的表单 brand-add-or-update.vue：添加和更改功能 但是显示的页面没有新增和删除功能，这是因为权限控制的原因 <el-button v-if="is
谷粒商城-基础篇-Day05-品牌管理2
qq_57907966的博客
09-21 434
1、编写一个自定义校验注解2、编写一个自定义校验器3、关联校验器和校验注解需求：自定义一个注解，设置排序字段只能是0或11、导入依赖2、新建一个注解//读取配置文件中的出错信息Class
[项目练手笔记-谷粒商城（SpringCloud Alibaba+vue前后端分离）]day08-day09品牌管理(阿里云对象存储OSS上传文件，前后端表单数据校验JSR303)
叶落雨飘的博客
07-17 1396
[项目练手笔记-谷粒商城]day08-day09品牌管理 一、逆向生成前端代码 1.创建品牌管理菜单 2.前端逆向代码 将逆向生成的前端代码拷贝到category目录下 3.关闭语法检查 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings i
谷粒商城实战笔记-69-商品服务-API-品牌管理-JSR303自定义校验注解
epitomizelu的专栏
07-26 1031
假设我们需要校验一个名为showStatus的字段，该字段只能接受0或1两个值。为了实现这一需求，我们将创建一个自定义校验注解，并为其编写相应的校验器。首先，我们需要定义一个自定义的校验注解@ListValue，并为其提供必要的元数据。ListValue注解类的代码如下。Class
谷粒商城实战笔记-66-商品服务-API-品牌管理-JSR303数据校验
epitomizelu的专栏
07-26 1363
每个注解都有默认的错误提示，配置在文件中。但是，我们可以在自动注解的message属性自定义错误提示。@NotNull(message = "Logo必须提交")Logo URL@NotNull@URL: 标注在Logo字段上，表示该字段必须不为空且是一个有效的URL。@NotNull(message = "Logo必须提交")@URL(message = "Logo必须是一个合法的URL地址")@Pattern: 标注在首字母字段上，表示该字段必须满足特定的正则表达式。
谷粒商城实战笔记-63-商品服务-API-品牌管理-OSS获取服务端签名
epitomizelu的专栏
07-25 1492
因此，上传文件涉及到第三方服务阿里云OSS，以后还会有第三方短信服务等，为了统一管理第三方服务，创建一个专门的模块third-party。
谷粒商城实战笔记-59-商品服务-API-品牌管理-使用逆向工程的前后端代码
epitomizelu的专栏
07-25 740
品牌管理的代码使用逆向工程生成的代码，再次基础上进行修改。小细节，使用逆向工程生成代码时，要注意分页导致只生成部分代码，可以调整每页显示的数据条数，一次把所有的数据都显示出来。把逆向工程中与品牌相关的两个代码文件是brand.vue和。拷贝到前端工程中。
谷粒商城实战笔记-61-商品服务-API-品牌管理-云存储开通与使用
epitomizelu的专栏
07-25 1302
文章目录一，图片云存储二，阿里云OSS1，OSS2，基于OSS的文件上传架构3，Java中使用OSS 一，图片云存储 这张图展示了文件存储的几种常见模式： 普通上传 分布式情况下的普通上传 使用自建服务器 云存储服务的情况 普通上传：在这种情况下，浏览器直接将文件上传给商品服务，然后由商品服务保存文件。这种方式简单明了，但是存在单点故障风险，因为所有文件都在同一台服务器上存储。 分布式情况下的普通上传：这是一种改进后的版本，多个商品服务共享同一个文件存储空间。然而，这种方案仍然需要自己维护文件
谷粒商城59-商品服务-API-品牌管理-JSR303数据校验
Java持续实践
10-04 711
文章目录品牌名称后端参数校验示例品牌其他参数校验 品牌名称后端参数校验示例 validation-api-2.0.1.Final.jar包中 ,提供了如下的注解, 用于参数的校验 例如有如下的注解 @NotNull The annotated element must not be null. Accepts any type. 用于校验不能为null @NotEmpty The annotated element must not be null nor empty. Supported types
【tips】动态el-form-item中校验的注意点
Dorcas_FE的博客
11-25 236
el-table中实现动态输入框必填校验的方法
elementui el-date-picker时间区间选择弹出框样式
qq_39047060的博客
11-24 152
摘要：该代码片段实现了一个深色主题的日期时间范围选择器组件。使用Vue+Element UI的el-date-picker组件，通过popper-class="dialogContainerScreen"自定义弹窗样式。CSS样式将日期选择器背景设为深蓝色(#001939)，文字颜色设为白色，边框使用蓝色(#00376b)，并对各种交互状态(如hover、active)进行了特殊样式处理。组件支持日期时间范围选择(YYYY-MM-DD HH:mm:ss格式)，宽度固定为300px，包含开
el-menu折叠后文字下移
change_fate的博客
11-21 235
【代码】el-menu折叠后文字下移。
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
最新发布
四岁爱上了她的博客
11-25 89
本文展示了一个基于Vue和Element Plus的下拉框交互组件实现。通过全局点击事件监听，实现了输入框聚焦时显示对应下拉框，点击外部自动隐藏的功能。组件包含两个表单输入框，每个输入框下方可显示独立的下拉区域，支持自定义UI内容。关键技术点包括：使用ref动态注册DOM元素、通过isSwitchingInput状态管理避免切换时的闪烁问题、利用contains方法判断点击区域位置。该实现提供了灵活的下拉框控制方式，既可通过按钮主动隐藏，也能智能响应外部点击事件。
Vue + element plus 二次封装表格
XL984507092的博客
11-20 108
本文介绍了一个基于Element Plus二次封装的表格组件，主要解决了业务开发中的常见需求。组件实现了以下功能： 支持自定义序号生成和空数据展示 提供灵活的分页控制 内置时间格式化和敏感信息脱敏功能 优化了表格样式，包括表头分割线和行样式 支持行选择和展开功能 提供了丰富的API包括清空选择、设置当前行等方法 该组件通过TypeScript类型定义和组合式API实现，相比原antd表格更符合当前业务需求，同时解决了维护性问题。
谷粒商城-商品维护-发布商品-商品介绍图片上传失败
08-09
在谷粒商城平台发布商品时，如果商品介绍图片上传失败，通常可能是由于文件存储服务（如阿里云OSS）的配置问题、网络请求异常或后端服务未正确处理请求所致。根据引用中提到的一些常见问题及解决方案，以下是可能的解决方法： ### 1. 检查OSS配置是否正确 商品图片上传通常依赖于对象存储服务（如阿里云OSS）。如果OSS的配置信息缺失或错误，会导致上传失败。例如，`ossClient`实例创建失败时会抛出类似 `Oss endpoint can't be empty` 的异常[^4]。 **解决方法：** - 确保在配置文件（如`application.yml`或`bootstrap.yml`）中正确配置了OSS的访问密钥、Endpoint、Bucket名称等信息。 - 检查是否在Nacos配置中心中正确配置了OSS相关的参数，并确保服务能够正确拉取这些配置。 ### 2. 确保Nacos服务注册与配置中心正常工作 如果网关或相关服务无法从Nacos获取配置或服务实例，可能导致请求失败。例如，引用中提到的503错误与服务未在Nacos中注册或配置名称不一致有关[^1]。 **解决方法：** - 登录Nacos控制台，确认`renren-fast`等服务已成功注册。 - 确认服务的`Data ID`和`Group`与配置文件中的名称一致。 - 如果服务配置有误，可以尝试重新引入Nacos客户端依赖并重启服务[^1]。 ### 3. 检查Spring Boot与Spring Cloud版本兼容性 版本不兼容也可能导致服务启动失败或某些Bean无法正确注入，从而影响图片上传功能。例如，Spring Boot版本过高可能导致与Spring Cloud组件的兼容性问题[^3]。 **解决方法：** - 确保使用的Spring Boot与Spring Cloud Alibaba版本兼容。 - 参考引用中使用的版本配置，例如将Spring Boot版本调整为`2.2.1.RELEASE`或`2.1.8.RELEASE`，Spring Cloud Alibaba版本为`2.1.0.RELEASE`[^3]。 ### 4. 检查网关依赖配置 在网关服务中，如果引入了不兼容的依赖或缺少必要的配置，可能导致请求被拦截或转发失败。 **解决方法：** - 确保网关服务中没有引入冲突的依赖，如引用中提到的`spring-cloud-starter-netflix-ribbon`可能导致的问题[^2]。 - 可尝试注释掉`gulimall-common`中可能导致冲突的依赖，并引入`spring-cloud-loadbalancer`以替代。 ### 5. 检查前端上传请求与后端接口匹配 商品图片上传功能依赖于前后端接口的正确对接。如果接口路径、参数名称或请求方式不匹配，也可能导致上传失败。 **解决方法：** - 使用浏览器开发者工具（F12）查看上传请求的URL、请求头、请求体是否正确。 - 确认后端Controller方法是否正确接收并处理了上传请求，例如使用了`@RequestParam("file") MultipartFile file`等注解。 ### 示例代码：OSS上传接口示例 ```java @RestController @RequestMapping("/oss") public class OssController { @Autowired private OSS ossClient; @Value("${aliyun.oss.bucket}") private String bucketName; @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ResponseEntity.badRequest().body("File is empty"); } String fileName = UUID.randomUUID() + file.getOriginalFilename(); try { ossClient.putObject(bucketName, fileName, new ByteArrayInputStream(file.getBytes())); String fileUrl = "https://" + bucketName + "." + "oss-cn-beijing.aliyuncs.com" + "/" + fileName; return ResponseEntity.ok(fileUrl); } catch (IOException e) { return ResponseEntity.status(500).body("Upload failed"); } } } ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我才是真的封不觉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值