Categor…

后端接口BrandControllerBrandServiceBrandMapperBrandMapper.xml

1.4.2

后端接口需求分析CategoryBrandDtoCategoryBrandCategoryBrandControllerCategoryBrandServiceCategoryBrandMapperCategoryBrandMapper.xml

1.6.3

前端对接categoryBrand.jscategoryBrand.vue

1.7

后端接口CategoryBrandControllerCategoryBrandServiceCategoryBrandMapperCategoryBrandMapper.xml

1.7.4

前端对接实现思路categoryBrand.jscategoryBrand.vue

1.8

提交修改后端接口CategoryBrandControllerCategoryBrandServiceCategoryBrandMapperCategoryBrandMapper.xml

前端对接categoryBrand.jscategoryBrand.vue

1.9

后端接口CategoryBrandControllerCategoryBrandServiceCategoryBrandMapperCategoryBrandMapper.xml

1.9.3

前端对接categoryBrand.jscategoryBrand.vue

商品规格管理2.1

后端接口ProductSpecProductSpecControllerProductSpecServiceProductSpecMapperProductSpecMapper.xml

2.5.2

前端对接productSpec.jsproductSpec.vue

2.6

后端接口ProductSpecControllerProductSpecServiceProductSpecMapperProductSpecMapper.xml

2.6.4

前端对接实现思路productSpec.jsproductSpec.vue

2.7

后端接口ProductSpecControllerProductSpecServiceProductSpecMapperProductSpecMapper.xml

2.7.5

前端对接productSpec.jsproductSpec.vue

2.8

后端接口ProductSpecControllerProductSpecServiceProductSpecMapperProductSpecMapper.xml

2.8.2

前端对接productSpec.jsproductSpec.vue

商品管理3.1

后端接口需求分析ProductDtoProductProductControllerProductServiceProductMapperProductMapper.xmlProductMapper.xml

分类品牌管理

分类品牌管理就是将分类的数据和品牌的数据进行关联分类数据和品牌数据之间的关系是多对多的关系因此需要单独使用一张数据表来存储该数据。

1.1

1、在后台管理系统中通过系统管理的菜单管理添加分类品牌管理的相关菜单如下所示

在src/views/product的文件夹在该文件夹中加入分类管理页面文件如下所示

在src/router/modules文件夹下创建product.js路由文件文件内容如下所示

const

import(/views/product/category.vue)

const

import(/views/product/brand.vue)

const

import(/views/product/categoryBrand.vue)export

default

label品牌el-selectclassm-2placeholder选择品牌sizesmallstylewidth:

brandList:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-item/el-colel-col

:span12el-form-item

label分类el-cascader:propscategoryPropsstylewidth:

100%//el-form-item/el-col/el-rowel-row

typeprimary

sizesmall重置/el-button/el-row/el-form/divdiv

typesuccess

//el-table-columnel-table-column

propcreateTime

sizesmall删除/el-button/el-table-column/el-tableel-pagination:page-sizes[10,

20,

next:totaltotal//templatescript

setup

http://139.198.127.41:9000/sph/20230506/华为.png},{id:

1,createTime:

http://139.198.127.41:9000/sph/20230506/小米.png}

])const

https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0f423fb60f084b2caade164fae25a9a0.png,parentId:

0,status:

https://lilishop-oss.oss-cn-beijing.aliyuncs.com/665dd952b54e4911b99b5e1eba4b164f.png,parentId:

0,status:

http://139.198.127.41:9000/sph/20230506/小米.png},{id:

1,createTime:

http://139.198.127.41:9000/sph/20230506/华为.png}

])//

需求当页面加载完毕以后需要请求后端接口查询出系统中所有的品牌数据将品牌数据在搜索表单的品牌下拉框中进行展示

1.4.1

com.atguigu.spzx.manager.controller

GetMapping(/findAll)

com.atguigu.spzx.manager.service.impl;

Override

com.atguigu.spzx.manager.mapper

Mapper

在BrandMapper.xml映射文件中添加如下的sql语句

select

需求当页面加载完毕以后需要查询出系统中所对应的所有的一级分类数据将一级分类数据在搜索表单的分类下拉框中进行展示当用户选择某一个一级分类的时候需要将该一级分类下所对应的二级分类查询出来…

分析根据一个分类的id查询该分类下所对应的子分类数据该接口已经编写过了因此只需要针对前端页面进行修改接口

代码实现

FindCategoryByParentId(node.value)data.forEach(function(item)

!item.hasChildren})resolve(data)

返回数据

1、如果在搜索表单中选择了某一个品牌以及分类那么此时就需要按照品牌id和分类id进行查询

1.6.2

1、前端提交请求参数的时候包含了两部分的参数搜索条件参数、分页参数。

搜索条件参数可以通过?拼接到请求路径后面分页参数【当前页码、每页显示的数据条数】可以让前端通过请求路径传递过来

2、后端查询完毕以后需要给前端返回一个分页对象分页对象中就封装了分页相关的参数(当前页数据、总记录数、总页数…)

3、前端进行参数传递的时候不一定会传递搜索条件因此sql语句的编写需要使用到动态sql

CategoryBrandDto

com.atguigu.spzx.model.dto.product

Data

com.atguigu.spzx.model.entity.product

Data

com.atguigu.spzx.manager.controller

RestController

;GetMapping({/page}/{limit})public

Integer

categoryBrandService.findByPage(page,

limit,

com.atguigu.spzx.manager.service.impl;

Service

categoryBrandMapper.findByPage(CategoryBrandDto)

;return

PageInfo(categoryBrandList);}}CategoryBrandMapper

持久层代码实现

com.atguigu.spzx.manager.mapper;

Mapper

在CategoryBrandMapper映射文件中添加如下sql语句

?xml

http://mybatis.org/dtd/mybatis-3-mapper.dtd

mapper

namespacecom.atguigu.spzx.manager.mapper.CategoryBrandMapperresultMap

idcategoryBrandMap

typecom.atguigu.spzx.model.entity.product.CategoryBrand

--sql

idcolumnsid,brand_id,category_id,create_time,update_time,is_deleted/sqlsql

testbrandId

resultMapcategoryBrandMapselectcb.id,cb.brand_id,cb.category_id,cb.create_time,cb.update_time,c.name

categoryName,b.name

在src/api文件夹下创建categoryBrand.js文件如下所示

import

${api_name}/${page}/${limit},method:

get,params:

label品牌el-selectclassm-2placeholder选择品牌sizesmallstylewidth:

100%v-modelqueryDto.brandIdel-optionv-foritem

brandList:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-item/el-colel-col

:span12el-form-item

label分类el-cascader:propscategoryPropsstylewidth:

100%v-modelsearchCategoryIdList//el-form-item/el-col/el-rowel-row

typeprimary

clickfetchData()搜索/el-buttonel-button

sizesmall

clickresetData重置/el-button/el-row/el-form

/divscript

(searchCategoryIdList.value.length

searchCategoryIdList.value[2]}const

data

当用户点击添加按钮的时候那么此时就弹出对话框在该对话框中需要展示添加分类品牌表单。

当用户在该表单中点击提交按钮的时候那么此时就需要将表单进行提交在后端需要将提交过来的表单数据保存到数据库中即可。

如下所示

label品牌el-selectclassm-2placeholder选择品牌sizesmallel-optionv-foritem

brandList:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-itemel-form-item

label分类el-cascader:propscategoryProps//el-form-itemel-form-itemel-button

typeprimary提交/el-buttonel-button

clickdialogVisible

false取消/el-button/el-form-item/el-form

/el-dialogscript

com.atguigu.spzx.manager.controller

PostMapping(/save)

{categoryBrandService.save(categoryBrand);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{categoryBrandMapper.save(categoryBrand)

}CategoryBrandMapper

com.atguigu.spzx.manager.mapper;

Mapper

在CategoryBrandMapper映射文件中添加如下sql语句

insert

(id,brand_id,category_id,create_time,update_time

,is_deleted)

(#{id},#{brandId},#{categoryId},now(),now(),0)

/insert1.7.4

在src/api文件夹下创建categoryBrand.js文件如下所示

保存信息

label品牌el-selectclassm-2placeholder选择品牌sizesmallv-modelcategoryBrand.brandIdel-optionv-foritem

brandList:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-itemel-form-item

label分类el-cascader:propscategoryPropsv-modelcategoryBrand.categoryId//el-form-itemel-form-itemel-button

typeprimary

clicksaveOrUpdate提交/el-buttonel-button

clickdialogVisible

false取消/el-button/el-form-item/el-form

/el-dialogscript

{ElMessage.info(品牌信息必须选择)return}//categoryId为数组[1,2,3]if

(categoryBrand.value.categoryId.length

{ElMessage.info(分类信息必须选择)return}//系统只需要三级分类idcategoryBrand.value.categoryId

categoryBrand.value.categoryId[2]if

{saveData()}

SaveCategoryBrand(categoryBrand.value)dialogVisible.value

falseElMessage.success(操作成功)fetchData()

/script

当用户点击修改按钮的时候那么此时就弹出对话框在该对话框中需要将当前行所对应的分类品牌数据在该表单页面进行展示。

当用户在该表单中点击提交按钮的时候那么此时就需要将表单进行提交在后端需要提交过来的表单数据修改数据库中的即可。

效果如下所示

clickeditShow(scope.row)修改/el-button

setup//进入修改

com.atguigu.spzx.manager.controller

public

{categoryBrandService.updateById(categoryBrand);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{categoryBrandMapper.updateById(categoryBrand)

}CategoryBrandMapper

com.atguigu.spzx.manager.mapper;

Mapper

在CategoryBrandMapper映射文件中添加如下sql语句

update

在src/api文件夹下创建categoryBrand.js文件如下所示

修改信息

{...//系统只需要三级分类idcategoryBrand.value.categoryId

categoryBrand.value.categoryId[2]if

{saveData()}

UpdateCategoryBrandById(categoryBrand.value)dialogVisible.value

falseElMessage.success(操作成功)fetchData()

/script1.9

当点击删除按钮的时候此时需要弹出一个提示框询问是否需要删除数据如果用户点击是那么此时向后端发送请求传递id参数后端接收id参数进行逻辑删除。

效果如下所示

com.atguigu.spzx.manager.controller

DeleteMapping(/deleteById/{id})

public

{categoryBrandService.deleteById(id);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{categoryBrandMapper.deleteById(id)

}CategoryBrandMapper

com.atguigu.spzx.manager.mapper;

Mapper

在CategoryBrandMapper映射文件中添加如下sql语句

update

在src/api文件夹下创建categoryBrand.js文件如下所示

根据id删除数据

${api_name}/deleteById/${id},method:

delete,})

clickremove(scope.row.id)删除/el-button

setup

{ElMessageBox.confirm(此操作将永久删除该记录,

Warning,

DeleteCategoryBrandById(id)ElMessage.success(删除成功)fetchData()}).catch(()

/script2

在电商项目中商品规格指的是商品属性、型号、尺寸、颜色等具体描述商品特点和属性的标准化信息。

2、屏幕尺寸5.5

3、分辨率1920x1080、2960x1440、2532x1170

4、运行内存6GB、8GB、12GB

1、在后台管理系统中通过系统管理的菜单管理添加商品规格管理的相关菜单如下所示

在src/views/product的文件夹中加入商品规格管理页面文件如下所示

在src/router/modules文件夹下创建product.js路由文件文件内容如下所示

const

import(/views/product/category.vue)

const

import(/views/product/brand.vue)

const

import(/views/product/categoryBrand.vue)

const

import(/views/product/productSpec.vue)export

default

规格值[{key:颜色,valueList:[蓝,白,红]],create_time

timestamp

scope.row.specValue:keyindex1stylepadding:

5px;

item1.valueList:keyindex2classdiv-atrr{{

item2

}}/span/div/el-table-columnel-table-column

propcreateTime

sizesmall删除/el-button/el-table-column/el-tableel-pagination:page-sizes[10,

20,

next:totaltotal//templatescript

setup

[{key:内存,valueList:[8G,18G,32G]}]},{id:

1,createTime:

[{key:颜色,valueList:[白色,红色,黑色]},{key:内存,valueList:[8G,18G]}]}

])//

需求说明当产品规格管理页面加载完毕以后就向后端发送分页查询请求后端进行分页查询返回分页结果数据。

2.5.1

com.atguigu.spzx.model.entity.product

Data

com.atguigu.spzx.manager.controller

RestController

RequestMapping(value/admin/product/productSpec)

public

;GetMapping(/{page}/{limit})public

findByPage(

productSpecService.findByPage(page,

limit);return

com.atguigu.spzx.manager.service.impl;

Service

PageInfo(productSpecList);}}ProductSpecMapper

持久层代码实现

com.atguigu.spzx.manager.mapper

Mapper

在ProductSpecMapper.xml映射文件中添加如下sql语句

?xml

http://mybatis.org/dtd/mybatis-3-mapper.dtd

mapper

namespacecom.atguigu.spzx.manager.mapper.ProductSpecMapperresultMap

idproductSpecMap

typecom.atguigu.spzx.model.entity.product.ProductSpec

--sql

idcolumnsid,spec_name,spec_value,create_time,update_time,is_deleted/sqlselect

idfindByPage

在src/api目录下添加productSpec.js文件内容如下所示

import

${api_name}/${page}/${limit},method:

get})

el-paginationv-model:current-pagepageParams.pagev-model:page-sizepageParams.limit:page-sizes[10,

20,

next:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange

/script

GetProductSpecPageList(pageParams.value.page

{item.specValue

用户点击添加按钮此时需要展示一个添加数据的表单对话框用户填写表单数据点击提交按钮请求后端接口完成数据的保存操作。

效果如下所示

2.6.2

//el-form-itemel-form-itemel-button

sizedefault

typesuccess添加新规格/el-button/el-form-itemel-form-item

label

:span10el-inputv-modelitem.keyplaceholder规格stylewidth:

90%;//el-colel-col

:span10el-inputv-modelitem.valueListplaceholder规格值(如:白色,红色)stylewidth:

90%;//el-colel-col

typedanger删除/el-button/el-col/el-row

alignrightel-button

typeprimary提交/el-buttonel-button

clickdialogVisible

false取消/el-button/el-form-item/el-form

/el-dialogscript

com.atguigu.spzx.manager.controller

PostMapping(save)

{productSpecService.save(productSpec);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{productSpecMapper.save(productSpec)

}ProductSpecMapper

com.atguigu.spzx.manager.mapper

Mapper

在ProductSpecMapper.xml映射文件中添加如下sql语句

insert

(id,spec_name,spec_value,create_time,update_time,is_deleted)

values

(#{id},#{specName},#{specValue},now(),now(),0)

/insert2.6.4

在src/api目录下添加productSpec.js文件内容如下所示

保存信息

v-modelproductSpec.specName//el-form-itemel-form-itemel-button

sizedefault

clickaddSpec添加新规格/el-button/el-form-itemel-form-item

label

:span10el-inputv-modelitem.keyplaceholder规格stylewidth:

90%;//el-colel-col

:span10el-inputv-modelitem.valueListplaceholder规格值(如:白色,红色)stylewidth:

90%;//el-colel-col

clickdelSpec(index)删除/el-button/el-col/el-row

alignrightel-button

clicksaveOrUpdate提交/el-buttonel-button

clickdialogVisible

false取消/el-button/el-form-item/el-form

/el-dialogscript

{productSpec.value.specValue.push({})

}//

{productSpec.value.specValue.splice(index

提交表单

需要将productSpec.value.specValue转换成json字符串提交到后端通过clone一个新的对象进行实现const

productSpecClone

JSON.parse(JSON.stringify(productSpec.value))//

将productSpecClone.specValue.valueList转换成数组因为后端需要的数组格式的数据[{key:内存,valueList:[8G,18G,32G]}]//

v-model绑定的数据模型为字符串productSpecClone.specValue.forEach(item

item.valueList

item.valueList.split(,)})productSpecClone.specValue

JSON.stringify(productSpecClone.specValue)console.log(productSpecClone);//

提交表单await

SaveProductSpec(productSpecClone)dialogVisible.value

falseElMessage.success(操作成功)fetchData()}

/script2.7

当用户点击修改按钮的时候那么此时就弹出对话框在该对话框中需要将当前行所对应的产品规格数据在该表单页面进行展示。

当用户在该表单中点击提交按钮的时候那么此时就需要将表单进行提交在后端需要提交过来的表单数据修改数据库中的即可。

效果如下所示

clickeditShow(scope.row)修改/el-button

setup//进入修改

com.atguigu.spzx.manager.controller

public

{productSpecService.updateById(productSpec);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{productSpecMapper.updateById(productSpec);

}ProductSpecMapper

com.atguigu.spzx.manager.mapper

Mapper

在ProductSpecMapper.xml映射文件中添加如下sql语句

update

在src/api目录下添加productSpec.js文件内容如下所示

修改信息

需要将productSpec.value.specValue转换成json字符串提交到后端通过clone一个新的对象进行实现const

productSpecClone

JSON.parse(JSON.stringify(productSpec.value))//

将productSpecClone.specValue.valueList转换成数组因为后端需要的数组格式的数据[{key:内存,valueList:[8G,18G,32G]}]//

v-model绑定的数据模型为字符串productSpecClone.specValue.forEach(item

console.log(typeof

针对规格数据修改完毕以后数据类型有可能会变成string针对string类型的数据将其转换成数组item.valueList

JSON.stringify(productSpecClone.specValue)//

提交表单await

UpdateProductSpecById(productSpecClone)dialogVisible.value

falseElMessage.success(操作成功)fetchData()}

/script2.8

当点击删除按钮的时候此时需要弹出一个提示框询问是否需要删除数据如果用户点击是那么此时向后端发送请求传递id参数后端接收id参数进行逻辑删除。

效果如下所示

com.atguigu.spzx.manager.controller

DeleteMapping(/deleteById/{id})

public

{productSpecService.deleteById(id);return

Result.build(null

com.atguigu.spzx.manager.service.impl;

Override

{productSpecMapper.deleteById(id);

}ProductSpecMapper

com.atguigu.spzx.manager.mapper

Mapper

在ProductSpecMapper.xml映射文件中添加如下sql语句

update

在src/api目录下添加productSpec.js文件内容如下所示

根据id删除数据

${api_name}/deleteById/${id},method:

delete,})

clickremove(scope.row.id)删除/el-button

setup

{ElMessageBox.confirm(此操作将永久删除该记录,

Warning,

DeleteProductSpecById(id)ElMessage.success(删除成功)fetchData()}).catch(()

}/script3

1、在后台管理系统中通过系统管理的菜单管理添加商品管理的相关菜单如下所示

在src/views/product的文件夹中加入商品管理页面文件如下所示

在src/router/modules文件夹下创建product.js路由文件文件内容如下所示

const

import(/views/product/category.vue)

const

import(/views/product/brand.vue)

const

import(/views/product/categoryBrand.vue)

const

import(/views/product/productSpec.vue)

const

import(/views/product/product.vue)export

default

线上状态0-初始值1-上架-1-自主下架,audit_status

tinyint

审核状态0-初始值1-通过-1-未通过,audit_message

varchar(255)

直接导入资料中所提供的product.vue页面以及对应的product.js

3.4

1、如果在搜索表单中选择了某一个品牌以及分类那么此时就需要按照品牌id和分类id进行查询

3.4.2

1、前端提交请求参数的时候包含了两部分的参数搜索条件参数、分页参数。

搜索条件参数可以通过?拼接到请求路径后面分页参数【当前页码、每页显示的数据条数】可以让前端通过请求路径传递过来

2、后端查询完毕以后需要给前端返回一个分页对象分页对象中就封装了分页相关的参数(当前页数据、总记录数、总页数…)

3、前端进行参数传递的时候不一定会传递搜索条件因此sql语句的编写需要使用到动态sql

ProductDto

com.atguigu.spzx.model.dto.product;

Data

com.atguigu.spzx.model.entity.product

Data

com.atguigu.spzx.manager.controller;

RestController

RequestMapping(value/admin/product/product)

public

productService.findByPage(page,

limit,

com.atguigu.spzx.manager.service.impl;

Service

productMapper.findByPage(productDto)

;return

PageInfo(productList);}}ProductMapper

持久层代码实现

在ProductMapper.xml映射文件中添加如下的sql语句

?xml

http://mybatis.org/dtd/mybatis-3-mapper.dtd

mapper

namespacecom.atguigu.spzx.manager.mapper.ProductMapperresultMap

idproductMap

typecom.atguigu.spzx.model.entity.product.Product

--sql

idcolumnsid,name,brand_id,category1_id,category2_id,category3_id,unit_name,slider_urls,spec_value,status,audit_status,audit_message,create_time,update_time,is_deleted/sqlsql

testbrandId

productMapper.findByPage(productDto)

return

在ProductMapper.xml映射文件中添加如下的sql语句

?xml

http://mybatis.org/dtd/mybatis-3-mapper.dtd

mapper

namespacecom.atguigu.spzx.manager.mapper.ProductMapperresultMap

idproductMap

typecom.atguigu.spzx.model.entity.product.Product

--sql

idcolumnsid,name,brand_id,category1_id,category2_id,category3_id,unit_name,slider_urls,spec_value,status,audit_status,audit_message,create_time,update_time,is_deleted/sqlsql

testbrandId