谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写

文章目录

  • 一,准备工作
    • 1,新增一级菜单
    • 2,新增二级菜单
  • 二,前端树形界面开发
    • 1,开发分类展示组件
  • 三,远程调用接口获取商品分类数据
    • 1,远程调用
    • 2,路由配置
  • 错误记录

本节的主要内容:

  • 前端调用三级分类接口,并树形展示

一,准备工作

  • 启动product服务
  • 启动renren-fast后台服务
  • 启动renren-fast-vue服务
  • 创建商品系统菜单

1,新增一级菜单

在左侧菜单栏创建商品系统菜单,这是renren-fast自带的功能,我们在页面上操作即可。

在这里插入图片描述

点击确定后,刷新页面,可以看到左侧多了一个一级菜单。

在这里插入图片描述

2,新增二级菜单

在商品系统下新增商品分类二级菜单。

在这里插入图片描述
注意,上级菜单一定要选择上一步创建的“商品系统”。

在这里插入图片描述

二,前端树形界面开发

要用原生的js和html开发一个树形展示界面是非常有挑战性的,但使用Vue和ElementUI,可以大大加速,在几分钟内完成开发。

1,开发分类展示组件

renren-fast-vue前端工程中,src->views->modules下新建文件夹product,然后在product文件夹下新建category.vue文件。

在这里插入图片描述

使用我们之前配置vue模板快速插入代码。


在ElementUI文档中找到树形控件,复制代码。

在这里插入图片描述

完整代码:

<template><el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"></el-tree>
</template><script>
export default {components: {},props: {},data () {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}],defaultProps: {children: 'children',label: 'label',},}},methods: {handleNodeClick (data) {console.log(data)},},
}
</script>
<style scoped>
</style>

点击菜单商品分类,就可以看到三级菜单了。

在这里插入图片描述

三,远程调用接口获取商品分类数据

1,远程调用

分类数据存储在数据库中,前端要调用接口获取数据后才能展示在页面上。

在category.vue的脚本中新增方法getDataList

methods: {handleNodeClick (data) {console.log(data)},// 获取分类数据getDataList () {this.dataListLoading = truethis.$http({url: this.$http.adornUrl('/product/category/list/tree'),method: 'get'}).then(({data}) => {console.log(data)this.dataListLoading = false})}},

在生命周期方法中调用这个方法。

created() {this.getDataList()  // 获取分类数据
}

2,路由配置

前端所有请求都通过网关转发给后台服务,所以要做两件事:

  • 前端的url要配置网关的IP和端口

在这里插入图片描述

  • 网关要配置路由策略将请求转发到响应的服务。
        - id: admin_routeuri: lb://renren-fastpredicates:- Path=/api/**filters:- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

错误记录

这一节出现了很多包依赖相关的错误,记录在此谷粒商城实战笔记-包依赖踩坑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/49723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法/训练】:动态规划

一、路径类 1. 字母收集 思路&#xff1a; 1、预处理 对输入的字符矩阵我们按照要求将其转换为数字分数&#xff0c;由于只能往下和往右走&#xff0c;因此走到&#xff08;i&#xff0c;j&#xff09;的位置要就是从&#xff08;i - 1&#xff0c; j&#xff09;往下走&#x…

MySQL 约束 (constraint)

文章目录 约束&#xff08;constraint)列级约束和表级约束给约束起名字&#xff08;constraint)非空约束&#xff08;no null)检查约束&#xff08;check)唯一性约束 (unique)主键约束 (primary key)主键分类单一主键复合主键主键自增 &#xff08;auto_increment) 外键约束外什…

C++树形结构(总)

目录 一.基础&#xff1a; 1.概念&#xff1a; 2.定义&#xff1a; Ⅰ.树的相关基础术语&#xff1a; Ⅱ.树的层次&#xff1a; 3.树的性质&#xff1a; 二.存储思路&#xff1a; 1.结构体存储&#xff1a; 2.数组存储&#xff1a; 三.树的遍历模板&#xff1a; 四.…

学习笔记-系统框图简化求传递函数公式例题

简化系统结构图求系统传递函数例题 基础知识回顾 第四讲 控制系统的方框图 (zhihu.com) 「自控原理」2.3 方框图的绘制及化简_方框图化简-CSDN博客 自动控制原理笔记-结构图及其等效变换_结构图等效变换-CSDN博客 例子一 「自控原理」2.3 方框图的绘制及化简_方框图化简-CS…

7-20FPGA调试日志

1. 在代码里面定义的ILA的变量名称与波形抓取界面的不一致 问题描述 ::: 2. 直接从其他的播放声音的平台放音乐没问题&#xff0c;但是从AU里面生成的2kHz的正弦波放不出声音 演示视频链接 好像和ILA的例化信号有关&#xff0c;例化ILA信号的驱动时钟信号频率没有内部的其他…

dockerfile部署wordpress

1.将容器直接提交成镜像 [rootlocalhost ~]# docker commit 8ecc7f6b9c12 nginx:1.1 sha256:9a2bb94ba6d8d952527df616febf3fbc8f842b3b9e28b7011b50c743cd7b233b [rootlocalhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE nginx …

C语言 数据存储之结构类型 万字讲解#数据类型详细介绍 #整型在内存中的存储 #大小端字节序 #浮点型在内存的存储解析

文章目录 目录 前言 一、数据类型详细介绍 类型的意义&#xff1a; 1、类型的基本归类 a.整型家族 b.浮点型家族 c.构造类型 数组类型 结构体类型 struct 枚举类型 enum 联合类型 union d.指针类型 e.空类型 二、整型在内存中的存储 三、大小端字节序 什么是…

MySql性能调优05-[sql实战演练]

sql实战演练 行列转换行列式转换第一题【列转行】第二题【列转行】 having的使用找到表中&#xff0c;名字重复的项有数据表employee&#xff0c;包含如下字段id、name、department、age&#xff0c;编写SQL&#xff0c;找到不与其他人同龄的年纪最大的员工的年龄有数据表emplo…

ModelArts中sinh算子的开发

一、环境配置 1、创建notebook并连接 使用ModelArts新建一个notebook,我这里镜像选择第一个,里面含有cann和Ascend910处理器,我这里环境只能使用ssh连接,创建一个密钥对,保存到C盘中的user/Administrator/目录下。 在网页中选择使用vscode接入,等待vscode打开后,选择密…

PotatoTool 蓝队版 V1.3 发布:增强功能和性能优化

一、简介 经过广大网友的反馈和建议&#xff0c;我们对V1.1版本中存在的问题进行了优化。其中&#xff0c;我们针对MD5库进行了本地化处理&#xff0c;以提高查询效率。然而&#xff0c;这也导致了软件体积的飙升。二、优化概述 1、兼容性 兼容arm架构系统 2、UI 2.1 界面…

Linux磁盘扩容lvm

目录 Linux磁盘管理基础知识介绍 1.确认分区类型 2.添加新硬盘 3.给新硬盘添加分区 &#xff08;2&#xff09;指定分区类型 4.创建物理卷 5.创建卷组 6.扩展逻辑卷 7.刷新文件系统 &#xff08;1&#xff09;查看文件系统 xfs文件系统使用&#xff08;centos&#…

【YOLOv8系列】图像分类篇----通过YOLOv8实现图像分类功能

最近需要使用YOLOv8对自己的数据集进行训练,从而实现图像分类的功能,因此记录一下整个过程。 YOLOv8的github地址:https://github.com/ultralytics/ultralytics 参考链接:超详细YOLOv8图像分类全程概述:环境、训练、验证与预测详解 文章目录 一、YOLOv8环境搭建二、准备…

80. 删除有序数组中的重复项 II【 力扣(LeetCode) 】

一、题目描述 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成…

docker部署mysql8.x版本,shell脚本字段部署安装mysql

docker部署mysql8.x版本&#xff0c;shell脚本字段部署安装mysql **1.**先自行安装好docker环境&#xff0c;docker的镜像注册中心最好是国内的&#xff0c;例如执行一下命令直接修改docker配置&#xff0c; cat <<EOF > /etc/docker/daemon.json {"registry-m…

深入理解算数表达式求值:后缀表达式的转换与计算

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;没人会嘲笑竭尽全力的人&#xff01; 前…

PT2262-IR

PT2262是一款很古老的编码芯片&#xff0c;其兼容型号有&#xff1a;SC2262&#xff0c;AD2262&#xff0c;SC2260(需改变匹配电阻)等。 依据其datasheet&#xff0c;PT2262射频模式工作原理: CODE BITS A Code Bit is the basic component of the encoded waveform, and ca…

34_YOLOv5网络详解

1.1 简介 YOLOV5是YOLO&#xff08;You Only Look Once&#xff09;系列目标检测模型的一个重要版本&#xff0c;由 Ultralytics 公司的Glenn Jocher开发并维护。YOLO系列以其快速、准确的目标检测能力而闻名&#xff0c;尤其适合实时应用。YOLOV5在保持高效的同时&#xff0c…

LeetCode/NowCoder-二叉树OJ练习

励志冰檗&#xff1a;形容在清苦的生活环境中激励自己的意志。&#x1f493;&#x1f493;&#x1f493; 目录 说在前面 题目一&#xff1a;单值二叉树 题目二&#xff1a;相同的树 题目三&#xff1a;对称二叉树 题目四&#xff1a;二叉树的前序遍历 题目五&#xff1a;另…

鸿蒙OpenHarmony Native API【drawing_path.h】 头文件

drawing_path.h Overview Related Modules: [Drawing] Description: 文件中定义了与自定义路径相关的功能函数 Since: 8 Version: 1.0 Summary Functions FunctionDescription[OH_Drawing_PathCreate] (void)[OH_Drawing_Path] * 函数用于创建一个路径对象OH_Drawin…

蜂窝物联云平台:一站式服务,智能生活从此开始!

蜂窝云平台 一、PC端展示与管理 GIS地图整合 在GIS地图上精确展示地块&#xff0c;轻松点选查看详细设备信息、实时监控和控制功能&#xff0c;以及基地的全方位介绍。 个性化定制界面 界面布局与功能展示均可按需求定制&#xff0c;打造独一无二的用户体验。 数据集中看板 将…