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、账号登录的时候，没有清楚两边空白(空格或者制表符)
文章图片
【vue一级分类和耳机分类_Vue--3--实现后台三级分类管理（基于人人fast）】image.png
推荐阅读
- javascript|express+mongodb+vue实现增删改查-全栈之路
- 软件性能测试分析与调优实践之路-Java应用程序的性能分析与调优-手稿节选
- R语言样条曲线分段线性回归模型piecewise regression估计个股beta值分析收益率数据
- 带你从编码角度分析C++重载原理
- Java实现班级管理系统
- VUE3基础学习之click事件详解
- vue实现选项卡功能
- 在数睿数据nextionBI线上发布会上，传统企业展示了对数据分析的深度理解
- 【外企测试面试、笔试】分享下历时8轮、30k+的外企面试全过程
- 分享4个方便且好用的Python自动化脚本