基于Java+SpringBoot+Vue前后端分离仓库管理系统详细设计和实现
由于篇幅所限,以下仅展示核心模块的代码实现。
后端代码(SpringBoot)
// 仓库管理模块
@RestController
@RequestMapping("/api/repository")
public class RepositoryController {
@Autowired
private RepositoryService repositoryService;
// 查询仓库列表
@GetMapping("/list")
public Result list(@RequestParam Map<String, Object> params){
PageUtils page = repositoryService.queryPage(params);
return Result.ok().put("page", page);
}
// 新增或更新仓库信息
@PostMapping("/save")
public Result save(@RequestBody RepositoryEntity repository){
repositoryService.saveOrUpdate(repository);
return Result.ok();
}
// 删除仓库
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable("id") Long id){
repositoryService.delete(id);
return Result.ok();
}
}
前端代码(Vue)
<template>
<div>
<!-- 仓库列表 -->
<el-table :data="repositoryList" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
repositoryList: [],
currentPage: 1,
pageSize: 10,
total: 0,
};
},
methods: {
// 获取仓库列表
fetchRepositoryList() {
this.$http.get('/api/repository/list', {
params: {
page: this.currentPage,
limit: this.pageSize
}
}).then(response => {
const data = response.data;
this.repositoryList = data.list;
this.total = data.totalCount;
});
},
// 编辑仓库
handleEdit(index, row) {
// 跳转到编辑页面
},
// 删除仓库
handleDelete(index, row) {
this.$http.delete('/api/r
评论已关闭