商城-学习整理-基础-商品服务API-品牌管理(六)

目录

  • 一、使用逆向工程生成前后端代码
    • 1、新增品牌管理菜单
    • 2、使用生成的前端代码
  • 二、优化逆向生成的品牌管理页面
    • 1、显示状态开关优化
    • 2、品牌上传优化(使用阿里云存储)
      • 1)阿里云对象存储-普通上传方式
      • 2)阿里云对象存储-服务端签名后直传
      • 3)创建阿里云对象存储空间(OSS整合)
      • 4)创建一个第三方模块zhenyanmall-third-party用来保存,第三方接口
        • 1:创建oss配置,oss获取服务端签名
        • 2:配置网关
        • 3:编写前端单文件上传和多文件上传功能。
    • 3、表单校验&自定义校验器
    • 4、后端的校验
    • 5、后端统一异常处理

一、使用逆向工程生成前后端代码

1、新增品牌管理菜单

人人快速开发平台-》系统管理-》菜单管理-》品牌管理-
在这里插入图片描述

2、使用生成的前端代码

在目录:renren\main\resources\src\views\modules\product
在这里插入图片描述
拷贝到前端模块
在这里插入图片描述
然后重启前端项目,就有了品牌管理的页面
在这里插入图片描述
表格的表头和数据库中表结构的注释一致
在这里没有新增和删除功能,这是因为权限的问题,在前端项目里,想要做这些功能,判断是否有权限,现在没有加入权限系统,所以默认生成的按钮是没有权限的
在这里插入图片描述
在品牌代码里面,有新增和批量删除的功能,里面有v-if="isAuth('product:brand:save')"来判断是否拥有这个权限,拥有这个权限了才会展示这些功能,可以将权限判断删掉,或者永远返回为true,或者添加权限(目前还没有开发权限模块)

全局搜索isAuth,修改直接返回为true
在这里插入图片描述
这样我们就有了权限

在这里插入图片描述
测试一下新增、修改、删除品牌,可以成功

在这里插入图片描述

二、优化逆向生成的品牌管理页面

1、显示状态开关优化

// 1、在显示状态添加显示按钮 引用Table的自定义列模板 <template slot-scope="scope"></template> 然后在用switch作为开关

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
v-model=“scope.row.showStatus” 绑定对应的行状态数据

在这里插入图片描述

// 2、在新增或修改文件中 也修改下状态按钮
在这里插入图片描述

在这里插入图片描述
修改一下表格标签宽度
在这里插入图片描述
在这里插入图片描述
// 3、品牌logo地址应该上传的图片地址 因此需要修改 使用Upload组件
在这里插入图片描述
// 4、先做状态的显示与不显示与后台的交互,修改数据 监听开关的状态 使用switch的Events事件
在这里插入图片描述

在这里插入图片描述

2、品牌上传优化(使用阿里云存储)

在这里插入图片描述
单体应用、普通分布式应用(文件上传一台服务器上,如果请求其他服务器会找不到文件,会有问题,也可以记录元数据解决,对应的请求对应的服务器)、优化:浏览器不管上传哪个商品服务,都上传到文件存储中心,在同一个地方写,一个地方读,可以自己搭建,也可以使用云存储。
我们在这里使用阿里云的对象存储OSS。

在这里插入图片描述
开通对象存储。
然后根据使用文档进行操作。
在这里插入图片描述
仅作学习使用,简单使用选择:
选择低频访问、冗余存储关闭、选择公共读、不需要服务端加密,实时日志查询:不开通。

1)阿里云对象存储-普通上传方式

在这里插入图片描述
用户通过浏览器将图片先上传给应用服务器(就是商品服务),再传给对象存储。
将图片上传交给网关,转给商品服务,商品服务拿到文件的字节流,使用java代码将图片的流数据传给对象存储,拿到地址。

2)阿里云对象存储-服务端签名后直传

将OSS的账号和密码存在自己的商品服务里面(应用服务器),浏览器想要上传数据,先找我们的应用服务器要到一个policy(上传策略),利用阿里云的账号和密码生成医生防伪签名,这个签名里面包含我们访问阿里云的授权令牌,以及我们要上传给阿里云的哪个地址、位置等信息,浏览器从服务器拿到这些信息以后,这些信息没有账号和密码,有账号和密码生成的防伪签名,前端带着防伪签名和要上传的文件给阿里云云存储服务,阿里云可以自己验证这些防伪签名,它是正确的,阿里云就可以接收这次上传请求,保存上传对象。这样文件就不用过我们的服务器了。
在这里插入图片描述

3)创建阿里云对象存储空间(OSS整合)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

创建ARM
在这里插入图片描述

在这里插入图片描述

https://github.com/alibaba/spring-cloud-alibaba
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4)创建一个第三方模块zhenyanmall-third-party用来保存,第三方接口

第三方接口服务也需要注册到注册中心和配置中心。

1:创建oss配置,oss获取服务端签名

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2:配置网关

在这里插入图片描述

3:编写前端单文件上传和多文件上传功能。

将课件》docs》代码》前端-》upload拷贝到前端项目里面src->components下面
在这里插入图片描述
在这里插入图片描述

将路径修改为自己的
在这里插入图片描述
修改品牌添加或者新增功能中的品牌logo地址,
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在OSS里面将我们的bucket设置为可以跨域访问,然后就可以正常上传和显示了。

3、表单校验&自定义校验器

1)设置新增或者修改的显示的数据,进行双向绑定
在这里插入图片描述
2)让上传文件的地址显示为图片
在这里插入图片描述
使用table组件的自定义显示某列,使用template,放到品牌的列表中的品牌logo

在这里插入图片描述
我们再使用element 中的图片显示组件
在这里插入图片描述
在这里插入图片描述

发现有问题,缺少组件<el-image>
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

可以使用原生的image
在这里插入图片描述

表单验证使用form中的表单验证功能
在这里插入图片描述

在这里插入图片描述
使用rules属性校验

在这里插入图片描述
还有自定义校验规则的校验失败之后的回调,给每一个属性规定自己的校验器

在这里插入图片描述

在这里插入图片描述

4、后端的校验

JSR303:java的规范体验303号,规定数据校验的标准。

  • 1)、给Bean添加校验注解:javax.validation.constraints,并定义自己的message提示
  • 2)、开启校验功能@Valid
  •  效果:校验错误以后会有默认的响应;
    
  • 3)、给校验的bean后紧跟一个BindingResult,就可以获取到校验的结果
  • 4)、分组校验(多场景的复杂校验)
  •     1)、	@NotBlank(message = "品牌名必须提交",groups = {AddGroup.class,UpdateGroup.class})
    
  •      给校验注解标注什么情况需要进行校验
    
  •     2)、@Validated({AddGroup.class})
    
  •     3)、默认没有指定分组的校验注解@NotBlank,在分组校验情况@Validated({AddGroup.class})下不生效,只会在@Validated生效;
    
  • 5)、自定义校验
  •  1)、编写一个自定义的校验注解
    
  •  2)、编写一个自定义的校验器 ConstraintValidator
    
  •  3)、关联自定义的校验器和自定义的校验注解
      *      @Documented
      * @Constraint(validatedBy = { ListValueConstraintValidator.class【可以指定多个不同的校验器,适配不同类型的校验】 })
      * @Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })
      * @Retention(RUNTIME)
      * public @interface ListValue {
    

5、后端统一异常处理

  • @ControllerAdvice
  • 1)、编写异常处理类,使用@ControllerAdvice。
  • 2)、使用@ExceptionHandler标注方法可以处理的异常。
  • 3)、在common创建异常校验码枚举类BizCodeEnume

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统部署Python语言开发运行环境

目录 Ubuntu自带python Debian安装python 安装 pip 库列表 安装第三方库 使用国内镜像站 实装 tkinter 库 编写运行代码 测试代码1 1. 创建项目 2. 创建源码文件 3. 写入源代码 4. 修改权限 5. 运行代码 测试代码2 本文的使用环境是Windows的Linux 子系统&…

基于fpga_EP4CE6F17C8_秒表计数器

文章目录 前言实验手册一、实验目的二、实验原理1&#xff0e;理论原理2&#xff0e;硬件原理 三、系统架构设计四、模块说明1&#xff0e;模块端口信号列表dig_driver(数码管驱动模块)key(按键消抖模块)top(顶层模块) 2&#xff0e;状态转移图3&#xff0e;时序图五、仿真波形…

Windows 本地安装 Mysql8.0

前言 看了网上许多关于Windows 本地安装mysql的很多教程&#xff0c;基本上大同小异。但是安装软件有时就可能因为一个细节安装失败。我也是综合了很多个教程才安装好的&#xff0c; 所以本教程可能也不是普遍适合的。现我将自己本地安装的步骤总结如下&#xff0c;如有不对的…

高级web前端开发工程师的职责说明(合集)

高级web前端开发工程师的职责说明1 职责&#xff1a; 1、根据需求文档&#xff0c;完成PC端、移动端页面及交互的开发&#xff0c;并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术&#xff0c;能解决各种浏览器兼容性问题&#xff…

boost beast http server 测试

boost beast http client boost http server boost beast 是一个非常好用的库&#xff0c;带上boost的协程&#xff0c;好很多东西是比较好用的&#xff0c;以下程序使用四个线程开启协程处理进入http协议处理。协议支持http get 和 http post #include <boost/beast/cor…

关于盐雾试验

盐雾实验一般被称为盐雾试验&#xff0c;是一种主要利用盐雾试验设备所创造的人工模拟盐雾环境条件来考核产品或金属材料耐腐蚀性能的环境试验。 盐雾实验的主要目的是考核产品或金属材料的耐盐雾腐蚀性能&#xff0c;盐雾试验结果也是对产品质量的判定&#xff0c;是正确衡量…

mongodb-win32-x86_64-2008plus-3.4.24-signed.msi

Microsoft Windows [版本 6.1.7601] 版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator>cd C:\MongoDB\Server\3.4\binC:\MongoDB\Server\3.4\bin>C:\MongoDB\Server\3.4\bin>mongod --help Options:General options:-h [ --help ] …

UML-构件图

目录 1.概述 2.构件的类型 3.构件和类 4.构件图 1.概述 构件图主要用于描述各种软件之间的依赖关系&#xff0c;例如&#xff0c;可执行文件和源文件之间的依赖关系&#xff0c;所设计的系统中的构件的表示法及这些构件之间的关系构成了构件图 构件图从软件架构的角度来描述…

Docker极速安装Jenkins

安装 Jenkins 是一个常见的任务&#xff0c;使用 Docker 进行安装可以简化该过程并确保环境一致性。以下是在 Docker 中安装 Jenkins 的详细步骤&#xff1a; 安装 Docker: 首先&#xff0c;请确保您已在目标机器上安装了 Docker。根据您的操作系统&#xff0c;可以在 Docker 官…

【Spring框架】Spring事务

目录 Spring中事务的实现编程式事务声明式事务Transactional 作⽤范围Transactional 参数说明注意事项Transactional ⼯作原理 MySQL 事务隔离级别Spring 事务隔离级别事务传播机制 Spring中事务的实现 Spring中事务操作分为两类&#xff1a; 1.编程式事务 2.声明式事务 编程…

meanshift算法通俗讲解【meanshift实例展示】

meanshift算法原理 meanshift算法的原理很简单。假设你有一堆点集&#xff0c;还有一个小的窗口&#xff0c;这个窗口可能是圆形的&#xff0c;现在你可能要移动这个窗口到点集密度最大的区域当中。 如下图&#xff1a; 最开始的窗口是蓝色圆环的区域&#xff0c;命名为C1。蓝…

一百四十四、Kettle——Linux上安装的kettle8.2连接MySQL数据库

一、目的 在Linux上安装好kettle&#xff0c;然后用kettle连接MySQL数据库 注意&#xff1a;kettle版本是8.2 二、实施步骤 &#xff08;一&#xff09;到kettle安装目录下启动Linux的kettle服务 # cd /opt/install/data-integration/ # ./spoon.sh &#xff08;二&#x…

SpringCloud深度学习(在更)

微服务简介 微服务是什么&#xff1f; 微服务是一种架构风格&#xff0c;将一个大型应用程序拆分为一组小型、自治的服务。每个服务都运行在自己独立的进程中&#xff0c;使用轻量级的通信机制&#xff08;通常是HTTP或消息队列&#xff09;进行相互之间的通信。这种方式使得…

springboot-mybatis的增删改查

目录 一、准备工作 二、常用配置 三、尝试 四、增删改查 1、增加 2、删除 3、修改 4、查询 五、XML的映射方法 一、准备工作 实施前的准备工作&#xff1a; 准备数据库表 创建一个新的springboot工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、mysql驱动…

TP DP PP 并行训练方法介绍

这里写目录标题 张量并行TP流水线并行 PPnaive模型并行GPipePipeDream 数据并行DPFSDP 张量并行TP 挖坑 流水线并行 PP 经典的流水线并行范式有Google推出的Gpipe&#xff0c;和微软推出的PipeDream。两者的推出时间都在2019年左右&#xff0c;大体设计框架一致。主要差别为…

细讲一个 TCP 连接能发多少个 HTTP 请求(二)

第三个问题&#xff1a;一个 TCP 连接中 HTTP 请求发送可以一起发送么&#xff08;比如一起发三个请求&#xff0c;再三个响应一起接收&#xff09;&#xff1f; HTTP/1.1 存在一个问题&#xff0c;单个 TCP 连接在同一时刻只能处理一个请求&#xff0c;意思是说&#xff1a;两…

[Docker实现测试部署CI/CD----相关服务器的安装配置(2)]

目录 6、Jenkins安装配置安装jdk安装maven拉取镜像启动jenkins修改数据卷权限浏览器访问安装插件配置jenkins移动JDK和Maven配置JDK和Maven 6、Jenkins安装配置 Jenkins 是一个开源软件项目&#xff0c;是基于 Java 开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&…

js省市区下拉框联动——前端笔记

问题&#xff1a; 我们常常要用到下拉框联动的功能&#xff0c;比如最常用的是选择地址的 省 市 区 的联动。思路&#xff1a; 先填充第一个下拉框&#xff0c;然后写一个第一个下拉框的change事件来加载第二个下拉框&#xff0c;再写第二个下拉框的change事件来加载第三个下…

整理mongodb文档:collation

文章连接 整理mongodb文档:collation 看前提示 对于mongodb的collation。个人主要用的范围是在createcollection&#xff0c;以及find的时候用&#xff0c;所以本片介绍的时候也是这两个地方入手&#xff0c;对新手个人觉得理解概念就好。不要求强制性掌握&#xff0c;但是要…

2023 8-5

430. 扁平化多级双向链表 前序遍历(递归) 脖子左歪45度,多级链表变成了二叉树,输出先序即可。 前序遍历再将结果存放在双向链表中,通过将链表存入节点来改变原来的节点 /* // Definition for a Node. class Node { public:int val;Node* prev;Node* next;Node* child; }; *…
最新文章