分类和品牌关联

news/2024/7/25 2:30:42/文章来源:https://blog.csdn.net/m0_64637029/article/details/139158147

文章目录

    • 1.数据库表设计
        • 1.多表关联设计
        • 2.创建表
    • 2.使用renren-generator生成CRUD
        • 1.基本配置检查
          • 1.generator.properties
          • 2.application.yml
        • 2.生成代码
          • 1.进入localhost:81生成代码
          • 2.将main目录覆盖sunliving-commodity模块的main目录
        • 3.代码检查
          • 1.注释掉CategoryBrandRelationController.java的@RequiresPermissions注解即可
          • 2.接口测试(通过网关访问)
            • 1.http://localhost:5050/api/sunliving-commodity/commodity/categorybrandrelation/list
            • 2.http://localhost:5050/api/sunliving-commodity/commodity/categorybrandrelation/save
    • 3.第五次部署
        • 1.后端部署
          • 1.由于没有添加新模块,所以不需区分多环境,网关也不需要改
          • 2.将sunliving-commodity模块激活为prod
          • 3.maven打包
          • 4.测试执行
          • 5.部署上线
          • 6.启动成功
        • 2.前端部署
          • 1.根目录打包
          • 2.切换到node16,dist目录执行serve
          • 3.Nacos将上线四个后端项目
          • 4.测试无误
          • 5.部署上线
          • 6.测试依然无误
    • 4.前端显示界面 brand.vue
        • 1.新增关联分类的按钮
          • 1.新增按钮
          • 2.实现方法
        • 2.引入品牌和分类关联的对话框
          • 1.最后的div前面引入
          • 2.数据池中定义信息
          • 3.方法显示对话框
        • 3.显示关联分类的级联菜单
          • 1.添加方法,获取分类列表,带层级
          • 2.初始化时调用这个方法
          • 3.结果展示
    • 5.添加分类关联
        • 1.前端 brand.vue
          • 1.点击关联分类按钮,将品牌id放到数据池的brandId中
          • 2.编写addBrandCategoryRelation,发送新增关联的请求
        • 2.后端 sunliving-commodity模块
          • 1.service层
            • 1.CategoryBrandRelationService.java 新增方法
            • 2.CategoryBrandRelationServiceImpl.java 实现方法
          • 2.controller层
            • CategoryBrandRelationController.java 编写接口
        • 3.测试
        • 4.两个小问题
          • 1.添加成功之后关闭弹窗
          • 2.下一次点击新增关联时不保存上一次记录
    • 6.显示分类关联列表
        • 1.后端sunliving-commodity模块
          • 1.service层
            • 1.CategoryBrandRelationService.java
            • 2.CategoryBrandRelationServiceImpl.java
          • 2.controller层
          • 3.测试
        • 2.前端 brand.vue
          • 1.找到列表绑定的属性
          • 2.找到点击关联按钮触发的方法,为属性赋值
          • 3.查看结果
        • 3.几个小问题
          • 1.在新增关联之后并没有刷新分类列表
            • 1.只需在addBrandCategoryRelation这个新增关联的方法操作成功后刷新表格即可
            • 2.展示
          • 2.已经有关联了,但是还会重复插入的问题
            • 1.修改后端CategoryBrandRelationServiceImpl.java的saveRelationById方法,先检测是否表中已经有关联信息了
            • 2.重启测试
    • 7.删除分类关联列表
        • 1.后端sunliving-commodity模块
          • 1.CategoryBrandRelationController.java 已经提供了根据id删除的接口
        • 2.前端brand.vue
          • 1.发现移除按钮,使用的是插槽机制,可以直接获取当前行的id和brandId
          • 2.编写deleteCateRelationHandle方法
          • 3.测试

1.数据库表设计

1.多表关联设计

image-20240418195253885

2.创建表
use sunliving_commodity;CREATE TABLE commodity_category_brand_relation
(id            BIGINT NOT NULL AUTO_INCREMENT,brand_id      BIGINT COMMENT '品牌 id',category_id   BIGINT COMMENT '分类 id',brand_name    VARCHAR(255) COMMENT '品牌名称',category_name VARCHAR(255) COMMENT '分类名称',PRIMARY KEY (id)
) CHARSET = utf8mb4 COMMENT ='品牌分类关联表';SELECT *
FROM `commodity_category_brand_relation`;

2.使用renren-generator生成CRUD

1.基本配置检查
1.generator.properties

image-20240418195944810

2.application.yml

image-20240418200023765

2.生成代码
1.进入localhost:81生成代码

image-20240418200124912

2.将main目录覆盖sunliving-commodity模块的main目录

image-20240418200502230

image-20240418200552845

3.代码检查
1.注释掉CategoryBrandRelationController.java的@RequiresPermissions注解即可

image-20240418200917839

2.接口测试(通过网关访问)
1.http://localhost:5050/api/sunliving-commodity/commodity/categorybrandrelation/list

image-20240418201554073

2.http://localhost:5050/api/sunliving-commodity/commodity/categorybrandrelation/save

image-20240418202057349

3.第五次部署

1.后端部署
1.由于没有添加新模块,所以不需区分多环境,网关也不需要改
2.将sunliving-commodity模块激活为prod
3.maven打包

image-20240418203435669

4.测试执行

image-20240418203605883

5.部署上线

image-20240418203829855

6.启动成功

image-20240418203911794

2.前端部署
1.根目录打包

image-20240418204118744

2.切换到node16,dist目录执行serve

image-20240418204217618

3.Nacos将上线四个后端项目

image-20240418204330705

4.测试无误

image-20240418204522400

5.部署上线

image-20240418204826925

6.测试依然无误

image-20240418204953485

4.前端显示界面 brand.vue

1.新增关联分类的按钮
1.新增按钮

image-20240419093623315

2.实现方法

image-20240419093711833

2.引入品牌和分类关联的对话框
1.最后的div前面引入
    <!-- 品牌和分类关联的对话框 --><el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="30%"><el-popover placement="right-end" v-model="popCatelogSelectVisible"><!-- <category-cascader :catelogPath.sync="catelogPath"></category-cascader>--><!-- 这里我们加入分类的 Cascader 级联选择器, 前面我们使用过 --><el-cascaderv-model="cascadedCategoryId" :options="categorys" :props="props"></el-cascader><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取 消</el-button><el-button type="primary" size="mini" @click="addBrandCategoryRelation"> 确 定</el-button></div><el-button slot="reference">新增关联</el-button></el-popover><el-table :data="cateRelationTableData" style="width: 100%"><el-table-column prop="id" label="#"></el-table-column><el-table-column prop="brandName" label="品牌名"></el-table-column><el-table-column prop="categoryName" label="分类名"></el-table-column><el-table-column fixed="right" header-align="center" align="center" label="操作"><template slot-scope="scope"><el-buttontype="text" size="small" @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)">移除</el-button></template></el-table-column></el-table><span slot="footer" class="dialog-footer"><el-button @click="cateRelationDialogVisible = false">取 消</el-button><el-button type="primary" @click="cateRelationDialogVisible = false"> 确 定</el-button></span></el-dialog>
2.数据池中定义信息
      cateRelationDialogVisible: false, // 品牌和分类关联的对话框cateRelationTableData: [], // 品牌和分类关联的表格数据cascadedCategoryId: [], // 级联选择器的值,从 categories 中取popCatelogSelectVisible: false, // 是否显示分类选择器props: { //显示返回的家居分类的哪些字段/信息value: "id", // 级联选择器的值label: "name", // 级联选择器的显示标签children: "childrenCategories" // 级联选择器的子选项},categorys: [], //所有的家居分类brandId: 0, //品牌 id, 默认为 0
3.方法显示对话框

image-20240419093946923

image-20240419094002089

3.显示关联分类的级联菜单
1.添加方法,获取分类列表,带层级
    // 获取分类列表(带层级)getCategories() {this.$http({url: process.env.COMMODITY_BASEPATH + '/commodity/category/list/tree',method: 'get'}).then(({data}) => { // 解构了datathis.categorys = data.data;})}
2.初始化时调用这个方法

image-20240419094516747

3.结果展示

image-20240419094247215

5.添加分类关联

1.前端 brand.vue
1.点击关联分类按钮,将品牌id放到数据池的brandId中

image-20240419095645659

2.编写addBrandCategoryRelation,发送新增关联的请求
    // 新增关联addBrandCategoryRelation() {// 获取品牌 id 和分类 idthis.$http({// 向品牌分类关联表的接口发送请求,要求得到品牌名和分类名url: process.env.COMMODITY_BASEPATH + '/commodity/categorybrandrelation/relation',method: 'post',params: this.$http.adornParams({brandId: this.brandId,categoryId: this.cascadedCategoryId[this.cascadedCategoryId.length - 1]})}).then(({data}) => {if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500})this.cateRelationDialogVisible = false} else {this.$message.error(data.msg)}})}
2.后端 sunliving-commodity模块
1.service层
1.CategoryBrandRelationService.java 新增方法
    /*** 获取品牌分类关联信息* @param brandId* @param categoryId* @return*/void saveRelationById(Long brandId, Long categoryId);
2.CategoryBrandRelationServiceImpl.java 实现方法

image-20240419110605445

    @Overridepublic void saveRelationById(Long brandId, Long categoryId) {// 根据brandId和categoryId查询品牌名和分类名String brandName = brandDao.selectById(brandId).getName();String categoryName = categoryDao.selectById(categoryId).getName();// 插入到关联表中CategoryBrandRelationEntity categoryBrandRelationEntity = new CategoryBrandRelationEntity();categoryBrandRelationEntity.setBrandName(brandName);categoryBrandRelationEntity.setCategoryId(categoryId);categoryBrandRelationEntity.setCategoryName(categoryName);categoryBrandRelationEntity.setBrandId(brandId);categoryBrandRelationDao.insert(categoryBrandRelationEntity);}
2.controller层
CategoryBrandRelationController.java 编写接口
    /*** 关联*/@RequestMapping("/relation")// @RequiresPermissions("commodity:categorybrandrelation:list")public R relation(@RequestParam Map<String, Object> params){long brandId = Long.parseLong(params.get("brandId").toString());long categoryId = Long.parseLong(params.get("categoryId").toString());categoryBrandRelationService.saveRelationById(brandId, categoryId);return R.ok();}
3.测试

image-20240419110629470

image-20240419110619989

4.两个小问题
1.添加成功之后关闭弹窗

image-20240419110915704

image-20240419110935565

2.下一次点击新增关联时不保存上一次记录

image-20240419111307317

image-20240419111259069

6.显示分类关联列表

1.后端sunliving-commodity模块
1.service层
1.CategoryBrandRelationService.java
    /*** 根据品牌id获取关联的分类* @param brandId* @return*/List<CategoryBrandRelationEntity> getCateRelationTableDataById(Long brandId);
2.CategoryBrandRelationServiceImpl.java
    @Overridepublic List<CategoryBrandRelationEntity> getCateRelationTableDataById(Long brandId) {return categoryBrandRelationDao.selectList(new QueryWrapper<CategoryBrandRelationEntity>().eq("brand_id", brandId));}
2.controller层
    /*** 根据brandId查询关联的分类*/@RequestMapping("/list/{brandId}")// @RequiresPermissions("commodity:categorybrandrelation:list")public R getCateRelationTableDataById(@PathVariable("brandId") Long brandId){// 根据brandId查询关联的分类return R.ok().put("data", categoryBrandRelationService.getCateRelationTableDataById(brandId));}
3.测试

image-20240419113554394

2.前端 brand.vue
1.找到列表绑定的属性

image-20240419113756264

2.找到点击关联按钮触发的方法,为属性赋值
    // 关联分类relateCategoryHandle(id) {// 显示分类信息this.$http({url: process.env.COMMODITY_BASEPATH + '/commodity/categorybrandrelation/list/' + id,method: 'get'}).then(({data}) => {if (data && data.code === 0) {this.cateRelationTableData = data.data} else {this.cateRelationTableData = []}})// 点击关联分类按钮,得到品牌 id,并放到 brandId 中this.brandId = idthis.cateRelationDialogVisible = true}
3.查看结果

image-20240419114728799

3.几个小问题
1.在新增关联之后并没有刷新分类列表
1.只需在addBrandCategoryRelation这个新增关联的方法操作成功后刷新表格即可

image-20240419115339506

2.展示

image-20240419115608631

2.已经有关联了,但是还会重复插入的问题
1.修改后端CategoryBrandRelationServiceImpl.java的saveRelationById方法,先检测是否表中已经有关联信息了
        // 查询一下是否已经存在关联关系,如果有就不插入List<CategoryBrandRelationEntity> categoryBrandRelationEntities = categoryBrandRelationDao.selectList(new QueryWrapper<CategoryBrandRelationEntity>().eq("brand_id", brandId).eq("category_id", categoryId));if (categoryBrandRelationEntities.size() > 0) {return;}

image-20240419120159719

2.重启测试

image-20240419120235271

image-20240419120248294

7.删除分类关联列表

1.后端sunliving-commodity模块
1.CategoryBrandRelationController.java 已经提供了根据id删除的接口

image-20240419134427521

2.前端brand.vue
1.发现移除按钮,使用的是插槽机制,可以直接获取当前行的id和brandId

image-20240419134558267

2.编写deleteCateRelationHandle方法
    // 根据id删除品牌和分类的关联deleteCateRelationHandle(id, brandId) {this.$http({url: process.env.COMMODITY_BASEPATH + '/commodity/categorybrandrelation/delete',method: 'post',// 数组的形式传入id参数data: this.$http.adornData([id], false)}).then(({data}) => {if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500})this.relateCategoryHandle(brandId)} else {this.$message.error(data.msg)}})}
3.测试

image-20240419134857206

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

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

相关文章

沃飞携AE200真机亮相澳门,全方位赋能城市低空出行

5月22日-25日&#xff0c;第四届BEYOND国际科技创新博览会&#xff08;BEYOND Expo 2024&#xff09;在澳门盛大举行。吉利沃飞长空携旗下全自研产品AE200真机亮相&#xff0c;吸引了现场众多领导嘉宾以及媒体、观众的关注。 作为亚洲顶尖的年度科技盛会&#xff0c;本届BEYOND…

面试-软件工程与设计模式相关,Spring简介

面试-软件工程与设计模式相关&#xff0c;Spring简介 1.编程思想1.1 面向过程编程1.2 面向对象编程1.2.1 面向对象编程三大特征 1.3 面向切面编程1.3.1 原理1.3.2 大白话&#xff1f;1.3.3 名词解释1.3.4 实现 2. 耦合与内聚2.1 耦合性2.2 内聚性 3. 设计模式3.1 设计模型七大原…

nodejs安装配置

nodejs安装 打开nodejs官网(https://nodejs.org/en/download/package-manager)&#xff0c;参考安装步骤操作。 更新镜像源 输入以下命令&#xff0c;将npm的镜像源设置为淘宝镜像。网上资料中&#xff0c;淘宝镜像地址多为https://registry.npm.taobao.org&#xff0c;这个…

js之图片上传

话不多说&#xff0c;直接上干货&#xff0c;注释在代码里面 下面是效果图和代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

景源畅信:新手做抖音运营难不难?

在这个信息爆炸的时代&#xff0c;社交媒体平台如抖音已经成为了人们日常生活中不可或缺的一部分。随着抖音的兴起&#xff0c;越来越多的人开始尝试进入这个领域&#xff0c;希望通过抖音运营实现自己的价值。然而&#xff0c;对于新手来说&#xff0c;抖音运营是否真的容易呢…

现代前端工程化实践:Git、Husky、Commitlint与PNPM的协同作战

引言 Git Husky 与 Commitlint 是两个在 Git 工作流程中非常实用的工具&#xff0c;它们可以帮助团队维护代码质量和提交规范。Husky 是一个 Git 钩子管理器&#xff0c;允许你在仓库级别方便地配置钩子脚本&#xff1b;而 Commitlint 则是用来规范 Git 提交信息的工具&#x…

Bootstrap5

Bootstrap5-容器 容器是Bootstrap—个基本的构建块&#xff0c;它包含、填充和对齐给定设备或视口中的內容。 Bootstrap 需要一个容器元素来包裏网站的内容 我们可以使用以下两个容器类&#xff1a; .container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用…

左外连接和右外连接的区别?举例说明——以力扣sql 1378. 使用唯一标识码替换员工ID为例

左外连接&#xff08;LEFT JOIN&#xff09;和右外连接&#xff08;RIGHT JOIN&#xff09;的主要区别在于哪个表的所有行会保留在结果集中 1. 左外连接 (LEFT JOIN) 左外连接会返回左表中的所有行以及右表中符合连接条件的行。如果右表中没有匹配的行&#xff0c;结果集中右…

剖析【C++】——类与对象(上)超详解——小白篇

目录 1.面向过程和面向对象的初步认识 1.面向过程&#xff08;Procedural Programming&#xff09; 2.面向对象&#xff08;Object-Oriented Programming&#xff09; 概念&#xff1a; 特点&#xff1a; 总结 2.C 类的引入 1.从 C 语言的结构体到 C 的类 2.C 中的结构…

我的世界开服保姆级教程

前言 Minecraft开服教程 如果你要和朋友联机时&#xff0c;可以选择的方法有这样几种&#xff1a; 局域网联机&#xff1a;优点&#xff1a;简单方便&#xff0c;在MC客户端里自带。缺点&#xff1a;必须在同一局域网内。 有些工具会带有联机功能&#xff1a;优点&#xff1a;一…

【技术分享】Maven常用配置

一、Maven简介 &#xff08;一&#xff09;为什么使用 Maven 由于 Java 的生态非常丰富&#xff0c;无论你想实现什么功能&#xff0c;都能找到对应的工具类&#xff0c;这些工具类都是以 jar 包的形式出现的&#xff0c;例如 Spring&#xff0c;SpringMVC、MyBatis、数据库驱…

Autodl如何进行实例使用(同区)

一、首先找到之前保存的实例 二、点击更多然后选择克隆实例 三、选择是否要保存之前的数据盘 四、选择空余的GPU进行创建即可

LLaMa系列模型详解(原理介绍、代码解读):LLaMA 2

LLaMA 2 大型语言模型&#xff08;LLMs&#xff09;作为高度能力的人工智能助手&#xff0c;在需要跨多个领域专家知识的复杂推理任务中表现出巨大潜力&#xff0c;包括编程和创意写作等专业领域。它们通过直观的聊天界面与人类互动&#xff0c;这导致了快速和广泛的公众采用。…

Android Studio自带Profiler工具进行CPU资源及线程问题分析步骤

1、运行需要检测CPU资源问题与线程问题的程序 这里以“com.example.opengltest”程序为例。 2、点击Profiler按钮 3、点击SESIONS ""号按钮选择设备&#xff0c;选择对应设备下的应用或进程 4、双击CPU区块 5、选择Trace config选项&#xff0c;选择“Java/Kotli…

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 &#x1f34e;该题涉及的小技巧&#xff1a;&#x1f425; &#x1f427;①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5&#xff0c;这种情况 5 只能统计一次噢&#x1f192; 解题思路: &#x1f427…

前端项目使用docker编译发版和gitlab-cicd发版方式

项目目录 app/ ├── container/ │ ├── init.sh │ ├── nginx.conf.template ├── src/ ├── .gitlab-ci.yml └── deploy.sh └── Dockerfile └── Makefilecontainer目录是放nginx的配置文件&#xff0c;给nginx镜像使用 .gitlab-ci.yml和Makefile是c…

vue2的方法与监听

vue2的方法 不可以使用箭头函数 <template> <div><div>{{sum2()}}</div><button click"add">add</button> </div></template><script> export default {data(){return{name:"张三",num:20,num2:3…

kafka监控配置和告警配置——筑梦之路

kafka_exporter项目地址&#xff1a;https://github.com/danielqsj/kafka_exporter docker-compose部署kafka_exporter # docker-compose部署多个kafka_exporter&#xff0c;每个exporter对接一个kafka# cat docker-compose.ymlversion: 3.1 services:kafka-exporter-opslogs…

基于STM32实现智能空气净化系统

目录 引言环境准备智能空气净化系统基础代码示例&#xff1a;实现智能空气净化系统 空气质量传感器数据读取风扇和滤网控制显示系统用户输入和设置应用场景&#xff1a;家庭空气净化与健康管理问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌入式系统中…

【三数之和】python,排序+双指针

暴力搜索3次方的时间复杂度&#xff0c;大抵超时 遇到不会先排序 排序双指针 上题解 照做 class Solution:def threeSum(self, nums: List[int]) -> List[List[int]]:res[]nlen(nums)#排序降低复杂度nums.sort()k0#留两个位置给双指针i,jfor k in range(n-2):if nums[k]…