javaweb-青橙项目-3-78

第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 (模板表)

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

tb_spec (规格表)

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

tb_para (参数表)

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

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);
//将模板中的规格数量+1
        Template 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分类IDINT
name分类名称VARCHAR
goods_num商品数量INT
is_show是否显示CHAR
is_menu是否导航CHAR
seq排序INT
parent_id上级IDINT
template_id模板IDINT

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‐switch
        v‐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‐switch
        v‐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‐option
        v‐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‐switch
        v‐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‐switch
        v‐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‐option
        v‐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)实现删除相册图片的功能。
实现类似商品分类,后续再说

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值