当前位置: 首页 > news >正文

谷粒商城实战笔记-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-三级分类-配置网关路由与路径重写

文章目录 一&#xff0c;准备工作1&#xff0c;新增一级菜单2&#xff0c;新增二级菜单 二&#xff0c;前端树形界面开发1&#xff0c;开发分类展示组件 三&#xff0c;远程调用接口获取商品分类数据1&#xff0c;远程调用2&#xff0c;路由配置 错误记录 本节的主要内容&#…...

简要了解sql注入

sql注入安全测试中危害 数据库中的数据&#xff0c;对数据库数据进行操作&#xff08;查询、删除等&#xff09;&#xff1b;网站的权限&#xff0c;找到注入点后可后门写入&#xff1b; sql注入产生原理详细分析 可控变量&#xff0c;带入数据库查询&#xff0c;变量未存在…...

Java 扫雷游戏

程序分析 使用Java编写的扫雷游戏界面程序&#xff0c;主要内容总结如下&#xff1a; Frame类继承自JFrame&#xff0c;构建了扫雷游戏的界面。 包含文本框text、标签nowBomb和setBomb、按钮start、面板MenuPamel和bombPanel等组件。通过jbInit方法进行初始化设置&#xff0c;…...

vue3 命令运行窗口暴露网络地址,以及修改端口号

一般情况下这里的地址是隐藏的 这里加上 --host 可以暴露网络地址&#xff0c;再加上--port --8080 就可以将端口号修改为8080&#xff08;修改后边的数字就可以修改为你想要的端口号&#xff09;...

由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)

答案仅供参考&#xff0c;来自 讯飞星火大模型 目录 1.Android多线程间通信和多进程之间通信有什么不同&#xff0c;分别怎么实现?2.请解释下在单线程模型中Message、Handler、Message Queue、Looper之间的关系&#xff1f;3.Android 线程间通信有哪几种方式?4.子线程发消息…...

某某物联rabbitmqhttp二轮充电桩协议充电协议对接

对接方式概述&#xff1a; 1&#xff09;请求采用 http 协议方式&#xff0c;推送数据采用 amqp(默认 rabbitmq)点对点消息队 列方式。 2&#xff09;消息队列连接信息&#xff0c;需贵方完善。 1 hostIp&#xff1a; 2 virtualHost&#xff1a; 3 userName&#xff1a; 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题移动零

题目&#xff1a; 题解&#xff1a; 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 中&#xff0c;ModelViewSet 和 ReadOnlyModelViewSet 提供了快速实现常见视图操作的便捷方法。它们分别继承自 GenericViewSet 并组合了多个 Mixin 类&#xff0c;使得视图的编写变得更加简单。 ModelViewSet ModelViewSet 继承自 GenericViewSet&…...

《0基础》学习Python——第二十四讲__爬虫/<7>深度爬取

一、深度爬取 深度爬取是指在网络爬虫中&#xff0c;获取网页上的所有链接并递归地访问这些链接&#xff0c;以获取更深层次的页面数据。 通常&#xff0c;一个简单的爬虫只会获取到初始页面上的链接&#xff0c;并不会进一步访问这些链接上的其他页面。而深度爬取则会不断地获…...

Python Pygame制作简单五子棋游戏

代码参考自&#xff1a;https://blog.csdn.net/weixin_43918046/article/details/119521845 新增功能&#xff1a;1任意棋盘大小&#xff1b;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源码包含多个模块&#xff0c;每个模块负责不同的功能。以下是一些核心模块及其功能的概述&#xff1a; 服务端源码 &#xff1a;实现Kafka Broker的核心功能&#xff0c;包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…...

【MetaGPT系列】【MetaGPT完全实践宝典——如何定义单一行为多行为Agent】

目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent&#xff08;ProductManager&#xff09;2-3、拥有单一行为的Agent&#xff08;SimpleCoder&#xff09;2-3-1、定义写代码行为2-3-2、角色定义2-3…...

Kolla-Ansible的确是不支持CentOS-Stream系列产品了

看着OpenStack最新的 C 版本出来一段时间了&#xff0c;想尝个鲜、用Kolla-Ansible进行容器化部署&#xff0c;结果嘛。。。 根据实验结果&#xff0c;自OpenStack Bobcat版本开始&#xff0c;Kolla-Ansible就适合在CentOS系列产品上部署了&#xff0c;通过对 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方法&#xff0c;获得了获取flag的条件就是user等于admin&#xff0c;password等于ctfshow Poc: https://d036a90d-ac1c-4de1-9b0b-86f52d2586b9.challenge.ctf.show/ctfshow/login?usernameadmin&passwordctfshow Web299 打开页面…...

Java 基础 and 进阶面试知识点(超详细)

一个 Java 文件中是否可以存在多个类&#xff08;修饰类除外&#xff09;&#xff1f; 一个 Java 文件中是可以存在多个类的&#xff0c;但是一个 Java 文件中只能存在一个 public 所修饰的类&#xff0c;而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...