开发实例：后端Java和前端vue实现商品信息管理功能

用户1289394

发布于 2024-01-10 10:01:41

1560

发布于 2024-01-10 10:01:41

商品信息管理也是一个常见的功能，可以用Java和Vue来实现。具体步骤如下：

1、创建数据库表需要创建一个Product表来存储商品信息。表格中应该包含以下字段：id（主键）、name（商品名）、description（商品描述）、price（商品价格）以及其他一些必要的字段。

2、创建Java后端API 创建后端API来获取商品数据并将其存储到数据库中。同样可以使用Spring Boot框架来创建，并使用JPA实现数据库操作。实现API之前，需要确保数据库连接正确配置，具体方法可以查阅相关文献或寻求专业人员的帮助。

3、创建Vue前端页面在Vue中，可以创建一个商品列表用来展示所有产品，并定义相应的搜索、新增、修改和删除等元素。通过AJAX请求，可以从后端API接收到商品信息并展示在列表中。

4、连接前端与后端前端和后端之间的交互可以通过RESTful API完成。即前端发送HTTP请求规定的地址和处理方式，后端接收这个请求并所对应处理。通常情况下，前端框架已经提供了Ajax、Axios等等HTTP请求库。

下面是一个简单的实例代码（仅供参考）：

首先，需要创建商品信息的实体类。

public class Product {
    private String id;
    private String name;
    private BigDecimal price;
    private int stock;
    private String category;
   // getters and setters
}

接着，创建商品信息管理的数据模型类。

public class ProductManagement {
    private List<Product> productList;

    public List<Product> getProductList() {
        return productList;
    }

    public void setProductList(List<Product> productList) {
        this.productList = productList;
    }
}

接下来，，实现商品信息的添加、修改和删除功能。

public class ProductController {
    private ProductManagement productManagement;

    public ProductController(ProductManagement productManagement) {
        this.productManagement = productManagement;
    }

    public void addProduct() {
        Product product = new Product();
        productManagement.setProductList(productManagement.getProductList().add(product));
    }

    public void updateProduct() {
        Product product = productManagement.getProductList().stream()
                .filter(p -> p.getId().equals(productManagement.getProductId()))
                .findFirst()
                .orElseThrow(() -> new RuntimeException("Product not found"));
        product.setName(productManagement.getProductName());
        product.setPrice(productManagement.getProductPrice());
        product.setStock(productManagement.getProductStock());
        productManagement.setProductList(productManagement.getProductList().update(productManagement.getProductId(), product));
    }

    public void deleteProduct() {
        Product product = productManagement.getProductList().stream()
                .filter(p -> p.getId().equals(productManagement.getProductId()))
                .findFirst()
                .orElseThrow(() -> new RuntimeException("Product not found"));
        productManagement.setProductList(productManagement.getProductList().delete(productManagement.getProductId()));
    }
}

Vue.js

在Vue.js中，需要使用axios进行异步请求，实现与后端API的交互。

<template>
  <div>
    <form @submit.prevent="addProduct">
      <div>
        <label>Name:</label>
        <input v-model="productName" />
      </div>
      <div>
        <label>Price:</label>
        <input v-model.number.min="0" v-model.step="0.01" v-model="productPrice" />
      </div>
      <div>
        <label>Stock:</label>
        <input v-model.number.min="0" v-model.step="1" v-model="productStock" />
      </div>
      <div>
        <label>Category:</label>
        <select v-model="productCategory">
          <option v-for="category in productCategories" :value="category">{{ category }}</option>
        </select>
      </div>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      productList: [],
      productName: "",
      productPrice: 0,
      productStock: 0,
      productCategory: [],
    };
  },
  async created() {
    await this.getProductList();
  },
  methods: {
    async getProductList() {
      const response = await axios.get("/api/products");
      this.productList = response.data.map(product => new Product(product));
    },
    async addProduct() {
      if (this.productName.trim() === "") {
        alert("Please enter a product name");
        return;
      }
      if (isNaN(this.productPrice)) {
        alert("Please enter a valid price");
        return;
      }
      if (this.productStock <= 0) {
        alert("Please enter a valid stock");
        return;
      }
      if (this.productPrice <= 0) {
        alert("Please enter a valid price");
        return;
      }
      const response = await axios.post("/api/products", {
        name: this.productName,
        price: this.productPrice,
        stock: this.productStock,
        category: this.productCategory[0],
      });
      this.productName = "";
      this.productPrice = 0;
      this.productStock = 0;
      this.productCategory = [];
      this.getProductList();
    },
    async updateProduct() {
      if (this.productId === "") {
        alert("Please select a product");
        return;
      }
      if (this.productName.trim() === "") {
        alert("Please enter a product name");
        return;
      }
      if (isNaN(this.productPrice)) {
        alert("Please enter a valid price");
        return;
      }
      if (this.productStock <= 0) {
        alert("Please enter a valid stock");
        return;
      }
      const response = await axios.put(`/api/products/${this.productId}`, {
        name: this.productName,
        price: this.productPrice,
        stock: this.productStock,
        category: this.productCategory[0],
      });
      this.productName = "";
      this.productPrice = 0;
      this.productStock = 0;
      this.productCategory = [];
      this.getProductList();
    },
    async deleteProduct() {
      if (this.productId === "") {
        alert("Please select a product");
        return;
      }
      const response = await axios.delete(`/api/products/${this.productId}`);
      this.getProductList();
    },
  },
};
</script>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

数据库