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

Spring Boot + Vue的网上商城之商品分类

Spring Boot + Vue的网上商城之商品分类

在网上商城中,商品分类是非常重要的一个功能,它可以帮助用户更方便地浏览和筛选商品。本文将介绍如何使用Spring Boot和Vue来实现商品分类的功能,包括一级分类和二级分类的管理以及前台按分类浏览商品的实现。

实现网上商城的商品分类功能,可以按照以下思路进行:

  1. 数据库设计:设计商品分类表和商品表,商品分类表包含分类的id和名称等字段,商品表包含商品的id、名称、价格、分类id等字段。

  2. 后端实现:

    • 创建Spring Boot项目,配置数据库连接等相关配置。
    • 创建商品分类实体类和商品实体类,并使用JPA注解进行映射。
    • 创建商品分类的Controller类,实现添加、编辑、删除分类的接口。
    • 创建商品的Controller类,实现按分类获取商品列表的接口。
  3. 前端实现:

    • 使用Vue创建商品分类管理页面,可以展示所有分类、添加分类、编辑分类和删除分类。
    • 使用Vue创建按分类浏览商品页面,可以展示所有分类、选择分类后获取对应的商品列表。
  4. 前后端交互:

    • 前端使用axios等工具发送HTTP请求,调用后端的接口进行数据的增删改查操作。
    • 后端接收前端的请求,处理对应的业务逻辑,并返回相应的数据。

通过以上步骤,就可以实现网上商城的商品分类功能。当用户在前台按分类浏览商品时,前端会发送请求到后端,后端根据分类id查询对应的商品列表,并返回给前端展示。同时,后台管理界面可以对商品分类进行管理,包括添加、编辑和删除分类。这样,用户就可以更方便地浏览和筛选商品了。

后台管理的分类实现

后端实现

首先,我们使用Spring Boot来实现后台管理的分类功能。我们可以创建一个Category实体类来表示商品分类,包括id、name和parentId等属性。然后,我们可以创建一个CategoryController来处理与分类相关的请求,包括添加分类、编辑分类、删除分类等操作。

@RestController
@RequestMapping("/api/categories")
public class CategoryController {@Autowiredprivate CategoryService categoryService;@GetMappingpublic List<Category> getAllCategories() {return categoryService.getAllCategories();}@PostMappingpublic Category addCategory(@RequestBody Category category) {return categoryService.addCategory(category);}@PutMapping("/{id}")public Category updateCategory(@PathVariable Long id, @RequestBody Category category) {return categoryService.updateCategory(id, category);}@DeleteMapping("/{id}")public void deleteCategory(@PathVariable Long id) {categoryService.deleteCategory(id);}
}

前端实现

接下来,我们使用Vue来实现后台管理的分类界面。我们可以创建一个CategoryList组件来展示所有的分类,并提供添加、编辑和删除分类的功能。

<template><div><h2>分类列表</h2><ul><li v-for="category in categories" :key="category.id">{{ category.name }}<button @click="editCategory(category)">编辑</button><button @click="deleteCategory(category.id)">删除</button></li></ul><h2>添加分类</h2><input v-model="newCategoryName" type="text" placeholder="分类名称" /><button @click="addCategory">添加</button></div>
</template><script>
export default {data() {return {categories: [],newCategoryName: '',};},mounted() {this.loadCategories();},methods: {loadCategories() {// 发起请求获取所有分类// 使用axios或者其他HTTP库axios.get('/api/categories').then((response) => {this.categories = response.data;});},addCategory() {// 发起请求添加分类axios.post('/api/categories', { name: this.newCategoryName }).then(() => {this.loadCategories();this.newCategoryName = '';});},editCategory(category) {// 编辑分类逻辑},deleteCategory(id) {// 发起请求删除分类axios.delete(`/api/categories/${id}`).then(() => {this.loadCategories();});},},
};
</script>

前台的按分类浏览商品实现

后端实现

在前台按分类浏览商品的功能中,我们可以创建一个Product实体类来表示商品,包括id、name和categoryId等属性。然后,我们可以创建一个ProductController来处理与商品相关的请求,包括按分类获取商品列表等操作。

@RestController
@RequestMapping("/api/products")
public class ProductController {@Autowiredprivate ProductService productService;@GetMappingpublic List<Product> getProductsByCategoryId(@RequestParam Long categoryId) {return productService.getProductsByCategoryId(categoryId);}
}

前端实现

接下来,我们使用Vue来实现前台的按分类浏览商品界面。我们可以创建一个ProductList组件来展示按分类获取到的商品列表。

<template><div><h2>按分类浏览商品</h2><select v-model="selectedCategoryId" @change="loadProducts"><option value="">全部分类</option><option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option></select><ul><li v-for="product in products" :key="product.id">{{ product.name }}</li></ul></div>
</template><script>
export default {data() {return {categories: [],selectedCategoryId: '',products: [],};},mounted() {this.loadCategories();},methods: {loadCategories() {// 发起请求获取所有分类axios.get('/api/categories').then((response) => {this.categories = response.data;});},loadProducts() {// 发起请求按分类获取商品列表axios.get('/api/products', { params: { categoryId: this.selectedCategoryId } }).then((response) => {this.products = response.data;});},},
};
</script>

总结

通过使用Spring Boot和Vue,我们可以很方便地实现网上商城的商品分类功能。在后台管理中,我们可以通过CategoryController来管理一级分类和二级分类;在前台浏览商品中,我们可以通过ProductController来按分类获取商品列表。这样,用户就可以更方便地浏览和筛选商品了。

以上就是Spring Boot + Vue的网上商城之商品分类的详细介绍和代码案例。希望对你有帮助!

相关文章:

Spring Boot + Vue的网上商城之商品分类

Spring Boot Vue的网上商城之商品分类 在网上商城中&#xff0c;商品分类是非常重要的一个功能&#xff0c;它可以帮助用户更方便地浏览和筛选商品。本文将介绍如何使用Spring Boot和Vue来实现商品分类的功能&#xff0c;包括一级分类和二级分类的管理以及前台按分类浏览商品…...

Docker 容器逃逸漏洞 (CVE-2020-15257)复现

漏洞概述 containerd是行业标准的容器运行时&#xff0c;可作为Linux和Windows的守护程序使用。在版本1.3.9和1.4.3之前的容器中&#xff0c;容器填充的API不正确地暴露给主机网络容器。填充程序的API套接字的访问控制验证了连接过程的有效UID为0&#xff0c;但没有以其他方式…...

Python 如何使用 csv、openpyxl 库进行读写 Excel 文件详细教程(更新中)

csv 基本概述 首先介绍下 csv (comma separated values)&#xff0c;即逗号分隔值&#xff08;也称字符分隔值&#xff0c;因为分隔符可以不是逗号&#xff09;&#xff0c;是一种常用的文本格式&#xff0c;用以存储表格数据&#xff0c;包括数字或者字符。 程序在处理数据时…...

$nextTick属性使用与介绍

属性介绍 $nextTick 是 Vue.js 中的一个重要方法&#xff0c;之前我们也说过$ref 等一些重要的属性&#xff0c;这次我们说$nextTick&#xff0c;$nextTick用于在 DOM 更新后执行回调函数。它通常用于处理 DOM 更新后的操作&#xff0c;因为 Vue 在更新 DOM 后不会立即触发回调…...

【群智能算法改进】一种改进的鹈鹕优化算法 IPOA算法[2]【Matlab代码#58】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 原始POA算法2. 改进后的IPOA算法2.1 随机对立学习种群初始化2.2 动态权重系数2.3 透镜成像折射方向学习 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xff1a;资源获取】 1. 原始POA算法…...

k8s 入门到实战--部署应用到 k8s

k8s 入门到实战 01.png 本文提供视频版&#xff1a; 背景 最近这这段时间更新了一些 k8s 相关的博客和视频&#xff0c;也收到了一些反馈&#xff1b;大概分为这几类&#xff1a; 公司已经经历过服务化改造了&#xff0c;但还未接触过云原生。公司部分应用进行了云原生改造&…...

编程语言新特性:instanceof的改进

以前也写过类似的博文&#xff0c;可能重复。 要判断一个对象是哪个类或父类的实例&#xff0c;JAVA用到instanceof&#xff0c;其实语言也有类似语法。而类一般是多层继承的&#xff0c;有时就让人糊涂。所以我提出改进思路&#xff1a; instanceof&#xff1a;保持不变。ins…...

数据挖掘的学习路径

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…...

逻辑回归Logistic

回归 概念 假设现在有一些数据点&#xff0c;我们用一条直线对这些点进行拟合&#xff08;这条直线称为最佳拟合直线&#xff09;&#xff0c;这个拟合的过程就叫做回归。进而可以得到对这些点的拟合直线方程。 最后结果用sigmoid函数输出 因此&#xff0c;为了实现 Logisti…...

Flink提交jar出现错误RestHandlerException: No jobs included in application.

今天打包一个flink的maven工程为jar&#xff0c;通过flink webUI提交&#xff0c;发现居然报错。 如上图所示&#xff0c;提示错误为&#xff1a; Server Response Message: org.apache.flink.runtime.rest.handler.RestHandlerException: No jobs included in application. …...

【数仓基础(一)】基础概念:数据仓库【用于决策的数据集合】的概念、建立数据仓库的原因与好处

文章目录 一. 数据仓库的概念1. 面向主题2. 集成3. 随时间变化4. 非易失粒度 二. 建立数据仓库的原因三. 使用数据仓库的好处 一. 数据仓库的概念 数据仓库的主要作用&#xff1a; 数据仓库概念主要是解决多重数据复制带来的高成本问题。 在没有数据仓库的时代&#xff0c;需…...

电商类面试问题--01Elasticsearch与Mysql数据同步问题

在实现基于关键字的搜索时&#xff0c;首先需要确保MySQL数据库和ES库中的数据是同步的。为了解决这个问题&#xff0c;可以考虑两层方案。 全量同步&#xff1a;全量同步是在服务初始化阶段将MySQL中的数据与ES库中的数据进行全量同步。可以在服务启动时&#xff0c;对ES库进…...

天线材质介绍--FPC天线

...

vue3 的 ref、 toRef 、 toRefs

1、ref: 对原始数据进行拷贝。当修改 ref 响应式数据的时候&#xff0c;模版中引用 ref 响应式数据的视图处会发生改变&#xff0c;但原始数据不会发生改变 <template><div>{{refA}}</div> </template><script lang"ts" setup> impor…...

WebRTC中 setup:actpass、active、passive

1、先看一下整个DTLS的流程 setup:actpass、active、passive就发生在Offer sdp和Anser SDP中 Offer的SDP是setup:actpass,这个是服务方&#xff1a; v0\r o- 1478416022679383738 2 IN IP4 127.0.0.1\r s-\r t0 0\r agroup:BUNDLE 0 1\r aextmap-allow-mixed\r amsid-semanti…...

ModuleNotFoundError: No module named ‘lavis‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

双指针的问题解法以及常见的leetcode例题。

目录 介绍&#xff1a; 问题1&#xff1a;双指针 剑指offer57 和为S的两个数字。 问题2&#xff1a;剑指Offer 21. 调整数组顺序使奇数位于偶数前面 问题3&#xff1a;连续奇数子串&#xff08;笔试遇到的真题&#xff09; 问题4&#xff1a;滑动窗口的最大值 介绍&#…...

python容器模块Collections

Python附带一个模块&#xff0c;它包含许多容器数据类型&#xff0c;名字叫作collections defaultdict defaultdict与dict类型不同&#xff0c;你不需要检查key是否存在&#xff0c;所以我们能这样做&#xff1a; from collections import defaultdict colours ((Yasoob, Y…...

排序算法学习记录-快速排序

快速排序 快速排序关键在于确定一个中间值&#xff0c;使得小于这个中间值的数在左边&#xff0c;大于这个中间值的数在右边。那么中间值该如何确定呢&#xff1f;有以下几种做法 首元素&#xff0c;也就是arr[l]尾元素&#xff0c;也就是arr[r]中间元素&#xff0c;也就是ar…...

安装windows版本的ros2 humble的时候,最后报错

"[rti_connext_dds_cmake_module][warning] RTI Connext DDS environment script not found (\resource\scripts\rtisetenv_x64Win64VS2017.bat). RTI Connext DDS will not be available at runtime, unless you already configured PATH manually." 意思是没找到。…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...