【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了,请点击这里!】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】
【20-业务开发-基础业务-商品模块-分类管理-前端展示后端具有层级关系的目录数据-商品系统三级分类的逻辑删除前后端代码实现】
【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】
【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】

二.品牌管理项目搭建

renren-fast-generator项目不仅能生成表结构对应的后端模块代码,也会帮我们生成Vue模板代码。

首先修改generator后端的项目generator.properties配置文件的相关信息
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第1张图片

再修改application.yml中连接数据库的信息
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第2张图片

启动项目,访问项目,生成文件
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第3张图片

解压文件
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第4张图片

找到我们接下来学习使用的vue文件。
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第5张图片

然后在前端服务中创建品牌管理菜单

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第6张图片

拷贝Brand.vue相关的文件到如下目录中

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第7张图片

拷贝进来后,我们再去访问品牌页面就可以访问了

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第8张图片

添加和删除按钮没有出来是因为权限的问题,我们直接删除这个权限判断的条件,也可以直接修改权限判断的前端逻辑实现,先都放开,都可以true。

第一种方式是直接删除这来个isAuth。
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第9张图片

第二种就是修改isAuth中的逻辑,直接返回true。

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第10张图片
然后再次访问就有了

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第11张图片

启动vue服务的时候给出了语句检查的警告,直接注销掉

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第12张图片

三.品牌管理实现的增删改查操作测试

增加操作
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第13张图片

删除操作
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第14张图片

修改操作
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第15张图片

查找操作
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第16张图片

四.后端数据显示状态使用前端组件开关按钮展示

4.1 前端先定义展示组件

在显示品牌信息的表单中我们可以将品牌的显示状态通过开关按钮来显示,同时在新增和更新的数据中也这么处理

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第17张图片

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第18张图片

然后将Switch开关放入对应的Table中

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第19张图片
结果展示:

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第20张图片

然后将Switch开关放入对应的Form表单中
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第21张图片

结果展示:

【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第22张图片

4.2 前端将开关数据的状态发送给后端进行处理

先定义一个事件
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第23张图片

完善事件的逻辑,发送数据给后端
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第24张图片

设置开关的默认值以及数据的绑定

更新Switch开关的默认值–》1是默认打开,0是默认关闭
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第25张图片

4.3 后端接受前端发送来的请求并处理

对应的controller接口方法
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第26张图片

4.4 访问测试

更新状态
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第27张图片
刷新后开关还是默认的效果
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据`显示状态`使用前端组件`开关按钮`展示-以及数据处理以及测试】_第28张图片

好了,关于【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据显示状态使用前端组件开关按钮展示-以及数据处理以及测试】就先学习到这里,后续内容持续创作更新中。

你可能感兴趣的:(三高商城系统,品牌管理业务,品牌管理业务的增删改查,开关按钮替换显示状态,前后端分离项目整合)