谷粒商城学习笔记（3.商品服务）

最新推荐文章于 2024-10-06 19:59:26 发布

Kiritoasu

最新推荐文章于 2024-10-06 19:59:26 发布

阅读量381

点赞数

分类专栏：谷粒商城学习笔记文章标签：学习笔记前端

本文链接：https://blog.csdn.net/Kiritoasu/article/details/130965015

版权

谷粒商城学习笔记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

一、三级分类功能

1、三级分类后端

在这里插入图片描述

1 目录对应表

也对应product商品项目下的category类
在这里插入图片描述

2 Controller类

将list查询改写为查询列表树形结构

listWithTree为查询树形结构的方法接口
在这里插入图片描述

3 service接口

在这里插入图片描述

4 lmpl实现类

流方法.filter过滤查找父id == 0的商品（等于0意味着为一级目录）
.map查找当前父亲的子分类（建立setchildren新方法）
.sored根据表数据中的sort值进行父目录排序（如果有重要的目录需要置顶）
在这里插入图片描述
这里的map进行递归循环，继续查找当前父目录的子目录

5 entity实体类

需要加一个children用于接受子菜单
tablefield表示表数据中不存在当前类型
在这里插入图片描述

6 测试

在这里插入图片描述

7 建立前端页面

运行renrenfast后端管理
在这里插入图片描述
运行renrenfast管理端前端页面

在菜单管理中添加一级菜单（商品管理）

再添加一个商品管理的二级菜单（分类维护）

前端修改api同一路由，方面我们之后管理

2、配置网关路由

1 创建gateway模块统一管理

在这里插入图片描述

2 nacos注册中心

在这里插入图片描述

3 nacos配置中心

在这里插入图片描述
这里可以创建一个gateway命名空间把gateway有关的统一管理

4 配置相关路由管理

在这里插入图片描述

5 后端模块（renren-fast）导入nacos

配置common工具类
在这里插入图片描述
yml文件配置nacos连接

6 测试

在这里插入图片描述

3、配置跨域

现在肯定是登录失败的，因为这个跨域问题！！！
在这里插入图片描述

1 编写跨域类

在gateway中新建config类下cor…来管理跨域
在这里插入图片描述
这里注释掉renren-fast中自带的跨域

在这里插入图片描述

2 测试

在这里插入图片描述

4、商品模块路由转发

1 商品模块配置nacos注册中心

在这里插入图片描述

2 商品模块配置nacos配置中心

在这里插入图片描述

3 商品模块主启动类开启nacos

在这里插入图片描述

4 测试

在这里插入图片描述

5 商品模块路由转发

在gateway模块中yml文件进行配置
在这里插入图片描述

6 测试

直接输入前端访问地址也能跳转
在这里插入图片描述
当然访问网页页面也有数据

5、前端页面整合

1 数据展示

data绑定menus，将data值再封装，返回给menus。
在这里插入图片描述

在这里插入图片描述

2 页面功能完善

参照element组件中的tree结构文档完成前端: https://element.eleme.cn/#/zh-CN/component/tree
添加删除，增加按钮
在这里插入图片描述
// node：表示每一行数据
// expand-on-click-node：点击时是否展开菜单
// show-checkbox：复选框
// node-key=…：让每行数据都绑定一个特定值
// if设置按键的显示规则
level<=2：只展示一级和二级的添加按钮
childnode.length：当为最后子节点时展示删除按钮
在这里插入图片描述

6、删除功能

修改文件：商品模块下的category相关的文件
在这里插入图片描述

这里的删除基本为逻辑删除，并不是真正的删除，只是让数据不显示
在这里插入图片描述

1 逻辑删除yml配置

删除的为1，未删除的为0
在这里插入图片描述

2 逻辑删除实体类绑定

实体类也能对特定的全局配置进行修改：1为未删除，0为删除
在这里插入图片描述

3 contoller类删除方法

在这里插入图片描述

4 service自定删除类

在这里插入图片描述

5 impl实现类

这里以后还要具体编写删除方法，检查其他地方是否引用之类的
在这里插入图片描述

6 测试

在这里插入图片描述

7 删除功能前端完善

删除提示弹窗，以及删除成功后的弹窗在这里插入图片描述

在这里插入图片描述

给后端发送删除指令，调用后端的proudct/category/delete

这里运用renren模板自定义的**adornUrl（请求地址处理）与adornData（post请求处理）**两个方法
在这里插入图片描述

在这里插入图片描述
删除后刷新当前菜单，以及保留当前展开的菜单

在这里插入图片描述

测试数据，数据库删除

在这里插入图片描述

7、添加功能

1 对话框

:visible.sync=“dialogVisible”：用于控制对话框是否展示（false关闭）

form表单model定义category与之表单绑定用于之后传递值

确定按钮绑定addCategory添加方法
在这里插入图片描述

2 定义相关data

表单绑定值，和控制弹出框显示的dialogvisible
在这里插入图片描述

3 添加功能相关方法

点击新增赋予当前category当前数据的id值，以及层级

addCategory发送post请求，调用后端save方法，之后关闭对话框等操作
在这里插入图片描述

4 测试

在这里插入图片描述

8、修改功能

1 添加按钮

修改按钮保存edit方法
在这里插入图片描述

2 弹出框确定按钮判断

将确定按钮绑定新函数submitdata用于判断本次发出请求是修改还是添加（因为共用一个弹出框）
在这里插入图片描述
发出修改请求时，会个dialogtype赋予edit值，让后交给submitData判断调用相关的

修改增加方法
在这里插入图片描述

在这里插入图片描述
同理每次弹出框的title也可以用相同方法设置

3 修改功能（回显数据）

默认值定义
在这里插入图片描述
调用查找方法，回显当前修改的数据，并展示

在这里插入图片描述
修改功能：

4 测试

在这里插入图片描述

9、菜单拖拽功能

实现菜单直接拖拽就能完成菜单层级的修改

1 后端修改

新增一个批量删除方法
在这里插入图片描述 #

2 拖拽功能开启，按钮以及属性值

在这里插入图片描述
属性绑定值

allowDrop执行拖拽函数

handlerdrop拖拽成功函数
在这里插入图片描述

在这里插入图片描述

2 拖拽功能方法

allowDrop拖拽函数：绑定当前拖动到位置是否符合规定，如：一级二级如果还有子目录不能拖动到三级目录等
在这里插入图片描述
allowNodeLevel求最大深度，以及子节点

handleDrop拖拽完成后的执行函数：

updateChildNodeLevel更新子节点

batchsave统一保存数据：点击保存按钮