SpringBoot+Vue构建凭证档案管理系统全流程实操

package com.example.vouchersystem.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.vouchersystem.entity.VoucherArchive;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface VoucherArchiveMapper extends BaseMapper {
}

Service 层同理。创建 src/main/java/com/example/vouchersystem/service/VoucherArchiveService.java：

package com.example.vouchersystem.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.example.vouchersystem.entity.VoucherArchive;
public interface VoucherArchiveService extends IService {
}

创建实现类 src/main/java/com/example/vouchersystem/service/impl/VoucherArchiveServiceImpl.java：

package com.example.vouchersystem.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.vouchersystem.entity.VoucherArchive;
import com.example.vouchersystem.mapper.VoucherArchiveMapper;
import com.example.vouchersystem.service.VoucherArchiveService;
import org.springframework.stereotype.Service;
@Service
public class VoucherArchiveServiceImpl extends ServiceImpl implements VoucherArchiveService {
// 暂无特殊业务逻辑，使用父类默认方法即可
}

5. 编写控制层

创建 src/main/java/com/example/vouchersystem/controller/VoucherArchiveController.java，实现列表查询和新增接口，并配置跨域支持：

package com.example.vouchersystem.controller;
import com.example.vouchersystem.entity.VoucherArchive;
import com.example.vouchersystem.service.VoucherArchiveService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.web.bind.annotation.;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import java.util.List;
@RestController
@RequestMapping("/api/vouchers")
public class VoucherArchiveController {
@Autowired
private VoucherArchiveService voucherArchiveService;
// 跨域配置 Bean，解决前后端分离开发时的跨域问题
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("");
config.setAllowCredentials(true);
config.addAllowedMethod("");
config.addAllowedHeader("");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/", config);
return new CorsFilter(source);
}
@GetMapping
public List list() {
return voucherArchiveService.list();
}
@PostMapping
public boolean save(@RequestBody VoucherArchive voucher) {
return voucherArchiveService.save(voucher);
}
}

四、前端页面搭建

前端使用 Vue 3 配合 Element Plus 组件库实现管理界面。

1. 初始化 Vue 项目

在终端执行以下命令创建项目：

npm create vue@latest voucher-admin
cd voucher-admin
npm install

安装 Element Plus 和 Axios：

npm install element-plus axios

2. 配置入口文件

修改 src/main.js，引入 Element Plus 样式和组件：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('app')

3. 封装 API 请求

在 src 目录下创建 utils/request.js：

import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request

创建 src/api/voucher.js：

import request from '../utils/request'
export const getVoucherList = () => {
return request({
url: '/api/vouchers',
method: 'get'
})
}
export const addVoucher = (data) => {
return request({
url: '/api/vouchers',
method: 'post',
data
})
}

4. 编写主页面组件

修改 src/App.vue，编写完整的列表展示和新增功能代码：

五、运行与测试

1. 启动后端服务

在 IDE 中运行 VoucherSystemApplication 主类，或在项目根目录执行：

mvn spring-boot:run

看到控制台输出 Started VoucherSystemApplication 表示后端启动成功。

2. 启动前端服务

在终端进入前端项目目录 voucher-admin，执行：

npm run dev

终端会输出访问地址，通常是 http://localhost:5173。使用浏览器访问该地址，即可看到凭证档案管理系统的主界面。点击“新增凭证”输入数据，确认后表格将实时刷新显示最新数据。