Springboot+Vue的失物招领项目代码

Spring Boot + Vue.js 配合构建一个失物招领项目的代码会涉及到前端和后端两个部分。这里是一个简化的概述：

1. **后端（Spring Boot）**:

- 创建一个新的Spring Boot项目：`mvn spring-boot-starter-web`
- 建立数据模型，比如`LostItem`，包含属性如ID、描述、丢失地点等。
- 使用JPA或Spring Data REST创建数据库访问层，管理LostItem实体。
- 定义REST API，如`/items`用于获取物品列表，`/items/{id}`用于查找特定ID的失物。

@RestController
@RequestMapping("/api/items")
public class LostItemController {
    @Autowired
    private LostItemRepository lostItemRepository;

    // 示例API
    @GetMapping
    public List<LostItem> getAllItems() {
        return lostItemRepository.findAll();
    }

    @GetMapping("/{id}")
    public ResponseEntity<LostItem> getItemById(@PathVariable Long id) {
        Optional<LostItem> item = lostItemRepository.findById(id);
        if (item.isPresent()) {
            return ResponseEntity.ok(item.get());
        } else {
            return ResponseEntity.notFound().build();
        }
    }
}

2. **前端（Vue.js）**:

- 使用vue-cli创建新项目：`vue create lost-and-found`
- 设计用户界面，包括搜索框、列表展示、详情页等。
- 利用axios发起对后端API的请求，显示和操作失物信息。

<!-- src/App.vue -->
<template>
  <div>
    <input v-model="searchText" placeholder="Search for items...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.description }} | Lost at: {{ item.location }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchText: '',
      items: [],
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.description.includes(this.searchText));
    },
  },
  async mounted() {
    await axios.get('/api/items').then(response => {
      this.items = response.data;
    });
  },
};
</script>