1.數據庫表設計
1.多表關聯設計
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
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前面引入
<!-- 品牌和分類關聯的對話框 --><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 : [ ] , popCatelogSelectVisible : false , props : { value : "id" , label : "name" , children : "childrenCategories" } , categorys : [ ] , brandId : 0 ,
3.方法顯示對話框
3.顯示關聯分類的級聯菜單
1.添加方法,獲取分類列表,帶層級
getCategories ( ) { this . $http ( { url : process. env. COMMODITY_BASEPATH + '/commodity/category/list/tree' , method : 'get' } ) . then ( ( { data} ) => { this . categorys = data. data; } ) }
2.初始化時調用這個方法
3.結果展示
5.添加分類關聯
1.前端 brand.vue
1.點擊關聯分類按鈕,將品牌id放到數據池的brandId中
2.編寫addBrandCategoryRelation,發送新增關聯的請求
addBrandCategoryRelation ( ) { this . $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 新增方法
void saveRelationById ( Long brandId, Long categoryId) ;
2.CategoryBrandRelationServiceImpl.java 實現方法
@Override public void saveRelationById ( Long brandId, Long 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" ) 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.測試
4.兩個小問題
1.添加成功之后關閉彈窗
2.下一次點擊新增關聯時不保存上一次記錄
6.顯示分類關聯列表
1.后端sunliving-commodity模塊
1.service層
1.CategoryBrandRelationService.java
List < CategoryBrandRelationEntity > getCateRelationTableDataById ( Long brandId) ;
2.CategoryBrandRelationServiceImpl.java
@Override public List < CategoryBrandRelationEntity > getCateRelationTableDataById ( Long brandId) { return categoryBrandRelationDao. selectList ( new QueryWrapper < CategoryBrandRelationEntity > ( ) . eq ( "brand_id" , brandId) ) ; }
2.controller層
@RequestMapping ( "/list/{brandId}" ) public R getCateRelationTableDataById ( @PathVariable ( "brandId" ) Long brandId) { return R . ok ( ) . put ( "data" , categoryBrandRelationService. getCateRelationTableDataById ( brandId) ) ; }
3.測試
2.前端 brand.vue
1.找到列表綁定的屬性
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 = [ ] } } ) this . brandId = idthis . cateRelationDialogVisible = true }
3.查看結果
3.幾個小問題
1.在新增關聯之后并沒有刷新分類列表
1.只需在addBrandCategoryRelation這個新增關聯的方法操作成功后刷新表格即可
2.展示
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 ; }
2.重啟測試
7.刪除分類關聯列表
1.后端sunliving-commodity模塊
1.CategoryBrandRelationController.java 已經提供了根據id刪除的接口
2.前端brand.vue
1.發現移除按鈕,使用的是插槽機制,可以直接獲取當前行的id和brandId
2.編寫deleteCateRelationHandle方法
deleteCateRelationHandle ( id, brandId ) { this . $http ( { url : process. env. COMMODITY_BASEPATH + '/commodity/categorybrandrelation/delete' , method : 'post' , 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.測試