第3章 商品模板与分类管理

学习目标

使用代码生成器-完成基础代码生成
完成规格参数模板管理
完成商品分类管理
完成图片库管理
项目序列-3：https://github.com/Jonekaka/javaweb-qingcheng-3-78

1. 代码生成器

对于一个数据库的操作无非是增删改查，甚至列表在web中如何表现也大同小异，
那么能否给出一个数据库，根据ssm等框架自动生成基础的操作代码和web页面呢？

1.1 介绍

代码生成器
git项目已添加
只需要提供数据库和表，选择内置的spring架构模板，可自动建立maven工程，
自动创建增删改查方法，接口，以及数据对象
自动生成html页面
自动生成数据库表结构的介绍文档
模板有SSM+dubbo 、springBoot+springCloud+springData 、前后端分离的vue+elementUI 模板、wagger
API模板、数据库文档模板等。 也可以自定义模板
https://gitee.com/chuanzhiliubei/codeutil

1.2 代码生成

通过代码生成器完成参数模板，商品分类，图片库管理

1.2.1 安装

1. 安装jdk1.8 并配置环境变量
2. 双击codeutil-2.5.jar 或start.bat运行程序（注意不要放在有中文和空格的目录运行）

1.2.2 使用步骤

1. 建立数据库表，并设置字段的中文备注（中文备注用于作为生成表格的标题）
2. 双击codeutil-2.5.jar 或start.bat运行程序，输入用户名和密码，点击测试连接，选择数据库表后点击“下一步”。
3. 选择模板，输入基本信息，注意：包名一定要3级，例如 com.qingcheng.goods 前两级为模块名称，第三级为模块名称。
4. 点击生成后，用IDE 打开代码后即可运行。
5. 选择数据表
   
   生成工程，选择模板db所在位置，选择模板，选择生成路径，设置包信息
   
   对于数据库，选择goods，order，config，system，user，都集中到一个项目中
   如图代码已经自动生成
   
   数据库增删改查全部可用，且页面也自动生成
   因为后续的代码为自动生成，多次创建的工程建立关联需要重写父类pom.xml

 <modules><module>qingcheng_common</module><module>qingcheng_pojo</module><module>qingcheng_service_user</module><module>qingcheng_service_goods</module><module>qingcheng_service_business</module><module>qingcheng_service_config</module><module>qingcheng_service_order</module><module>qingcheng_service_system</module><module>qingcheng_interface</module><module>qingcheng_web_manager</module><module>qingcheng_common_service</module><module>qingcheng_common_web</module></modules>

安装parent，开启service与web-manger的tomcat，即可运行
此时对于数据库的增删改查皆可以有自动生成的web页面操作

1.2.3 分库分表工程生成

青橙项目采用分库分表设计，有多个数据库
可以分别连接每一个数据库生成代码，生成代码到同一位置，这样公共模块不变。
最后修改pom.xml的模块列表，将所有生成的模块都加入即可。
代码已经生成，接下来就需要将公共模块安装一下
直接安装parent也行

打开页面即可看到效果，以第二章开发为例

可以轻易的看到之前开发的功能自动实现了，而且还有自动的页面生成
如这个页面也是自动生成的

当然，对于生成的页面需要微调，比如某些功能未实现或者一些冗余的功能

模板对于上传功能也考虑到了，有些注释是未开放的功能，放开注释即可
注意native.do是本地上传，oss需要改为云服务上传，修改上传的路径

这样看来似乎某些页面与功能也需要修改，比较麻烦，然而，对于巨量数据表可以快速实现
如果对开发项目熟悉，可以快速完成基本功能，只需微调即可

2. 规格参数模板管理

2.1 概念与需求

2.1.1 概念解析

了解需求前我们先弄懂三个概念
如何去描述一个商品，让看到的人看到参数以后立刻对其有一个清楚的认识

规格： 规格是用于区分同一商品的属性。 例如手机的网络规格，是一个大的概念
规格选项：规格选项是规格的具体值。比如网络制式是规格，它选项有移动4G、联通4G等。

参数： 参数是用于描述商品的属性。同一规格的手机，参数未必相同，例如手机的核数
参数选项：参数选项是参数的可选值。比如核数，包括参数选项有2核 、4核、8核

模板：类似于商品类型。汇总规格和参数的。需要在输入前定义出来，而不是每次录入时重复录入
例如手机包括网络制式、屏幕尺寸等规格，还包括核数、前置摄像头像素、后置摄像头
像素等。

模板

规格

参数

2.1.2 需求分析

（1）根据已经生成的代码，实现商品类别模板的增删改查，对某类商品的规格与参数进行管理
（2）需要几个表才能操作商品的规格，参数，模板？

2.2 表结构分析

tb_template （模板表）

字段名称	字段含义	字段类型	字段长度	备注
id	ID	INT
name	模板名称	VARCHAR
spec_num	规格数量	INT
para_num	参数数量	INT

tb_spec （规格表）

字段名称	字段含义	字段类型	字段长度	备注
id	ID	INT
name	名称	VARCHAR
options	规格选项	VARCHAR
seq	排序	INT
template_id	模板ID	INT

tb_para （参数表）

字段名称	字段含义	字段类型	字段长度	备注
id	id	INT
name	名称	VARCHAR
options	选项	VARCHAR
seq	排序	INT
template_id	模板ID	INT

2.3 代码实现

2.3.1 规格参数模板列表查询

查看自动生成的模板界面

修改将其与规格和参数的关联
实现模板对规格和参数的管理
最终效果如图

（1）修改template.html页面，添加方法
传递参数

goSpec(id){ //规格管理location.href="spec.html?templateId="+id;},goPara(id){ //参数管理location.href="para.html?templateId="+id;}

在表格的模板列中添加两个按钮

<el‐button @click="goSpec(scope.row.id)" type="text" size="small">规格管理</el‐button>
<el‐button @click="goPara(scope.row.id)" type="text" size="small">参数管理</el‐button>

适当调整列宽度
（2）修改spec.html ，引入util.js,规格
其提供了一个方法，从地址栏中得到参数id
用来修改同一id下的规格
查看自动生成的界面

<script src="/js/util.js"></script>

util.js中提供了可以获取地址栏参数的方法getQueryString
修改created钩子函数，添加代码
得到id后就可以查询参数
解释参数

this.searchMap={templateId: getQueryString("templateId")};

当进入局部之后，可以返回到主界面
添加返回按钮

<el‐button type="primary" onclick="location.href='template.html'">返回模板</el‐button>

效果如图

进入之后即可返回模板列表

（3）修改parameter.html，步骤同spec.html
查看自动生成的界面

2.3.2 添加规格

规格页面中，看自动生成的界面是否有瑕疵

1.点击新增时，出现了模板id，事实上修改的是该模板下的规格，模板id应该默认，不应该作为可选项出现
2.规格选项应该不止一个，应该作为文本域出现，而非行列
（1）修改spec.html页面，data添加属性templateId

templateId: 0

（2）created()钩子函数添加代码

this.templateId=getQueryString("templateId");

（3）修改新增按钮
自带模板id
第一个templateId是实体类的属性，第二个是刚才定义的0默认属性，当新增的时候就把当前模板id覆盖0，0-42.。。

<el‐button type="primary" @click="formVisible=true;pojo={templateId:templateId}">新增</el‐button>

（4）删除表单中模板id
（5）将表单中规格选项文本框改为文本域
从eui6查看文本域控件

textarea文本域
autosize="{ minRows: 4, maxRows: 15}"设置文本域可以自动调节大小

<el‐form‐item label="规格选项">
<el‐input v‐model="pojo.options" type="textarea" :autosize="{ minRows:4, maxRows: 15}"> </el‐input>
</el‐form‐item>

但是存在问题，多个属性多个换行影响展示，需要逗号分割，但逗号影响属性编辑？
只需要一个转换即可
当保存的时候回车变成逗号存储到数据库
当查看的时候逗号变成回车显示
（6）修改save方法，在开始处添加代码 ，将回车符\n转换为逗号","

this.pojo.options= this.pojo.options.replace(/\n/g,","); //回车替换为逗号

（7）修改edit方法，在回调处添加代码，将逗号“，”替换为回车符\n

this.pojo.options= this.pojo.options.replace(/,/g,"\n"); //逗号替换为回车符

保存后，用逗号代替多行显示

修改时显示换行

2.3.3 添加参数

思路同"添加规格"，代码略

2.3.4 规格与参数数量统计

进入模板列后可以看到规格和参数数量

需求：在每次添加和删除规格参数时，对规格和参数数量进行更新
实现思路：在每次添加规格和参数时，修改模板表对应的字段值，让其加1，在删除规格和参数时，修改模板表对应的字段值，让其减1
代码实现：
（1）修改TemplateServiceImpl的add方法
新增一个模板，两个参数必定是0

/*** 新增* @param template*/
public void add(Template template) {template.setSpecNum(0);template.setParaNum(0);templateMapper.insert(template);}

（2）修改SpecServiceImpl的add方法
规格模板
插入模板，
根据主键获得模板规格数+1，更新
注意事务注解

/*** 新增* @param spec*/
@Transactional
public void add(Spec spec) {specMapper.insert(spec);
//将模板中的规格数量+1Template template =templateMapper.selectByPrimaryKey(spec.getTemplateId());template.setSpecNum( template.getSpecNum()+1 );templateMapper.updateByPrimaryKey(template);}

（3）修改SpecServiceImpl的delete方法
根据id查询对象，执行反操作

/*** 删除* @param id*/
@Transactional
public void delete(Integer id) {//将模板中的规格数量减一Spec spec = specMapper.selectByPrimaryKey(id);Template template =templateMapper.selectByPrimaryKey(spec.getTemplateId());template.setSpecNum( template.getSpecNum()‐1 );templateMapper.updateByPrimaryKey(template);specMapper.deleteByPrimaryKey(id);}

（4）修改SpecServiceImpl类的注解@Service
使用dubbo的service需要解决的问题，
分布式产生的问题，后面再解释

@Service(interfaceClass = SpecService.class)

此时就可以对模板内部的规格与参数进行增删改查了。且模板的数量统计自动更新

3. 商品分类

商品分类的目的在于快速找到商品
一般划分为三级

3.1 需求分析

那么后台是如何展示的？

同样有三级商品分类

3.2 表结构分析

分类是逐级下派的
利用上级id查询
指定的分类关联到模板
tb_category （商品分类表）

字段名称	字段含义	字段类型	字段长度	备注
id	分类ID	INT
name	分类名称	VARCHAR
goods_num	商品数量	INT
is_show	是否显示	CHAR
is_menu	是否导航	CHAR
seq	排序	INT
parent_id	上级ID	INT
template_id	模板ID	INT

3.3 代码实现

3.3.1 三级分类列表展示

查看软件自动生成器生成的页面

进行修改
最终效果如图
可返回上级，查看下级

修改html
（1）查询一级分类列表。修改searchMap的属性 ，删除查询表单
默认进入一级分类

searchMap: {parentId:0}

这样打开category.html就看到一级分类的列表了

（2）查询下级列表：新增方法
事实上仍然是同一个页面，只是加载了不同的数据

queryByParentId(parentId){this.searchMap.parentId=parentId;this.fetchData();//加载数据},

表格的模板列新增"查询下级"按钮

<el‐button @click="queryByParentId(scope.row.id)" type="text"size="small">查询下级</el‐button>

（3）返回上级列表
新增属性 ，用于记录点击的上级ID
假如你迷路了，避免迷路的最好方法是在走过的路留下印记，
因此，将搜索过的id记录保存到列表，回到上个id的页面就可以
注意的是既然回去了，那么使用过的id就要删除，只保留前一个，
每次只获得最后一个就可以保证每次得到的都是最合适的id

parentIds:[]

修改方法queryByParentId，添加代码

this.parentIds.push(this.searchMap.parentId)

新增方法
获得合适的id
注意id路径长度，如果为0就没有返回的必要

returnQuery(){ //上级查询
//获取上级ID
if(this.parentIds.length>0){this.searchMap.parentId= this.parentIds[this.parentIds.length‐1]
this.parentIds.splice( this.parentIds.length‐1,1 );//截掉最后一个
this.fetchData();//加载数据
}
}

新增按钮

<el‐button type="primary" @click="returnQuery()">返回上级</el‐button>

（4）三级列表不显示“查询下级”链接，在查询下级按钮上添加条件
因为只有三级列表，第三级的查看下级没有意义，做个判断
如果痕迹id列表长度大于2就没有显示的需要了
小于2则显示

<el‐button v‐if="parentIds.length<2"
@click="queryByParentId(scope.row.id)" type="text" size="small">查询下级
</el‐button>

（5）修改fetchData方法
因此三级分类以后数据量巨减，没有必要10列一页，全部展示即可

axios.post(`/category/findList.do`,this.searchMap).then(response => {this.tableData = response.data});

3.3.2 新增分类
应该新增当前分类，比如二级，三级
查看代码生成器自动生成的新增模板

id默认即可，不需要自己填
是否显示和导航应该使用按钮控件
最终效果

（1）添加新增按钮
确保当前新增的id分类为当前分类parentId: searchMap.parentId

<el‐button type="primary" @click="formVisible=true;pojo={parentId:searchMap.parentId}">新增</el‐button>

（2）删除表单中的上级ID列
（3）使用开关控件控制是否显示和是否导航
后台也就是1 0,

引用控件，开启为绿色，不开启为红色

<el‐form‐item label="是否显示">
<el‐switchv‐model="pojo.isShow"active‐color="#13ce66"inactive‐color="#ff4949"active‐value="1"inactive‐value="0">
</el‐switch>
</el‐form‐item>
<el‐form‐item label="是否导航">
<el‐switchv‐model="pojo.isMenu"active‐color="#13ce66"inactive‐color="#ff4949"active‐value="1"inactive‐value="0">
</el‐switch>
</el‐form‐item>

（4）下拉列表显示
对于模板id是不可能输入id的，应该选择模板，应该是下拉列表

如果选项比较多，选择会很慢，因此应该选择有可搜索的
在html返回数据中假如templateList

<el‐form‐item label="模板ID">
<el‐select v‐model="pojo.templateId" filterable placeholder="请选择">
<el‐optionv‐for="item in templateList":key="item.id":label="item.name":value="item.id">
</el‐option>
</el‐select>
</el‐form‐item>

创建加载方法

created(){this.fetchData();//加载模板列表axios.get(`/template/findAll.do`).then(  response=>{this.templateList=response.data})},

3.3.3 完善列表显示

（1）显示级别，添加模板列
至于级别的关系数据库中并没有存储，是依赖id自己判断的，
因此查看id走过的痕迹长度判断级别+1

<el‐table‐column label="级别" width="80">
<template slot‐scope="scope">
{{parentIds.length+1}}
</template>
</el‐table‐column>

（2）显示是否显示和是否菜单
scope.row.isShow开关控件显示

<el‐table‐column label="是否显示" width="80">
<template slot‐scope="scope">
<el‐switchv‐model="scope.row.isShow"active‐color="#13ce66"inactive‐color="#ff4949"active‐value="1"inactive‐value="0">
</el‐switch>
</template>
</el‐table‐column>
<el‐table‐column label="是否导航" width="80">
<template slot‐scope="scope">
<el‐switchv‐model="scope.row.isMenu"active‐color="#13ce66"inactive‐color="#ff4949"active‐value="1"inactive‐value="0">
</el‐switch>
</template>
</el‐table‐column>

（3）模板下拉列表
对于物品右侧应该显示其属于的模板名称

<el‐table‐column label="模板" width="300">
<template slot‐scope="scope">
<el‐select v‐model="scope.row.templateId" disabled>
<el‐optionv‐for="item in templateList":key="item.id":label="item.name":value="item.id">
</el‐option>
</el‐select>
</template>
</el‐table‐column>

3.3.4 分类删除

如果分类下还有其他分类商品，则容易误删
需求：在删除某个分类前要判断这个分类下是否存在下级分类，如果有下级分类则不能
删除。
修改CategoryServiceImpl的delete方法
删除模板，根据id,统计id下分类个数

/*** 删除* @param id*/
public void delete(Integer id) {//判断是否存在下级分类Example example=new Example(Category.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("parentId",id);int count = categoryMapper.selectCountByExample(example);if(count>0){throw new RuntimeException("存在下级分类不能删除");}categoryMapper.deleteByPrimaryKey(id);}

html提示

dele (id){this.$confirm('确定要删除此记录吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then( () => {axios.get(`/category/delete.do?id=${id}`).then(response => {if(response.data.code==0){this.fetchData (); //刷新列表}else{this.$alert(response.data.message)}})})},

已经具备效果

4. 图片库管理

4.1 需求分析

图片库是做什么的？图片库也可以称为相册，是用于存储商品图片的空间，一个图片库
（相册）下有多张图片。我们通常是将每一个商品建立一个图片库。

这样当需要某件图片，可以快速从图片库中提取

商品库中还有图片，可以快速管理

4.2 表结构分析

tb_album （相册表）

字段名称	字段含义	字段类型	字段长度	备注
id	编号	BIGINT
title	相册名称	VARCHAR
image	相册封面	VARCHAR
image_items	图片列表	TEXT

相册下有很多图片，那么图片存在哪里？image_items，地址utl用逗号分开

4.3 代码实现

4.3.1 相册名称列表

实现步骤：
（1）修改album.html ，精简查询表单，只保留相册名称查询
（2）删除图片列表列,需要显示的不是图片的urL而是图片
（3）修改封面为模板显示，封面图片当然是图片而不是地址
（4）添加设置列，列中有“图片列表‘按钮，点击图片按钮执行list方法，传递id，增删改查
（5）添加list方法 ，实现页面跳转 ，跳转到album_list.html并传递id
（6）取消注释的图片上传相关的代码，实现封面的上传

4.3.2 图片列表管理

图片列表管理在相册分类之下
实现步骤：
（1）新增album_list.html页面，接收参数id，网格查看图片
（2）根据id查询相册的图片列表，字符串转换为数组
（3）遍历图片列表
（4）实现图片的上传功能，上传后追加到图片列表，并保存到相册。
（5）实现删除相册图片的功能。
实现类似商品分类，后续再说

javaweb-青橙项目-3-78相关推荐

1. 青橙项目之品牌管理前端 day2

   学习掌握目标 1.Element-Ui组件了解与使用 2.ES6与ES5语法 3.品牌管理的前端代码 4.图片上传代码,本地和阿里云存储 5.掌握阿里云oss存储 未完成 1.ElementUI简介 ...

2. javaweb-青橙项目-6-81

   文章目录 第6章 统计分析 学习目标 1. 商品类目销售分析表 1.1 需求分析 1.2 实现思路 1.3 代码实现 1.3.1 类目统计SQL语句 1.3.2 类目统计代码实现 1.3.3 定时任务 ...

3. 青橙商城项目总结day03-04

   青橙商城项目总结 day03_模板与分类管理 设计模式:SSM;分库分表 技术栈:黑马架构师:vue:Element UI 学习目标: 1)使用"黑马架构师"完成代码生成 \1. ...

4. 青橙商城项目总结day02

   青橙商城项目总结 day02_品牌管理前端与图片上传 技术栈:Element UI:ES6:Spring:OSS 学习目标: 1)ElementUI常用组件:https://element.eleme ...

5. 阿里青橙奖名单公布，23位院士、2位图灵奖得主推荐

   9月9日,2020年阿里巴巴达摩院青橙奖获奖名单公布,梁文华等10位青年科学家获得达摩院的1000万元奖金.这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励:"你们处在最好的 ...

6. 韦东奕陈杲同获达摩院青橙奖，90后数学新星光彩夺目，却说「没有黄金一代」...

   鱼羊 博雯 发自 凹非寺 量子位 报道 | 公众号 QbitAI 南北两位90后数学新星,刚刚同时获颁百万奖金大奖. 就在今天公布的阿里达摩院青橙奖十人名单中,北大韦东奕和中科大陈杲的名字赫然在列. ...

7. 未来教育python视频百度云-青橙课程 | 人工智能走进课堂，为未来教育高质量发展赋能！...

   原标题:青橙课程 | 人工智能走进课堂,为未来教育高质量发展赋能! 是不是有一种可能性,让真实的问题驱动学习,让认知的逻辑替代学科的轨迹,让思维的训练优先于机械的训练. 随着社会对创新人才的需求日益高 ...

8. 阿里达摩院青橙奖“硬核10人”出炉，钟南山寄语青年科学家

   9月9日,2020年阿里巴巴达摩院青橙奖获奖名单公布,梁文华等10位青年科学家获得达摩院的1000万元奖金.这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励:"你们处在最好的 ...

9. 北大韦神等十人获奖，均分1000万元，达摩院2021青橙奖出炉

   点击 机器学习算法与Python学习 ,选择加星标 精彩内容不迷路 机器之心报道 这些优秀的国内年轻学者覆盖了人工智能.生物学.数学等多个学科,他们将平分 1000 万元奖金. 今天上午,阿里巴巴达摩 ...

10. “北大数学系扫地僧” 等十人获奖，均分1000万元，达摩院2021青橙奖出炉

    来源:机器之心 这些优秀的国内年轻学者覆盖了人工智能.生物学.数学等多个学科,他们将平分 1000 万元奖金. 昨天,阿里巴巴达摩院青橙奖第四届获奖名单正式揭晓.10 位获奖青年科学家将平分 1000 ...

最新文章

1. 静态链接库与动态链接库 （二）动态链接库的编译与使用
2. 犯错是成为技术专家的必要条件
3. *p++,(*p)++,*++p,++*p有什么不同
4. JSP EL表达式使用
5. sqlite3 cmd命令输出乱码
6. ×××的两种组网方式
7. java.lang.UnsupportedOperationException: TextureView doesn‘t support displaying a background drawabl
8. 全国研究生数学建模竞赛资料【2004-2021】【详细整理】
9. Day03 车牌识别
10. Buck电路工作原理
11. 为了对电脑进行保护，已经阻止此应用
12. 支付宝支付后页面跳转
13. altium 不规则焊盘 创建异形焊盘方法
14. 太原理工大学 计算机专业课程,太原理工大学最全专业介绍
15. 读书-《番茄工作法图解》
16. 关于配置文件 @project.version@ 在多模块环境下获取不到本模块值的问题解决方案
17. android程序xy数值设置,如何使用Android中的加速度计在XY平面上测量手机的倾斜度...
18. 如何创建Windows服务
19. NOIP 2017 普及组 棋盘 chess
20. 【论文精读】Local-Adaptive Image Alignment Based on Triangular Facet Approximation

热门文章

1. U3D特效笔记——陨石术特效
2. struct.pack的用法
3. 怎样在Win 10中运行MASM汇编代码
4. 在win10运行DOS环境与debug
5. 3D该来的还是会来的
6. JUST技术：面向时空数据场景的SQL优化器
7. lvgljs，用 javascript 来写 lvgl UI
8. 用 ChatGPT 创造虚拟老婆，被真女友发现...
9. 媒体处理软件：MKVToolnix-MKV编辑合成软件
10. 平安京s9服务器维护,《决战平安京》S9赛季环境调整了什么 S9赛季环境调整内容分享...