Spring Boot + Vue的网上商城之订单商品评价实现

Spring Boot + Vue的网上商城之订单商品评价实现

在网上商城中，用户下单购买商品后，通常会有一个订单评价的功能，用户可以对购买的商品进行评价和打分。本篇博客将介绍如何使用Spring Boot和Vue.js实现订单商品评价功能，包括后端实现和前台实现。

思路

Spring Boot + Vue的网上商城之订单商品评价实现的步骤如下：

1. 在后端使用Spring Boot创建订单和商品评价的实体类，并使用JPA创建相应的数据访问层接口。
2. 在后端创建订单和商品评价的控制器，处理相应的API接口。
3. 在前端使用Vue创建订单列表和商品评价列表的组件，通过调用后端API接口获取数据。
4. 配置前端的路由，使得可以通过访问相应的路由来展示订单和商品评价的数据。

通过以上步骤，我们就实现了一个简单的网上商城的订单和商品评价功能。可以根据实际需求进行扩展和优化。

后端实现

数据库设计

首先，我们需要设计数据库表来存储订单和商品评价的相关信息。我们可以创建两个表：Order和Evaluation。Order表用于存储订单信息，包括订单ID、用户ID、商品ID等字段。Evaluation表用于存储商品评价信息，包括评价ID、订单ID、评分、评论内容等字段。

实体类设计

在Spring Boot中，我们需要创建实体类来映射数据库表。我们可以创建两个实体类：Order和Evaluation。Order类的代码如下：

@Entity
@Table(name = "orders")
public class Order {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "user_id")
    private Long userId;

    @Column(name = "product_id")
    private Long productId;

    // 省略其他字段、构造方法和Getter/Setter方法
}

Evaluation类的代码如下：

@Entity
@Table(name = "evaluations")
public class Evaluation {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "order_id")
    private Long orderId;

    private Integer score;

    private String comment;

    // 省略其他字段、构造方法和Getter/Setter方法
}

数据访问层

接下来，我们需要创建数据访问层来操作数据库。我们可以使用Spring Data JPA来简化数据访问的操作。首先，我们需要创建OrderRepository接口和EvaluationRepository接口，继承自JpaRepository。代码如下：

public interface OrderRepository extends JpaRepository<Order, Long> {
    List<Order> findByUserId(Long userId);
}

public interface EvaluationRepository extends JpaRepository<Evaluation, Long> {
    List<Evaluation> findByOrderId(Long orderId);
}

业务逻辑层

在业务逻辑层中，我们需要实现订单和商品评价的相关业务逻辑。首先，我们需要创建OrderService接口和EvaluationService接口，用于定义相关的方法。代码如下：

public interface OrderService {
    List<Order> getOrdersByUserId(Long userId);
}

public interface EvaluationService {
    List<Evaluation> getEvaluationsByOrderId(Long orderId);
    void addEvaluation(Long orderId, Integer score, String comment);
}

然后，我们需要创建OrderServiceImpl类和EvaluationServiceImpl类，实现上述接口中的方法。代码如下：

@Service
public class OrderServiceImpl implements OrderService {
    @Autowired
    private OrderRepository orderRepository;

    @Override
    public List<Order> getOrdersByUserId(Long userId) {
        return orderRepository.findByUserId(userId);
    }
}

@Service
public class EvaluationServiceImpl implements EvaluationService {
    @Autowired
    private EvaluationRepository evaluationRepository;

    @Override
    public List<Evaluation> getEvaluationsByOrderId(Long orderId) {
        return evaluationRepository.findByOrderId(orderId);
    }

    @Override
    public void addEvaluation(Long orderId, Integer score, String comment) {
        Evaluation evaluation = new Evaluation();
        evaluation.setOrderId(orderId);
        evaluation.setScore(score);
        evaluation.setComment(comment);
        evaluationRepository.save(evaluation);
    }
}

控制器层

最后，我们需要创建控制器层来处理HTTP请求。我们可以使用@RestController注解来标记控制器类，并使用@RequestMapping注解来定义请求路径。代码如下：

@RestController
@RequestMapping("/api/orders")
public class OrderController {
    @Autowired
    private OrderService orderService;

    @GetMapping("/{userId}")
    public List<Order> getOrdersByUserId(@PathVariable Long userId) {
        return orderService.getOrdersByUserId(userId);
    }
}

@RestController
@RequestMapping("/api/evaluations")
public class EvaluationController {
    @Autowired
    private EvaluationService evaluationService;

    @GetMapping("/{orderId}")
    public List<Evaluation> getEvaluationsByOrderId(@PathVariable Long orderId) {
        return evaluationService.getEvaluationsByOrderId(orderId);
    }

    @PostMapping("/{orderId}")
    public void addEvaluation(@PathVariable Long orderId, @RequestBody EvaluationRequest evaluationRequest) {
        evaluationService.addEvaluation(orderId, evaluationRequest.getScore(), evaluationRequest.getComment());
    }
}

在以上代码中，我们使用@GetMapping注解和@PostMapping注解来定义HTTP请求的处理方法。其中，@PathVariable注解用于获取URL路径中的参数，@RequestBody注解用于获取请求体中的参数。

前台实现

在前台实现中，我们将使用Vue.js来实现一个简单的订单商品评价页面。首先，我们需要使用Vue CLI创建一个Vue.js项目。打开命令行工具，执行以下命令：

vue create frontend

然后，选择默认配置，等待项目创建完成。

接下来，我们需要在项目中添加axios和vue-router的依赖项。在命令行中执行以下命令：

cd frontend
npm install axios vue-router

然后，我们需要在src/main.js文件中添加axios和vue-router的配置。修改后的代码如下：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import router from './router';

Vue.use(VueAxios, axios);

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

现在，我们可以在src/views目录下创建一个名为OrderList.vue的文件，用于显示用户的订单列表。代码如下：

<template>
  <div>
    <h2>订单列表</h2>
    <ul>
      <li v-for="order in orders" :key="order.id">
        订单ID：{{ order.id }}，商品ID：{{ order.productId }}
        <button @click="goToEvaluation(order.id)">评价</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      orders: []
    };
  },
  mounted() {
    this.getOrders();
  },
  methods: {
    getOrders() {
      const userId = 1; // 假设当前用户的ID为1
      axios.get(`/api/orders/${userId}`).then(response => {
        this.orders = response.data;
      });
    },
    goToEvaluation(orderId) {
      this.$router.push(`/evaluation/${orderId}`);
    }
  }
};
</script>

在以上代码中，我们使用v-for指令将订单列表渲染到页面上，并为每个订单添加一个"评价"按钮。当用户点击"评价"按钮时，将跳转到评价页面。

接下来，我们需要在src/views目录下创建一个名为Evaluation.vue的文件，用于显示商品评价页面。代码如下：

<template>
  <div>
    <h2>商品评价</h2>
    <form @submit.prevent="submitEvaluation">
      <label>评分：</label>
      <select v-model="score">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
      <br>
      <label>评论：</label>
      <textarea v-model="comment"></textarea>
      <br>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      score: 5,
      comment: ''
    };
  },
  methods: {
    submitEvaluation() {
      const orderId = this.$route.params.orderId;
      axios.post(`/api/evaluations/${orderId}`, {
        score: this.score,
        comment: this.comment
      }).then(() => {
        alert('评价成功');
      });
    }
  }
};
</script>

至此，我们已经完成了前台的实现，可以通过访问相应的路由来展示订单和商品评价的数据。

以上是Spring Boot + Vue的网上商城之订单商品评价实现的详细介绍以及代码案例。希望本篇博客对你有所帮助！