CGB2106-Day14-商品模块管理

最新推荐文章于 2024-08-14 18:44:30 发布
最新推荐文章于 2024-08-14 18:44:30 发布
阅读量304 收藏
点赞数
分类专栏： CGB学习 文章标签： vue.js java html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PengK_aha/article/details/120171336
版权

1. 商品模块实现

1.1 业务分析

1.1.1 表设计

1.1.2 编辑POJO对象

/**
 * @author 刘昱江
 * 时间 2021/4/7
 */
@TableName("item")
@Data
@Accessors(chain = true)
public class Item extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Integer id;         //商品Id号
    private String title;       //商品标题信息
    private String sellPoint;   //卖点信息
    private Integer price;      //商品价格 扩大100倍 缩小100倍值不变
    private Integer num;        //商品数量
    private String images;       //商品图片
    private Integer itemCatId;  //商品分类ID号
    private Boolean status;     //状态信息    0 下架 1 上架

}

1.1.3 编辑Item的层级代码

 

1.1.4 实现前台页面跳转

 页面效果展现:

 

1.2 商品列表展现

1.2.1 页面JS分析

	1.生命周期函数
	created() {
      //1.获取商品列表数据
      this.getItemList()
    },
	
	2.实现页面Ajax请求
	//实现商品信息分页查询
      async getItemList() {
        const {
          data: result
        } = await this.$http.get("/item/getItemList", {
          params: this.queryItemInfo
        })
        if (result.status !== 200) return this.$message.error("商品列表查询失败")
        this.itemList = result.data.rows
        this.total = result.data.total
      },

1.2.2 业务接口说明

  • 请求路径: /item/getItemList?query=&pageNum=1&pageSize=10
  • 请求类型: get
  • 请求参数: 使用pageResult对象接收
参数名称参数说明备注信息
query用户查询的数据可以为null
pageNum分页查询的页数必须赋值不能为null
pageSize分页查询的条数必须赋值不能为null
  • 返回值结果:
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据商品分页对象

1.2.3 编辑ItemController

 /**
     * 需求: 查询商品列表 分页查询
     * URL:  /item/getItemList?query=&pageNum=1&pageSize=10
     * 参数:  pageResult
     * 返回值: SysResult(pageResult)
     */
    @GetMapping("/getItemList")
    public SysResult getItemList(PageResult pageResult){//3

        //参照user模块完成商品分页查询.
        pageResult = itemService.getItemList(pageResult);//+2
        return SysResult.success(pageResult);
    }

1.2.4 编辑ItemService

 /**
     * 需求: 实现商品分页查询
     * @param pageResult
     * @return
     */
    @Override
    public PageResult getItemList(PageResult pageResult) {

        IPage page = new Page(pageResult.getPageNum(),pageResult.getPageSize());
        QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
        //判断条件: 用户传递query 则添加where条件
        String query = pageResult.getQuery();
        boolean flag = StringUtils.hasLength(query);
        queryWrapper.like(flag,"title",query);

        //page接口原来只有2个,经过分页查询之后,有四个结果
        page = itemMapper.selectPage(page,queryWrapper);
        long total = page.getTotal();
        List<Item> rows = page.getRecords();
        return pageResult.setTotal(total).setRows(rows);
    }

1.2.5 页面效果展现

 列宽度修改: 由于按钮显示不全,所以可以将width改为300px.

1.3 VUE过滤器用法

1.3.1 需求说明

说明: 需要将价格信息缩小100倍. 保留2位小数.

1.3.2 过滤器使用

1.3.3 过滤器定义

说明: 由于过滤器是全局变量,写在main.js中

/* 定义过滤器
    1.参数: 将|左侧的数据,当作参数传递给函数.
    2.返回值: 必须添加返回值!!!
    Vue.filter("过滤器名称",过滤器动作函数(参数){

    })

 */
Vue.filter("priceFormat",function(price){

    return (price / 100).toFixed(2)
})

 

1.4 添加商品

1.4.1 商品新增页面跳转

当用户点击添加商品时,应该跳转到商品添加页面

2. 页面跳转 

3. 页面效果展现

 

1.4.2 商品新增分析

	1.点击按钮分析
	 <!-- 定义添加商品按钮-->
            <el-button type="primary" class="addItemBtnClass" @click="addItemBtn">添加商品</el-button>
	
	2.检查JS函数
	 /* 添加商品按钮 */
      async addItemBtn(){
        //console.log(this.addItemForm)

        //1.完成表单校验
        this.$refs.addItemFormRef.validate( valid => {
          if(!valid) return this.$message.error("请输入商品必填项")
        })

        //2.完成商品参数的封装
        //2.0 将商品价格扩大100倍
        this.addItemForm.price = this.addItemForm.price * 100
        //2.1 将商品图片的数据转化为字符串
        this.addItemForm.images = this.addItemForm.images.join(",")

        //2.5 实现商品数据提交
        let submitAddItem = {
          item : this.addItemForm,
          itemDesc: this.itemDesc
        }


        console.log(submitAddItem)
        let {data: result} = await this.$http.post("/item/saveItem",submitAddItem)
        if(result.status !== 200) return this.$message.error("商品添加失败")
        this.$message.success("商品添加成功")

        //2.5添加完成之后,将数据重定向到商品展现页面
        this.$router.push("/item")
      }

1.4.3 业务接口说明

  • 请求路径: http://localhost:8091/item/saveItem
  • 请求类型: post
  • 前端传递参数分析
	{
		item: {
			images: "/2021/05/20/da0c1d4781c1499399f090da8b60f359.jpg,/2021/05/20/2ac1c34776a7465887eb019655354c3c.jpg"
			itemCatId: 560
			num: "100"
			price: 718800
			sellPoint: "【华为官方直供,至高12期免息0首付,原装正品】送华为原装无线充+运动蓝牙耳机+蓝牙音箱+三合一多功能数据线+钢化膜等！"
			title: "华为P40 Pro 5G手机【12期免息可选送豪礼】全网通智能手机"
		},
		itemDesc: {
				itemDesc: "<ul><li>品牌：&nbsp;<a href=https://list.jd.com/list.html".......      "
		},
		itemParam: {
			dynamicArray: [
							{paramId: 1, paramVals: "亮黑色,釉白色"}, 
							{paramId: 2, paramVals: "8GB+128GB,8GB+256GB"}
						   ],
			staticArray: [
				 	{"paramId": 3,"paramVals": "华为Mate 40 Pro"},
				    {"paramId": 4,"paramVals": "0.575kg"}.....
			 		]
		}
	}
  • 请求参数: 使用ItemVO对象接收
参数名称参数类型参数说明备注
itemItem商品基本信息对象封装不能为null
itemDescItemDesc商品详情信息不能为null
itemParamItemParam商品参数信息不能为null
  • ItemVO参数详解:
  • Item对象
参数名称参数类型参数说明备注
titleString商品标题信息不能为null
sellPointString商品卖点信息不能为null
priceInteger商品价格信息不能为null 需要将数据扩大100倍
numInteger商品数量信息不能为null
imagesString商品图片地址信息不能为null
itemCatIdInteger商品父级分类ID不能为null
statusBoolean商品状态信息不能为null
  • itemDesc 对象
  • 为了降低商品提交代码的耦合性,将大字段信息详情,采用ItemDesc对象进行封装
参数名称参数类型参数说明备注
idInteger商品Id信息因为Item和ItemDesc是一对一关系 所以需要依赖Item对象的Id值
itemDescString商品详情信息内部包含了大量的html语句
/**
 * @author 刘昱江
 * 时间 2021/4/16
 */
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ItemVO {  //该对象封装商品所有的参数信息
    private Item item;
    private ItemDesc itemDesc;
    private ItemParam itemParam;
}

1.5 商品状态修改

1.5.1 业务分析

	//1.修改按钮的JS
<el-table-column prop="status" label="状态" width="80px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
              @change="updateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>

	async updateStatus(item) {
        const {
          data: result
        } = await this.$http.put("/item/updateItemStatus", {
          id: item.id,
          status: item.status
        })
        if (result.status !== 200) return this.$message.error("更新状态失败")
        this.$message.success("更新状态成功")
      },

1.5.2 业务接口

  • 请求路径: /item/updateItemStatus
  • 请求类型: put
  • 请求参数: 使用对象接收
参数名称参数说明备注
id商品id不能为null
status状态信息不能为null
  • 返回值结果:
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据可以为null

1.5.3 编辑ItemController

 /**
     * 需求: 实现商品状态修改
     * URL:   /item/updateItemStatus
     * 参数:   {id,status} json串
     * 返回值: SysResult
     * 问题: 什么时候使用restFul,什么时候使用get/put/delete请求方式?
     *
     */
    @PutMapping("/updateItemStatus")
    public SysResult updateStatus(@RequestBody Item item){

        itemService.updateStatus(item);
        return SysResult.success();
    }

1.5.4 编辑ItemService

 @Override
    public void updateStatus(Item item) {

        itemMapper.updateById(item);
    }

1.6 商品详情说明

1.6.1 业务说明

说明: Item中存储的是商品的基本信息,通常用于检索,或者数据展现. itemDesc一般存储的都是商品的详情信息. 为了用户的检索效率更好,所以一般先查询item数据,(itemDesc一般采用大字段的形式,存储html代码的片段).

要求: 一个商品对应一个详情信息, 所以 item和itemDesc一对一
一个商品对应一个详情
一个详情对应一个商品
隐藏属性: item.id = itemDesc.id

补充知识: 数据库中常见对应关系
一对一: 老婆和老公(通常)
一对多: 老公和情人
多对多: 老师和学生
一个老师对应多个学生
一个学生对应多个老师
 

1.6.2 表设计

1.6.3 编辑ItemDesc

1.6.4 重构ItemServiceImpl

//实现商品入库操作
    @Override
    @Transactional
    public void saveItem(ItemVO itemVO) {
        //item 主键自增 数据库入库之后,才会有主键!!!
        Item item = itemVO.getItem();
        item.setStatus(true);
        itemMapper.insert(item);
        //问题: 入库之后才有ID,现阶段item.id=null
        //mybatis实现业务功能,自动回显主键!!!
        //MP自动的将主键的回显功能实现!!!

        //规则: itemId与ItemDescId是一样的.
        ItemDesc itemDesc = itemVO.getItemDesc();
        itemDesc.setId(item.getId());
        itemDescMapper.insert(itemDesc);
    }

1.7 富文本编辑器

说明: 使用富文本编辑器,可以得到 “所见即所得”
用法:

  1. 引入JS 
    /* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'

/* 导入富文本编辑器对应的样式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

  2. 页面展现 
     <!-- 定义富文本编辑器-->
            <quill-editor ref="myQuillEditor" v-model="itemDesc.itemDesc">
            </quill-editor>

    注意事项: 图片/视频默认转化为01字节信息,并且以16进制的方式展现.

3.页面效果

2 关于数据库主外键说明

说明:
1. 数据库提供了主外键的约束关系, 操作数据时必须严格的遵守.但是如果添加了主键/外键,则必然会影响执行的效率. 所以一般主键和外键的约束由程序员通过代码进行控制.
2. 一般项目中 很少直接定义主键/外键.

 

泡老师大迷弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CGB2106笔记的链接大全
cgblpx的博客
07-26 2万+
day01:
CGB2111-Day16-完成商品模块实现
02-22 231
1. 商品模块实现 1.1 商品路由跳转 1.编辑路由机制 2.页面效果展现 1.2 商品列表展现 1.2.1 业务接口文档说明 请求路径: /item/getItemListquery=&pageNum=1&pageSize=10 请求类型: get 请求参数: 使用pageResult对象接收 参数名称 参数说明 备注信息 query 用户查询的数据 可以为null pageNum 分页查询的页数 必须赋值不能为null pageSize 分页查询的条数 必须赋值不能为null
cgb2106-技术晨讲
qq_42704068的博客
08-31 161
回调函数 js中函数是对象 let fun =function(){ console.log('这是一个函数') } fun.name="函数" fun.age="10" console.log(fun) console.log(fun.name+fun.age) fun() 在Javascript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回 对象当做参数进行调用
商品入库同时操作两个表MP自动id回显，Mybatis需要useGeneratedKeys
guozhe888的博客
08-10 271
package com.jt.service; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.jt.mapper.ItemDescMapper; import com.jt.mapper.ItemMapper; import com.jt.pojo.Item; i
三阶段--day09-- ElementUI介绍 京淘项目用户登录前后端准备
weixin_58580280的博客
08-04 675
111
CGB2106-Day09
PengK_aha的博客
08-31 7126
1.构建后台项目 1.1 创建项目 1.2 编辑pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.or.
CGB2106-Day12
PengK_aha的博客
09-04 237
1. 用户业务实现 1.1 用户修改数据回显 1.1.1 业务需求分析 当用户点击修改按钮时应该出现弹出框.其中展现用户的数据信息. 展现方式: 1. 获取用户ID,动态查询后台数据库信息,之后实现数据回显. 最新数据!!! 2. 可以利用作用域插槽,获取当前行的对象,之后实现数据回显. 页面数据!!! 1.1.2 页面JS分析 <el-table-column label="操作"> <template slot-scope="scope"
CGB2106-Day10
PengK_aha的博客
09-01 153
1.用户登录操作 1.1 关于token的说明 1.由于服务器需要标识已经登录的用户,所以服务器动态生成一个独一无二的token,返回给用户. 2.用户将token保存到本地,方便下次访问时携带. 1.2 生成UUID /** * 思路: * 1.将密码进行加密处理 * 2.根据username/password查询数据库 * 3.有值: * 登录成功,返回秘钥 * 没有值:
CGB2106-Day16-图片回显
PengK_aha的博客
09-09 361
1. 关于商品新增文件模块说明 重点: 业务需求. 业务顺序 1.1商品基本模块 用户点击添加商品按钮时, 1.获取商品分类3级列表信息. 2.跳转到商品新增页面. 用户录入基本的商品信息. 用户录入价格时 需要在后期将数据扩大100倍. 1.2 商品上传 1.当用户点击上传图片时,根据 属性名称 file=“图片的字节信息”,实现数据的传递. 2.后端通过特定的接口MultipartFile(mvc专门接收字节信息,内部封装IO流) 3.上传文件时 首先使用正则表达式保证文件的类型正确 4.判
CGB2011-DAY13-14.html
03-30
CGB2011-DAY13-14.html
CGB2011-DAY02.html
03-12
CGB2011-DAY02.html
H3CGB0-713华三.docx 文档
11-06
14. **HDM/CAS安装**：管理服务器安装CVM，业务服务器不需要；配置接口地址应为管理网口；安装后需确认image file选择已断开ISO文件；CAS有试用期，建议及时注册正式许可证。 15. **CVM模块**：每一台服务器需安装...
h3cGB0-640.zip
02-13
h3cGB0-640.
Vue（四）——总结
最新发布
初叙
08-14 197
vue总结
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 85
element-ui选中下拉框数据，但是值没有填充到框内
Vue和Jquery的区别
MarisTang的博客
08-14 562
Vue.js 适用于现代化、复杂的前端应用开发，特别是单页面应用（SPA），而 jQuery 则更适合简单、传统的 Web 开发需求。Vue 提供了更强大的数据绑定和组件化能力，而 jQuery 更加轻量和简单，适合快速开发。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 167
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值