谷粒商城实战笔记-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}
错误记录
这一节出现了很多包依赖相关的错误,记录在此谷粒商城实战笔记-包依赖踩坑。
相关文章:
谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写
文章目录 一,准备工作1,新增一级菜单2,新增二级菜单 二,前端树形界面开发1,开发分类展示组件 三,远程调用接口获取商品分类数据1,远程调用2,路由配置 错误记录 本节的主要内容&#…...
简要了解sql注入
sql注入安全测试中危害 数据库中的数据,对数据库数据进行操作(查询、删除等);网站的权限,找到注入点后可后门写入; sql注入产生原理详细分析 可控变量,带入数据库查询,变量未存在…...
Java 扫雷游戏
程序分析 使用Java编写的扫雷游戏界面程序,主要内容总结如下: Frame类继承自JFrame,构建了扫雷游戏的界面。 包含文本框text、标签nowBomb和setBomb、按钮start、面板MenuPamel和bombPanel等组件。通过jbInit方法进行初始化设置,…...
vue3 命令运行窗口暴露网络地址,以及修改端口号
一般情况下这里的地址是隐藏的 这里加上 --host 可以暴露网络地址,再加上--port --8080 就可以将端口号修改为8080(修改后边的数字就可以修改为你想要的端口号)...
由CANoe自带协议栈在TCP断开连接时同时发送两条FIN报文引起的注意事项
在我写这篇文章CAPL如何在底层模拟TCP Server端断开TCP连接时,我发现了一个奇怪的现象。我为了使用CAPL组装报文的方式实现TCP Server断开连接的过程,插入一个网络节点作为Client端。为了让Client能够发起连接和发起断开连接,给网络节点配置了独立的TCP/IP Stack,也就是CAN…...
FastGPT部署和接入使用重排模型bce-reranker-base
bce-reranker简介 bce-reranker 是一种专门用于信息检索和自然语言处理领域中的重排序(reranking)模型。这种模型由北京智源人工智能研究院(BAAI)开发,是 BGE(BAAI General Embedding)系列的一部分。BGE 系列模型专注于提供通用的嵌入表示,而 bce-reranker 则更进一步…...
Android笔试面试题AI答之线程Handler、Thread(2)
答案仅供参考,来自 讯飞星火大模型 目录 1.Android多线程间通信和多进程之间通信有什么不同,分别怎么实现?2.请解释下在单线程模型中Message、Handler、Message Queue、Looper之间的关系?3.Android 线程间通信有哪几种方式?4.子线程发消息…...
某某物联rabbitmqhttp二轮充电桩协议充电协议对接
对接方式概述: 1)请求采用 http 协议方式,推送数据采用 amqp(默认 rabbitmq)点对点消息队 列方式。 2)消息队列连接信息,需贵方完善。 1 hostIp: 2 virtualHost: 3 userName: 4 pass…...
黑马JavaWeb企业级开发(知识清单)03——HTML实现正文:排版(音视频、换行、段落)、布局标签(div、span)、盒子模型
文章目录 前言一、正文排版1. 视频标签: < video >2. 音频标签: < audio >3. 换行标签: < br >4. 段落标签 < p >5. vscode实现 二、布局1. 盒子模型2. 布局标签< div >和< span >3. VScode实现 三、源代码和运行结果总结 前言 本篇文章是…...
Java | Leetcode Java题解之第283题移动零
题目: 题解: class Solution {public void moveZeroes(int[] nums) {int n nums.length, left 0, right 0;while (right < n) {if (nums[right] ! 0) {swap(nums, left, right);left;}right;}}public void swap(int[] nums, int left, int right)…...
Django REST Framework(十三)视图集-GenericViewSet
Django REST Framework 中,ModelViewSet 和 ReadOnlyModelViewSet 提供了快速实现常见视图操作的便捷方法。它们分别继承自 GenericViewSet 并组合了多个 Mixin 类,使得视图的编写变得更加简单。 ModelViewSet ModelViewSet 继承自 GenericViewSet&…...
《0基础》学习Python——第二十四讲__爬虫/<7>深度爬取
一、深度爬取 深度爬取是指在网络爬虫中,获取网页上的所有链接并递归地访问这些链接,以获取更深层次的页面数据。 通常,一个简单的爬虫只会获取到初始页面上的链接,并不会进一步访问这些链接上的其他页面。而深度爬取则会不断地获…...
Python Pygame制作简单五子棋游戏
代码参考自:https://blog.csdn.net/weixin_43918046/article/details/119521845 新增功能:1任意棋盘大小;2.任意棋子连线 # 棋盘大小 [670, 670] # 棋盘行列 15*15 import pygame from pygame.locals import QUIT, KEYDOWN import numpy as…...
JS+H5在线文心AI聊天(第三方接口)
源码在最后面 调用的不是文心官方接口 可以正常聊天 有打字动画 效果图 源代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…...
kafka源码阅读-ReplicaStateMachine(副本状态机)解析
概述 Kafka源码包含多个模块,每个模块负责不同的功能。以下是一些核心模块及其功能的概述: 服务端源码 :实现Kafka Broker的核心功能,包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…...
【MetaGPT系列】【MetaGPT完全实践宝典——如何定义单一行为多行为Agent】
目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent(ProductManager)2-3、拥有单一行为的Agent(SimpleCoder)2-3-1、定义写代码行为2-3-2、角色定义2-3…...
Kolla-Ansible的确是不支持CentOS-Stream系列产品了
看着OpenStack最新的 C 版本出来一段时间了,想尝个鲜、用Kolla-Ansible进行容器化部署,结果嘛。。。 根据实验结果,自OpenStack Bobcat版本开始,Kolla-Ansible就适合在CentOS系列产品上部署了,通过对 Bobcat和Caracal…...
IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错
这篇文章写的就很详细了(IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错_error occurred during initialization of vm failed -CSDN博客)...
ctfshow298-300(java信息泄露,代码审计)
Web298 代码审计 这里看到getVipStatus方法,获得了获取flag的条件就是user等于admin,password等于ctfshow Poc: https://d036a90d-ac1c-4de1-9b0b-86f52d2586b9.challenge.ctf.show/ctfshow/login?usernameadmin&passwordctfshow Web299 打开页面…...
Java 基础 and 进阶面试知识点(超详细)
一个 Java 文件中是否可以存在多个类(修饰类除外)? 一个 Java 文件中是可以存在多个类的,但是一个 Java 文件中只能存在一个 public 所修饰的类,而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
