java vue 做的一个商城发布系统

devtools/2024/9/20 1:23:14/ 标签: java, vue.js, 开发语言

下面是一个基本的商城发布系统的关键代码和配置示例,使用Java和Vue实现:

后端代码(Java):

  1. 创建商品实体类(Product.java):
java">public class Product {private String id;private String name;private double price;private int stock;// getters and setters
}
  1. 创建商品服务类(ProductService.java):
java">public class ProductService {private List<Product> products = new ArrayList<>();public List<Product> getAllProducts() {return products;}public void addProduct(Product product) {products.add(product);}public void removeProduct(String id) {products.removeIf(p -> p.getId().equals(id));}
}
  1. 创建控制器类(ProductController.java):
java">@RestController
@RequestMapping("/api/products")
public class ProductController {@Autowiredprivate ProductService productService;@GetMappingpublic List<Product> getAllProducts() {return productService.getAllProducts();}@PostMappingpublic void addProduct(@RequestBody Product product) {productService.addProduct(product);}@DeleteMapping("/{id}")public void removeProduct(@PathVariable String id) {productService.removeProduct(id);}
}
  1. 配置Spring Boot应用程序(Application.java):
java">@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}

前端代码(Vue):

  1. 创建商品列表组件(ProductList.vue):
<template><div><h2>Product List</h2><ul><li v-for="product in products" :key="product.id">{{ product.name }} - ${{ product.price }}<button @click="removeProduct(product.id)">Remove</button></li></ul><h2>Add Product</h2><form @submit.prevent="addProduct"><input type="text" v-model="name" placeholder="Product Name" required><input type="number" v-model="price" placeholder="Product Price" required><input type="submit" value="Add Product"></form></div>
</template><script>
export default {data() {return {products: [],name: '',price: 0};},mounted() {this.loadProducts();},methods: {loadProducts() {fetch('/api/products').then(response => response.json()).then(data => {this.products = data;});},addProduct() {const product = { name: this.name, price: this.price, stock: 0 };fetch('/api/products', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(product)}).then(() => {this.name = '';this.price = 0;this.loadProducts();});},removeProduct(id) {fetch(`/api/products/${id}`, { method: 'DELETE' }).then(() => {this.loadProducts();});}}
};
</script>
  1. 创建主组件(App.vue):
<template><div id="app"><product-list></product-list></div>
</template><script>
import ProductList from './components/ProductList.vue';export default {components: {ProductList}
};
</script>
  1. 创建Vue应用程序(main.js):
javascript">import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;new Vue({render: h => h(App)
}).$mount('#app');
  1. 创建Vue项目的配置文件(vue.config.js):
javascript">module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',ws: true,changeOrigin: true}}}
};

以上是一个基本的商城发布系统的关键代码和配置示例。你可以根据自己的需求进行修改和扩展。


http://www.ppmy.cn/devtools/59453.html

相关文章

《征服数据结构》二叉树

摘要&#xff1a; 1&#xff0c;二叉树的介绍 2&#xff0c;树的常见术语 3&#xff0c;二叉树的特性 1&#xff0c;二叉树的介绍 二叉树(Binary tree)是每个节点最多只有两个分支(即不存在分支度大于 2 的节点)的树结构&#xff0c;两个分支分别是左子树和右子树。除了根节点以…

本人学习保存-macOS打开Navicat提示「“Navicat Premium”已损坏,无法打开。 你应该将它移到废纸篓。」的解决方法

新安装了macOS Ventura&#xff0c;打开Navicat Premium&#xff0c;发现会提示&#xff1a; “Navicat Premium”已损坏&#xff0c;无法打开。 你应该将它移到废纸篓。 遇到这种情况&#xff0c;千万别直接移到废纸篓&#xff0c;是有办法解决的。在这里记录一下解决方案。 …

Linux C++ 052-设计模式之享元模式

Linux C 052-设计模式之享元模式 本节关键字&#xff1a;Linux、C、设计模式、享元模式 相关库函数&#xff1a; 概念 享元模式&#xff08;FlyWeight&#xff09;&#xff0c;运用共享技术有效的支持大量细粒度的对象。 典型的享元模式的例子为文书处理器中以图形结构来表…

视频播放器的问题

<template><div class"app-container"><el-form :model"queryParam" ref"queryForm" :inline"true"><el-form-item label"题目ID&#xff1a;"><el-input v-model"queryParam.id" cle…

安全面试经验分享 | 某安全厂商北京安服工程师实习岗

所面试的公司&#xff1a;某安全厂商 所在城市&#xff1a;北京 面试职位&#xff1a;安服工程师实习岗 面试过程&#xff1a; 腾讯会议&#xff08;视频&#xff09; 面试过程&#xff1a;整体流程就是自我介绍加上一些问题问题balabalabala。。。由于面的岗位是安服工程师…

UNiapp微信小程序Ucharts

效果图如下 以上为加载接口所得数据的玫瑰图与折线图 具体步骤如下 1&#xff0c;将插件导入Hbuiler 所需要的项目中&#xff08;插件地址&#xff1a;秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场&#xff09; 2&#xff0c;导入成功是这样的 3&#xff0c…

Dataset for Stable Diffusion

1.Dataset for Stable Diffusion 笔记来源&#xff1a; 1.Flickr8k数据集处理 2.处理Flickr8k数据集 3.Github&#xff1a;pytorch-stable-diffusion 4.Flickr 8k Dataset 5.dataset_flickr8k.json 6.About Train, Validation and Test Sets in Machine Learning Tarang Shah …

简谈设计模式之桥接模式

桥接模式是一种结构型设计模式, 它将抽象部分和它的实现部分分离, 使它们可以独立变化. 这意味着可以改变它的抽象和它的实现, 而不会相互影响 桥接模式结构 抽象 (Abstraction): 定义抽象类, 并包含一个对实现类对象的引用拓展抽象 (Refined Abstraction): 拓展抽象类, 通过…

堆、栈和队列(数据结构)

堆、栈和队列&#xff08;数据结构&#xff09; 这里写目录标题 堆、栈和队列&#xff08;数据结构&#xff09;**栈****队列**堆&#xff08;Heap&#xff09;&#xff08;&#xff09;队列&#xff08;Queue&#xff09;&#xff08;FIFO&#xff09;栈&#xff08;Stack&…

搜维尔科技:通过 Xsens MVN Link 套装测试动作捕捉动画,由虚幻引擎5渲染

通过Xsens MVN Link套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染 搜维尔科技&#xff1a;通过 Xsens MVN Link 套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染

FPGA实训报告DAY 1(Verilog HDL)

实习日志与总结 日期&#xff1a;2024 年 7 月 10 日 星期三 姓名&#xff1a;XXX 一、实习日志 上午 9:00 - 9:30 按时到达工位&#xff0c;参加部门早会&#xff0c;了解了今天的实习任务和目标&#xff0c;即初步学习 FPGA 简介和 Verilog 基础语法知识。 9:30 - 10:30…

Flask 静态文件处理

1. 静态文件目录 Flask 默认会在应用的根目录下寻找一个名为 static 的文件夹&#xff0c;并将其作为静态文件的存储目录。你可以通过 static_folder 参数来指定不同的静态文件目录路径。 from flask import Flask app Flask(__name__, static_foldermy_static) 2. 静态文件 …

图扑低代码数字孪生 Web SCADA 智慧钢厂

2024 年 4 月&#xff0c;中国钢铁工业协会发布了《钢铁行业数字化转型评估报告&#xff08;2023年&#xff09;》&#xff08;以下简称《报告》&#xff09;。《报告》指出&#xff0c;绝大部分钢铁企业建立了数字化转型相关管理组织和团队&#xff0c;并加强其规划落实&#…

LDAPWordlistHarvester:基于LDAP数据的字典生成工具

关于LDAPWordlistHarvester LDAPWordlistHarvester是一款功能强大的字典列表生成工具&#xff0c;该工具可以根据LDAP中的详细信息生成字典列表文件&#xff0c;广大研究人员随后可以利用生成的字典文件测试目标域账号的非随机密码安全性。 工具特征 1、支持根据LDAP中的详细信…

CentOS 7 网络配置

如想了解请查看 虚拟机安装CentOS7 第一步&#xff1a;查看虚拟机网络编辑器、查看NAT设置 &#xff08;子网ID&#xff0c;网关IP&#xff09; 第二步&#xff1a;配置VMnet8 IP与DNS 注意事项&#xff1a;子网掩码与默认网关与 第一步 保持一致 第三步&#xff1a;网络配置…

初学者指南:如何搭建和配置 Nginx 服务器

初学者指南&#xff1a;如何搭建和配置 Nginx 服务器 Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;也是一个 IMAP/POP3/SMTP 代理服务器。本文将详细介绍如何在 Linux 上安装、配置和管理 Nginx 服务器。 一、安装 Nginx Nginx 可以安装在多种操作系统上&#x…

Window -- redis 服务注册、Mysql 服务注册

Windows 服务注册 cd 进入 Redis 主目录 cd /d F:\Redis-x64-5.0.14.1注册 Redis 为系统服务&#xff0c;并指定配置文件 redis-server --service-install redis.windows.conf --loglevel verbose开启服务 redis-server --service-start停止服务 redis-server --service-s…

关于HDFS 和HBase

Apache HBase 被设计为在 Hadoop 分布式文件系统 (HDFS) 上运行的一个特殊类型的数据库。大白话&#xff1a; 想象一下&#xff0c;你有一个巨大的图书馆&#xff0c;这个图书馆就像 HDFS&#xff0c;它的架子上堆满了各种各样的书籍&#xff0c;每本书都非常厚&#xff0c;而…

安防监控视频平台LntonCVS视频融合共享平台智慧消防实现远程集中视频监控方案

近年来&#xff0c;电力系统内变电站着火事件频发&#xff0c;这对消防安全管理提出了严峻挑战。我国消防安全基础设施不完善、管理机制不健全、应急处置能力不足及公众消防安全意识淡薄等问题&#xff0c;严重制约了消防安全的提升。因此&#xff0c;加强变电站的消防安全管理…

HashMap源码解析

目录 一:put方法流程 二&#xff1a;get方法 三&#xff1a;扩容机制 一&#xff1a;put方法流程 public V put(K key, V value) {return putVal(hash(key), key, value, false, true); }final V putVal(int hash, K key, V value, boolean onlyIfAbsent,boolean evict) {No…