vue一级分类和耳机分类_Vue--3--实现后台三级分类管理（基于人人fast）

后端接口部分

1、业务层处理数据的核心代码

image.png

2、工具类代码

image.png

3、测试接口

image.png

前端数据渲染---前置操作

1、配置商品系统菜单和分类管理

image.png

image.png

2、创建商品文件夹，和分类vue组件

image.png

3、element树形结构支撑

image.png

image.png

4、编写请求接口

image.png

5、修改全局请求地址(测试环境和开发环境)

image.png

6、集成人人fast 到系统中(引入依赖)和Gson 包

image.png

7、集成人人fast 到系统中(配置nacos)

image.png

8、注解启动nacos注册

image.png

9、编写gatrway 路由匹配

image.png

10、解决跨域问题(CORS)，在网关编写配置类

image.png

11、注释掉renren-fast 配置的跨域(防止冲突)

image.png

12、给商品模块配置网关路由

image.png

13、网关路由顺序调整(防止高优先级吞噬低)

image.png

前端数据渲染(实际操作)

1、请求数据接口函数重写

image.png

2、参数说明(返回的数据)

image.png

3、测试显示

image.png

前端数据节点渲染(增删改)

1、页面控件渲染

1、参考文档element(版本2.12.0)

image.png

2、复制原始的标签和方法

image.png

image.png

3、判断何时显示删除和添加节点(最下级可删除)

image.png

image.png

4、加上节点可选和唯一标识key(详情看文档)

image.png

image.png

2、编写前后端逻辑删除(字段 show_status)

image.png

image.png

image.png

2、调整日志级别(用于调试)

image.png

3、POST测试

image.png

image.png

image.png

4、贴上post和get代码片段(详情看下面)

5、前端接口：删除并且刷新

image.png

6、点击删除前弹出窗口提示是否删除

参考文档：

image.png

image.png

复制实现：

image.png

7、删除刷新后保留当前展开状态

文档：

image.png

image.png

实现：

image.png

3、编写前后端添加功能 和修改功能

1、添加 的对话框

image.png

2、设计分析

1、采用添加和修改发送请求数据接口合并，判断标准当前是否有值(有则修改，无则添加)

2、修改和添加是同一个对话框，但是打开对话框的方法是两个

3、在更新数据的时候，回显得重新查询一次得到最新

4、注意：点击更新的时候数据回显到会话框，再点击添加之前要清空回显的数据

3、前端代码

image.png

image.png

image.png

image.png

image.png

4、拖拽功能实现

image.png

5、批量拖拽功能

6、批量删除实现

XXX：异常收集

1、renren-fast 验证码转到网关一直 503(原因，网关没有配置nacos)

问题截图：

image.png

解决方案：gatrway依赖环境，配置yml

image.png

image.png

XXX：学习功能扩展

1、注释TODO(备忘录)：更容易找到还没实现的代码

image.png

2、贴上post和get代码片段

"http-get请求": {

"prefix": "httpget",

"body": [

"this.\\$http({",

"url: this.\\$http.adornUrl(''),",

"method: 'get',",

"params: this.\\$http.adornParams({})",

"}).then(({data}) => {",

"})"

],

"description": "httpGET请求"

},

"http-post请求": {

"prefix": "httppost",

"body": [

"this.\\$http({",

"url:this.\\$http.adornUrl(''),",

"method: 'post',",

"data: this.\\$http.adornData(data, false)",

"}).then(({ data }) => { });"

],

"description": " httpPOST请求"

}

XXX：开源项目BUG收集(这款比较火且成熟的项目，也是有bug的)

1、账号登录的时候，没有清楚两边空白(空格或者制表符)

image.png