答辩问使用spring boot和 vue如何实现商品的销量排行如何在后端对销量进行排序

使用 Spring Boot 和 Vue 实现商品销量排行需要以下步骤：

1. 在后端定义一个商品类，包含商品名称、价格、销量等属性。
2. 定义一个商品服务类，包含查询商品信息和更新销量的方法。
3. 在前端使用 Vue 实现商品列表的展示和销量的更新。
4. 在后端对商品列表进行排序，按照销量从高到低排列。

具体实现步骤如下：

1. 后端实现：

定义一个商品类，包含商品名称、价格、销量等属性：

public class Product {
    private String name;
    private double price;
    private int sales;
    // 构造方法、getter和setter省略
}

定义一个商品服务类，包含查询商品信息和更新销量的方法：

@Service
public class ProductService {
    private List<Product> productList = new ArrayList<>();
    
    // 添加商品到列表
    public void addProduct(Product product) {
        productList.add(product);
    }
    
    // 获取商品列表
    public List<Product> getProductList() {
        return productList;
    }
    
    // 更新商品销量
    public void updateSales(String name, int sales) {
        for (Product product : productList) {
            if (product.getName().equals(name)) {
                product.setSales(sales);
                break;
            }
        }
    }
}

在控制器中调用商品服务类的方法，将商品信息返回给前端：

@RestController
public class ProductController {
    @Autowired
    private ProductService productService;
    
    @GetMapping("/products")
    public List<Product> getProducts() {
        return productService.getProductList();
    }
}

2. 前端实现：

在 Vue 中定义一个商品列表组件，使用 axios 获取后端的商品数据：

<template>
  <div>
    <h2>商品列表</h2>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>销量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.name">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.sales }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    axios.get("/products").then(response => {
      this.products = response.data;
    });
  }
};
</script>

定义一个更新销量的方法，使用 axios 发送请求到后端更新销量：

<script>
import axios from "axios";

export default {
  methods: {
    updateSales(name, sales) {
      axios.post("/updateSales", {name: name, sales: sales}).then(response => {
        console.log(response.data);
      });
    }
  }
};
</script>

3. 后端实现：

在控制器中定义一个更新销量的方法，接收前端发送的请求，调用商品服务类的更新销量方法：

@RestController
public class ProductController {
    @Autowired
    private ProductService productService;
    
    @PostMapping("/updateSales")
    public String updateSales(@RequestBody Map<String, Object> map) {
        String name = (String) map.get("name");
        int sales = (int) map.get("sales");
        productService.updateSales(name, sales);
        return "success";
    }
}

4. 对销量进行排序：

在商品服务类中定义一个对销量进行排序的方法，使用 Collections.sort() 方法对商品列表进行排序：

@Service
public class ProductService {
    private List<Product> productList = new ArrayList<>();
    
    // 添加商品到列表
    public void addProduct(Product product) {
        productList.add(product);
    }
    
    // 获取商品列表
    public List<Product> getProductList() {
        return productList;
    }
    
    // 更新商品销量
    public void updateSales(String name, int sales) {
        for (Product product : productList) {
            if (product.getName().equals(name)) {
                product.setSales(sales);
                break;
            }
        }
        sortProducts();
    }
    
    // 对商品列表按销量从高到低排序
    private void sortProducts() {
        Collections.sort(productList, new Comparator<Product>() {
            @Override
            public int compare(Product o1, Product o2) {
                return o2.getSales() - o1.getSales();
            }
        });
    }
}