vue.js+ElementUI+springboot高校失物招领系统平台38tp1
由于您的问题没有提供具体的代码问题,我将提供一个使用Vue.js、ElementUI和Spring Boot创建的高校失物招领系统的简化框架示例。
后端(Spring Boot):
@RestController
@RequestMapping("/lost-and-found")
public class LostAndFoundController {
// 假设有一个服务层处理失物招领的相关逻辑
@Autowired
private LostAndFoundService lostAndFoundService;
@GetMapping("/items")
public ResponseEntity<List<LostItem>> getLostItems() {
List<LostItem> items = lostAndFoundService.getLostItems();
return ResponseEntity.ok(items);
}
@PostMapping("/items")
public ResponseEntity<Void> reportLostItem(@RequestBody LostItem lostItem) {
lostAndFoundService.reportLostItem(lostItem);
return ResponseEntity.created(URI.create("/lost-and-found/items/" + lostItem.getId())).build();
}
// 其他API端点...
}
前端(Vue.js + ElementUI):
<template>
<div>
<el-table :data="lostItems" style="width: 100%">
<el-table-column prop="name" label="物品名称"></el-table-column>
<el-table-column prop="category" label="物品类别"></el-table-column>
<!-- 其他列定义 -->
</el-table>
<el-form ref="lostItemForm" :model="lostItem" label-width="80px">
<el-form-item label="物品名称">
<el-input v-model="lostItem.name"></el-input>
</el-form-item>
<!-- 其他输入字段 -->
<el-form-item>
<el-button type="primary" @click="submitForm">确认</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
lostItems: [],
lostItem: {
name: '',
category: '',
// 其他属性
}
};
},
created() {
this.fetchLostItems();
},
methods: {
fetchLostItems() {
this.axios.get('/api/lost-and-found/items')
.then(response => {
this.lostItems = response.data;
})
.catch(error => {
console.error('Failed to fetch lost items:', error);
});
},
submitForm() {
this.axios.post('/api/lost-and-found/items', this.lostItem)
.then(resp
评论已关闭