3.美食推荐系统（Java项目springboot和vue）

美食推荐系统（Java项目 Spring Boot 和 Vue）

在这个互联网时代，美食已经不仅仅是满足口腹之欲，更是一种社交文化和生活方式。为了帮助用户找到合适的美食，我们可以开发一个美食推荐系统。这个系统可以基于用户的个人口味、历史记录和其他用户的评价为用户推荐美食。本文将介绍如何使用 Java 的 Spring Boot 框架作为后端和 Vue.js 作为前端来实现一个简单的美食推荐系统。

一、项目结构

我们的项目结构将包括以下几个模块： - 前端：使用 Vue.js。 - 后端：使用 Spring Boot。 - 数据库：使用 MySQL 存储美食信息和用户评价。

二、后端实现

1. 实体类

首先，我们需要定义美食和用户评价的实体类。

@Entity
public class Food {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String description;
    private String category;
    private double rating;

    // Getters and Setters
}

@Entity
public class Review {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @ManyToOne
    @JoinColumn(name = "food_id")
    private Food food;

    private String username;
    private String comment;
    private int stars;

    // Getters and Setters
}

1. Repository

接下来，我们需要创建 repository，用于与数据库交互。

public interface FoodRepository extends JpaRepository<Food, Long> {
    List<Food> findByCategory(String category);
}

public interface ReviewRepository extends JpaRepository<Review, Long> {
    List<Review> findByFood(Food food);
}

1. 服务层

实现服务层，处理业务逻辑。

@Service
public class FoodService {
    @Autowired
    private FoodRepository foodRepository;

    @Autowired
    private ReviewRepository reviewRepository;

    public List<Food> getAllFoods() {
        return foodRepository.findAll();
    }

    public List<Food> getFoodsByCategory(String category) {
        return foodRepository.findByCategory(category);
    }

    public void addReview(Long foodId, Review review) {
        Food food = foodRepository.findById(foodId).orElseThrow(() -> new RuntimeException("Food not found"));
        review.setFood(food);
        reviewRepository.save(review);
    }
}

1. 控制器

然后，我们需要编写控制器，处理 HTTP 请求。

@RestController
@RequestMapping("/api/foods")
public class FoodController {
    @Autowired
    private FoodService foodService;

    @GetMapping
    public List<Food> getFoods() {
        return foodService.getAllFoods();
    }

    @GetMapping("/category/{category}")
    public List<Food> getFoodsByCategory(@PathVariable String category) {
        return foodService.getFoodsByCategory(category);
    }

    @PostMapping("/{id}/review")
    public ResponseEntity<Void> postReview(@PathVariable Long id, @RequestBody Review review) {
        foodService.addReview(id, review);
        return ResponseEntity.ok().build();
    }
}

三、前端实现

1. 安装 Vue CLI

首先，确保已经安装了 Vue CLI，然后创建一个新项目。

vue create food-recommendation

1. 安装 Axios

我们将使用 Axios 进行 HTTP 请求。

cd food-recommendation
npm install axios

1. 界面设计

在 src/components 下创建一个新的组件 FoodList.vue。

<template>
  <div>
    <h1>美食推荐系统</h1>
    <ul>
      <li v-for="food in foods" :key="food.id">
        {{ food.name }} - {{ food.description }} 
        <button @click="addReview(food.id)">添加评价</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      foods: [],
    };
  },
  created() {
    this.fetchFoods();
  },
  methods: {
    fetchFoods() {
      axios.get('http://localhost:8080/api/foods').then(response => {
        this.foods = response.data;
      });
    },
    addReview(foodId) {
      const review = {
        username: '用户1',
        comment: '美味可口',
        stars: 5,
      };
      axios.post(`http://localhost:8080/api/foods/${foodId}/review`, review).then(() => {
        alert('评价已提交！');
      });
    }
  }
};
</script>

四、运行项目

1. 启动 Spring Boot 后端服务。

mvn spring-boot:run

1. 启动 Vue 前端项目。

npm run serve

通过以上步骤，我们就完成了一个简单的美食推荐系统的搭建。在这个系统中，用户可以查看美食信息并对美食进行评价。在未来的版本中，可以添加更多的功能，比如基于用户评价的推荐算法、用户登录系统等等，通过逐步迭代来增强系统的实用性和用户体验。