news 2026/7/7 15:20:51

Spring Boot+Vue高校固定资产管理系统毕业设计实战指南

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Spring Boot+Vue高校固定资产管理系统毕业设计实战指南

🚀 30+款热门AI模型一站整合,DeepSeek/GLM/Qwen 随心用,限时 5 折。 👉 点击领海量免费额度

在实际的计算机专业毕业设计项目中,选择一个既能体现技术栈综合运用,又能解决实际业务问题的课题至关重要。高校固定资产管理系统正是这样一个典型场景,它要求开发者不仅要掌握 Spring Boot 后端开发和 Vue.js 前端开发,还需要理解资产管理的核心业务流程,如资产入库、领用、维修、报废等。许多同学在选题后,往往卡在如何将 Spring Boot 与 Vue 有效整合、如何设计合理的数据库表结构、如何实现前后端数据交互以及如何撰写规范的开题报告和论文上。

本文将围绕“基于 Spring Boot + Vue 的高校固定资产管理系统”这一毕设课题,为你提供一个从技术选型、环境搭建、核心功能实现到项目部署的完整实践指南。无论你是计算机科学与技术、软件工程还是相关专业的学生,通过本文,你将能够理解如何构建一个前后端分离的 Web 应用,掌握 Spring Boot 整合 MyBatis-Plus、Vue 使用 Element UI 组件库、Axios 进行 HTTP 通信等关键技术,并最终获得一个可运行、可演示、具备完整增删改查及业务流程的毕业设计项目。文章后半部分还会针对毕设过程中常见的代码调试、部署报错、论文结构等问题提供具体的排查思路和解决方案。

1. 理解高校固定资产管理系统的核心业务与架构

在动手编码之前,必须先厘清系统要解决什么问题,以及采用何种技术架构来实现。这直接关系到后续数据库设计、接口设计和模块划分的合理性。

1.1 系统核心业务流程与角色

一个典型的高校固定资产管理系统涉及以下核心业务流程和参与角色:

  • 资产全生命周期管理:包括资产的采购申请、入库登记、日常领用/借用、位置调拨、定期盘点、维修申请、报废处置等环节。每个环节都应有状态流转和记录。
  • 多角色协同
    • 系统管理员:管理用户、角色、权限、部门等基础数据。
    • 资产管理员:负责资产的入库、信息维护、调拨、盘点单生成与审核。
    • 普通教职工/学生:申请领用、借用资产,查看个人名下资产,报修。
    • 部门负责人:审批本部门的资产领用、调拨申请。
    • 维修人员:处理资产报修单,更新维修状态。
  • 统计与报表:系统需要按部门、资产类别、时间维度统计资产数量、价值、状态,并生成报表,为管理决策提供支持。

1.2 前后端分离技术栈选型与职责

基于 Spring Boot 和 Vue.js 的前后端分离架构是目前企业级 Web 开发的主流模式,也非常适合作为毕业设计的技术展示。

  • 后端 (Spring Boot)
    • 框架:Spring Boot 2.7.x (选择长期支持版本,如 2.7.18),用于快速构建、配置和启动 Spring 应用。
    • 数据层:MyBatis-Plus,极大简化单表 CRUD 操作,内置分页、代码生成器等实用功能。
    • 数据库:MySQL 8.0 或 5.7,关系型数据库,用于存储结构化数据。
    • 权限控制:Spring Security 或 Sa-Token,实现用户认证和接口权限拦截。
    • 项目构建:Maven,管理项目依赖。
    • 核心职责:提供 RESTful API 接口;处理业务逻辑;操作数据库;进行权限校验;处理文件上传/下载等。
  • 前端 (Vue.js)
    • 框架:Vue 3 (Composition API) 或 Vue 2 (Options API),根据熟悉程度选择。Vue 3 是趋势。
    • 构建工具:Vite,替代 Webpack,提供极速的冷启动和模块热更新。
    • UI 组件库:Element Plus (对应 Vue 3) 或 Element UI (对应 Vue 2),提供丰富的后台管理组件。
    • HTTP 客户端:Axios,用于调用后端 API。
    • 路由:Vue Router,管理前端页面路由。
    • 状态管理:Pinia (Vue 3 推荐) 或 Vuex,管理跨组件共享的状态(如用户登录信息)。
    • 核心职责:构建用户界面;通过 API 与后端交互;管理前端路由和状态;实现页面交互逻辑。

1.3 系统功能模块划分

根据业务,我们可以将系统划分为以下几个主要模块,这也有助于后续的数据库设计和接口设计:

  1. 系统管理模块:用户管理、角色管理、菜单/权限管理、部门管理、操作日志。
  2. 资产管理模块:资产分类管理、资产信息管理(增删改查)、资产入库、资产图片上传。
  3. 流程管理模块:资产领用/借用申请与审批、资产调拨申请与审批、资产维修报修与处理、资产报废申请与审批。
  4. 盘点管理模块:生成盘点任务、扫码或手动盘点、生成盘盈盘亏报告。
  5. 统计报表模块:资产总览仪表盘、资产分类统计、部门资产统计、资产价值趋势分析。

2. 开发环境准备与项目初始化

一个稳定、一致的开发环境是项目顺利推进的基础。以下是详细的准备步骤。

2.1 后端 Spring Boot 项目初始化

使用 Spring Initializr 或 IDE 内置工具快速创建项目。

  1. 使用 IDEA 创建

    • 打开 IntelliJ IDEA,选择File -> New -> Project
    • 选择Spring Initializr,指定 Project SDK (如 JDK 11 或 17)。
    • 填写项目元数据:Group(如com.university),Artifact(如asset-management),Type选 Maven,Java Version选 11 或 17。
    • Dependencies中搜索并添加:Spring Web,Spring Security,MyBatis Framework,MySQL Driver,Lombok
    • 点击Finish生成项目。
  2. 关键依赖 (pom.xml) 补充: 生成的项目需要额外添加 MyBatis-Plus 等依赖。打开pom.xml,在<dependencies>节点内添加:

    <!-- MyBatis-Plus 启动器 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> <!-- MyBatis-Plus 代码生成器 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-generator</artifactId> <version>3.5.3.1</version> <scope>compile</scope> </dependency> <!-- 模板引擎,代码生成器需要 --> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity-engine-core</artifactId> <version>2.3</version> </dependency> <!-- JWT 用于 Token 认证 (如果选用) --> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <!-- Hutool 工具类 --> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.8.16</version> </dependency>
  3. 数据库配置 (application.yml): 在src/main/resources/下创建application.yml,配置数据源和 MyBatis-Plus:

    server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/university_asset_db?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: your_password servlet: multipart: max-file-size: 10MB max-request-size: 100MB mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL,调试用,生产环境关闭 global-config: db-config: logic-delete-field: deleted # 全局逻辑删除字段名 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值 mapper-locations: classpath*:/mapper/**/*.xml

2.2 前端 Vue 项目初始化

使用 Vite 快速搭建 Vue 3 项目。

  1. 创建项目: 打开终端,执行以下命令:

    # 使用 npm npm create vue@latest asset-management-frontend # 或使用 yarn yarn create vue asset-management-frontend

    按照提示选择需要的特性:TypeScript(可选),JSX(否),Vue Router(是),Pinia(是),ESLint(是)。

  2. 安装核心依赖: 进入项目目录并安装 Element Plus 和 Axios。

    cd asset-management-frontend npm install npm install element-plus axios # 安装图标库 npm install @element-plus/icons-vue
  3. 配置 Element Plus 和 Axios

    • src/main.ts中全局引入 Element Plus:
    import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' // 引入 Element Plus 及样式 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 引入图标组件(按需) import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(createPinia()) app.use(router) app.use(ElementPlus) app.mount('#app')
    • src/utils/下创建request.ts,配置 Axios 实例,统一处理请求和响应:
    import axios from 'axios' import { ElMessage } from 'element-plus' import router from '@/router' const service = axios.create({ baseURL: 'http://localhost:8080/api', // 后端 API 基础路径 timeout: 10000 }) // 请求拦截器:添加 Token service.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config }, error => { return Promise.reject(error) } ) // 响应拦截器:统一处理错误 service.interceptors.response.use( response => { const res = response.data // 假设后端统一返回格式为 { code: 200, data: {}, msg: 'success' } if (res.code !== 200) { ElMessage.error(res.msg || 'Error') // 如果是 401 未授权,跳转到登录页 if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.msg || 'Error')) } else { return res } }, error => { ElMessage.error(error.message || 'Request Failed') return Promise.reject(error) } ) export default service

3. 数据库设计与核心功能实现

数据库设计是系统的基石,核心功能的实现则围绕数据库操作展开。

3.1 核心表结构设计

以下为几个关键表的设计示例(字段仅为示例,需根据实际业务扩充):

用户表 (sys_user)

CREATE TABLE `sys_user` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `username` varchar(50) NOT NULL COMMENT '用户名', `password` varchar(100) NOT NULL COMMENT '密码', `real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名', `department_id` bigint DEFAULT NULL COMMENT '所属部门ID', `email` varchar(100) DEFAULT NULL COMMENT '邮箱', `phone` varchar(20) DEFAULT NULL COMMENT '手机号', `avatar` varchar(500) DEFAULT NULL COMMENT '头像', `status` tinyint DEFAULT '1' COMMENT '状态(0禁用,1启用)', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', `deleted` tinyint DEFAULT '0' COMMENT '逻辑删除(0未删,1已删)', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

资产信息表 (asset_info)

CREATE TABLE `asset_info` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '资产ID', `asset_code` varchar(50) NOT NULL COMMENT '资产编号(唯一)', `asset_name` varchar(200) NOT NULL COMMENT '资产名称', `category_id` bigint NOT NULL COMMENT '资产分类ID', `specification` varchar(500) DEFAULT NULL COMMENT '规格型号', `unit` varchar(20) DEFAULT NULL COMMENT '计量单位', `price` decimal(15,2) DEFAULT NULL COMMENT '单价', `purchase_date` date DEFAULT NULL COMMENT '购置日期', `supplier` varchar(200) DEFAULT NULL COMMENT '供应商', `status` tinyint DEFAULT '1' COMMENT '资产状态(1在库,2领用中,3维修中,4报废)', `location` varchar(200) DEFAULT NULL COMMENT '存放地点', `current_keeper_id` bigint DEFAULT NULL COMMENT '当前保管人ID(用户ID)', `department_id` bigint DEFAULT NULL COMMENT '所属部门ID', `remark` text COMMENT '备注', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `deleted` tinyint DEFAULT '0', PRIMARY KEY (`id`), UNIQUE KEY `uk_asset_code` (`asset_code`), KEY `idx_category` (`category_id`), KEY `idx_status` (`status`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='资产信息表';

资产领用记录表 (asset_borrow)

CREATE TABLE `asset_borrow` ( `id` bigint NOT NULL AUTO_INCREMENT, `asset_id` bigint NOT NULL COMMENT '资产ID', `applicant_id` bigint NOT NULL COMMENT '申请人ID', `borrow_reason` varchar(500) DEFAULT NULL COMMENT '领用事由', `expected_return_date` date DEFAULT NULL COMMENT '预计归还日期', `actual_return_date` date DEFAULT NULL COMMENT '实际归还日期', `status` tinyint DEFAULT '1' COMMENT '状态(1申请中,2已批准,3已拒绝,4已领取,5已归还)', `approver_id` bigint DEFAULT NULL COMMENT '审批人ID', `approve_opinion` varchar(500) DEFAULT NULL COMMENT '审批意见', `approve_time` datetime DEFAULT NULL COMMENT '审批时间', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_asset` (`asset_id`), KEY `idx_applicant` (`applicant_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='资产领用记录表';

其他表如角色表 (sys_role)、菜单表 (sys_menu)、资产分类表 (asset_category)、部门表 (sys_department)、维修记录表 (asset_maintenance) 等也需要类似设计。

3.2 使用 MyBatis-Plus 代码生成器

手动编写每个实体类、Mapper 接口和 Service 非常耗时。MyBatis-Plus 的代码生成器可以一键生成这些基础代码。

  1. src/test/java下创建CodeGenerator类。
  2. 配置数据源、包名、表名等参数后运行。
  3. 生成后的代码结构通常为:
    src/main/java/com/university/ ├── entity/ # 实体类,对应数据库表 ├── mapper/ # Mapper 接口,继承 BaseMapper ├── service/ # Service 接口,继承 IService └── service/impl/# Service 实现类,继承 ServiceImpl
  4. 对于复杂的联表查询,可以在resources/mapper/下编写自定义的 XML 映射文件。

3.3 实现用户登录与 JWT 认证

  1. 实体与 Mapper:使用代码生成器生成User实体和UserMapper
  2. Service 层:创建UserService,实现根据用户名查询用户的方法。
  3. Controller 层:创建AuthController,处理登录请求。
    @RestController @RequestMapping("/api/auth") public class AuthController { @Autowired private UserService userService; @Autowired private PasswordEncoder passwordEncoder; // Spring Security 的密码编码器 @PostMapping("/login") public Result login(@RequestBody LoginForm form) { // 1. 查询用户 User user = userService.lambdaQuery().eq(User::getUsername, form.getUsername()).one(); if (user == null) { return Result.error("用户不存在"); } // 2. 校验密码 if (!passwordEncoder.matches(form.getPassword(), user.getPassword())) { return Result.error("密码错误"); } // 3. 生成 JWT Token (使用 Hutool 或 jjwt) String token = JwtUtil.generateToken(user.getId(), user.getUsername()); // 4. 返回用户信息和 Token (注意清除敏感信息) Map<String, Object> data = new HashMap<>(); data.put("token", token); data.put("userInfo", new UserVo(user)); // UserVo 是只包含必要信息的视图对象 return Result.success(data); } }
  4. 配置 Spring Security:创建一个配置类SecurityConfig,配置密码编码器、放行登录接口、其他接口需要认证,并添加 JWT 过滤器来解析 Token 并设置认证信息。
  5. 统一返回结果封装:创建Result类,统一 API 返回格式。

3.4 实现资产管理的核心 CRUD 与业务接口

以资产信息管理为例。

  1. Controller (AssetController)
    @RestController @RequestMapping("/api/asset") public class AssetController { @Autowired private AssetService assetService; @GetMapping("/page") public Result page(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String assetName, @RequestParam(required = false) Integer status) { // 构建查询条件 LambdaQueryWrapper<Asset> wrapper = new LambdaQueryWrapper<>(); wrapper.like(StringUtils.isNotBlank(assetName), Asset::getAssetName, assetName) .eq(status != null, Asset::getStatus, status) .orderByDesc(Asset::getCreateTime); // 调用 Service 的分页查询 Page<Asset> page = new Page<>(pageNum, pageSize); Page<Asset> result = assetService.page(page, wrapper); // 转换为 VO 再返回,避免暴露不必要字段或循环引用 Page<AssetVo> voPage = new Page<>(); BeanUtils.copyProperties(result, voPage, "records"); List<AssetVo> voList = result.getRecords().stream() .map(AssetVo::new) .collect(Collectors.toList()); voPage.setRecords(voList); return Result.success(voPage); } @PostMapping public Result save(@RequestBody Asset asset) { // 生成唯一资产编号 asset.setAssetCode(generateAssetCode()); boolean saved = assetService.save(asset); return saved ? Result.success() : Result.error("新增失败"); } @PutMapping public Result update(@RequestBody Asset asset) { boolean updated = assetService.updateById(asset); return updated ? Result.success() : Result.error("更新失败"); } @DeleteMapping("/{id}") public Result delete(@PathVariable Long id) { // 逻辑删除 boolean removed = assetService.removeById(id); return removed ? Result.success() : Result.error("删除失败"); } }
  2. 前端页面 (AssetList.vue):使用 Element Plus 的el-table,el-pagination,el-dialog,el-form等组件,通过配置好的 Axios 实例调用上述接口,实现资产的列表展示、分页、查询、新增、编辑和删除功能。

3.5 实现资产领用审批流程

这是一个典型的业务流程,涉及状态机和多表操作。

  1. 后端流程
    • POST /api/borrow/apply:用户提交领用申请,创建一条asset_borrow记录,状态为“申请中”。
    • GET /api/borrow/todo:部门负责人获取待自己审批的申请列表。
    • POST /api/borrow/approve:负责人审批,更新asset_borrow状态为“已批准”或“已拒绝”,并更新asset_info表中对应资产的状态为“领用中”或保持原状。
    • POST /api/borrow/confirm:用户确认领取资产。
    • POST /api/borrow/return:用户归还资产,更新asset_borrow状态为“已归还”,并更新asset_info状态为“在库”。
  2. 关键点:这些操作通常需要在一个 Service 方法中使用@Transactional注解,保证数据库事务的一致性。例如,审批通过时,需要同时更新领用记录和资产信息表。

4. 项目联调、打包与部署

前后端分别开发完成后,需要进行联调,并最终打包部署。

4.1 跨域问题解决

在前后端分离开发时,前端运行在localhost:5173(Vite 默认端口),后端运行在localhost:8080,浏览器会因同源策略阻止请求。

  • 后端解决(推荐):在 Spring Boot 的配置类中添加全局跨域配置。
    @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") // 生产环境应指定具体前端地址 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }
  • 前端代理(开发环境):在vite.config.js中配置代理,将/api请求转发到后端。
    export default defineConfig({ // ... 其他配置 server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

4.2 后端打包与运行

  1. 打包:在项目根目录执行 Maven 命令。
    mvn clean package -DskipTests
    成功后会在target目录生成asset-management-0.0.1-SNAPSHOT.jar
  2. 运行
    java -jar target/asset-management-0.0.1-SNAPSHOT.jar
  3. 生产环境配置:可以通过--spring.profiles.active=prod指定使用application-prod.yml配置文件,在其中配置生产数据库地址、Redis 等。

4.3 前端打包与部署

  1. 打包
    npm run build
    打包后的静态文件位于dist目录。
  2. 部署
    • 方式一(前后端分离部署):将dist目录下的文件部署到 Nginx 或 Apache 等 Web 服务器,并配置路由重写(解决 Vue Router 的 history 模式 404 问题)。
    • 方式二(合并部署):将dist目录下的文件复制到 Spring Boot 项目的src/main/resources/static目录下,然后打包。这样后端 Jar 包就包含了前端资源,访问http://ip:port即可。需要在 Spring Boot 中配置静态资源映射和路由重定向到index.html

5. 毕设开发与论文撰写中的常见问题排查

在开发过程中,你几乎一定会遇到以下问题。这里提供清晰的排查路径。

5.1 后端启动与数据库连接问题

问题现象可能原因检查方式处理建议
启动时报java.sql.SQLException: Access denied for user1. 数据库用户名/密码错误。
2. 用户没有访问指定数据库的权限。
3. MySQL 服务未启动。
1. 检查application.yml中的usernamepassword
2. 使用命令行或客户端尝试登录。
3. 检查 MySQL 服务状态 (systemctl status mysqlservices.msc)。
1. 修正配置。
2. 授予用户权限:GRANT ALL ON university_asset_db.* TO 'username'@'localhost';
3. 启动 MySQL 服务。
启动时报java.net.ConnectException: Connection refused数据库 URL 中的主机或端口错误。检查application.yml中的url,确认localhost:3306是否正确。修正 URL。如果是远程数据库,确保网络可达且防火墙开放了 3306 端口。
启动时报Unknown database ‘university_asset_db’数据库不存在。登录 MySQL,执行SHOW DATABASES;查看。创建数据库:CREATE DATABASE university_asset_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
启动成功,但访问 API 返回 4041. Controller 路径映射错误。
2. 请求方法 (GET/POST) 不匹配。
3. 包扫描问题。
1. 检查控制台启动日志,看是否有Mapped "{[/api/xxx]}"的日志。
2. 使用 Postman 或 Swagger 测试接口。
3. 检查启动类上的@SpringBootApplication注解是否能扫描到你的 Controller 包。
1. 修正@RequestMapping注解。
2. 使用正确的 HTTP 方法。
3. 在启动类上添加@ComponentScan或调整包结构。

5.2 前端请求与跨域问题

问题现象可能原因检查方式处理建议
浏览器控制台报CORS policy错误后端未正确配置跨域,或配置的 Origin 不匹配。1. 查看浏览器 Network 面板,请求的Response Headers中是否有Access-Control-Allow-Origin
2. 检查后端CorsConfigallowedOriginPatterns
1. 确保后端跨域配置生效。
2. 开发阶段可设置为"*",但生产环境必须指定具体域名。
3. 使用前端代理模式(Vite 配置)绕过浏览器跨域检查。
请求返回 401 (Unauthorized)1. 未登录或 Token 过期。
2. Token 未正确携带在请求头中。
1. 检查 localStorage 中是否有token
2. 检查浏览器 Network 面板,请求头中是否有Authorization: Bearer <token>
3. 检查后端 Token 校验逻辑和过期时间。
1. 跳转到登录页重新登录。
2. 检查 Axios 请求拦截器的代码是否正确添加了 Token。
3. 实现 Token 自动刷新机制。
请求返回 403 (Forbidden)用户权限不足,无法访问该接口。检查该用户角色是否拥有访问此接口的权限。1. 检查 Spring Security 或权限框架的配置。
2. 为用户分配相应角色和权限。
控制台报TypeError: Cannot read properties of undefined前端代码在访问一个未定义对象的属性。1. 查看报错的行号,检查变量是否已初始化。
2. 使用可选链操作符?.或进行空值判断。
1. 确保 API 返回的数据结构符合预期。
2. 在模板中使用v-if{{ data?.property }}进行防护。

5.3 部署与运行问题

问题现象可能原因检查方式处理建议
前端页面空白,控制台报资源加载失败 (404)1. 前端资源路径错误。
2. Nginx 配置未指向正确的dist目录。
3. Vue Router 使用了 history 模式但服务器未配置重写。
1. 检查浏览器 Network 面板,看哪个.js.css文件 404。
2. 检查 Nginxrootalias配置。
3. 检查访问的 URL 路径。
1. 如果使用相对路径,确保vite.config.jsbase配置正确。
2. 在 Nginx 中为 history 模式添加try_files规则:try_files $uri $uri/ /index.html;
3. 或将 Vue Router 模式改为hash模式。
Jar 包运行后,访问前端页面仍是空白或旧版浏览器缓存了旧的静态资源。强制刷新浏览器 (Ctrl+F5) 或打开开发者工具,在 Network 面板勾选Disable cache1. 前端构建时,Vite 默认会生成带哈希的文件名,可有效避免缓存。确保部署的是最新dist
2. 配置 Nginx 为静态资源设置Cache-Control头。
上传文件失败,报文件大小超限Spring Boot 默认文件上传大小限制为 1MB。检查上传文件的大小。application.yml中调整spring.servlet.multipart.max-file-sizemax-request-size

6. 毕业设计论文与答辩准备建议

一个优秀的毕业设计,除了可运行的系统,清晰的文档和表达同样重要。

6.1 论文结构组织建议

  1. 摘要:精炼概括研究背景、目标、采用的技术、实现的功能和结论。
  2. 绪论:阐述高校固定资产管理的现状与问题,说明本系统的研究意义和目标。
  3. 相关技术介绍:系统介绍 Spring Boot、Vue.js、MyBatis-Plus、MySQL 等核心技术的特性与优势,不要简单罗列,要说明为什么选它们以及它们在本项目中的作用。
  4. 系统分析:包括可行性分析(技术、经济、操作)、需求分析(功能需求、非功能需求)、用例分析。
  5. 系统设计:这是核心章节。包括总体架构设计(前后端分离图)、功能模块设计、数据库设计(E-R 图、表结构详细说明)、接口设计(关键 API 列表)。
  6. 系统实现:展示关键功能的实现,配以核心代码片段界面截图。例如登录认证流程、资产入库的代码、领用审批的前后端交互。
  7. 系统测试:描述测试环境,设计测试用例(功能测试、性能测试),并给出测试结果(可以用表格形式)。
  8. 总结与展望:总结已完成的工作,指出系统的不足和未来可改进的方向(如移动端开发、引入工作流引擎、集成大数据分析等)。

6.2 答辩演示要点

  1. 演示脚本:提前写好讲稿,控制时间(通常 10-15 分钟)。流程建议:项目简介 -> 技术栈 -> 演示系统(从登录开始,按核心业务流程演示)-> 展示关键代码/数据库设计 -> 总结。
  2. 突出重点:不要面面俱到地演示每个功能。重点展示技术难点(如 JWT 认证、前后端数据交互、审批流程状态机)和业务亮点(如二维码资产标签、盘点功能)。
  3. 准备问答:提前思考老师可能问的问题,如:
    • 为什么选择 Spring Boot 和 Vue?
    • 前后端是如何通信的?如何解决跨域?
    • 用户的密码在数据库里是怎么存储的?(应回答加密存储,如 BCrypt)
    • 你的数据库设计是如何保证数据一致性的?(事务、外键约束等)
    • 如果多人同时申请同一件资产,如何处理?(可引入乐观锁或状态机校验)
    • 系统还有哪些可以优化的地方?
  4. 环境备份:确保演示用的电脑环境完好,或将系统部署到云服务器,避免现场配置环境出错。准备好项目的压缩包和论文 PDF。

通过以上从技术到实践的完整梳理,你应该对如何完成一个基于 Spring Boot + Vue 的高校固定资产管理系统毕业设计有了清晰的路径。记住,毕业设计不仅是编码,更是对一个完整软件工程生命周期的体验。从需求分析到设计实现,再到测试部署和文档撰写,每一步都值得认真对待。在遇到问题时,善用搜索引擎、官方文档和调试工具,并养成记录解决方案的习惯,这本身就是一项宝贵的能力。

🚀 30+款热门AI模型一站整合,DeepSeek/GLM/Qwen 随心用,限时 5 折。 👉 点击领海量免费额度

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/6 11:41:42

Excel 2021 + BAT 批处理:3步实现千级文件批量重命名与格式转换

Excel 2021 BAT 批处理&#xff1a;3步实现千级文件批量重命名与格式转换当你的硬盘里堆积着数千张照片、文档或音频文件&#xff0c;文件名杂乱无章得像被猫抓过的毛线球时&#xff0c;手动重命名无疑是场噩梦。我曾接手过一个项目&#xff0c;需要整理5年积累的12000份客户资…

作者头像 李华
网站建设 2026/7/6 11:36:22

Unity游戏接入穿山甲广告SDK:从配置到上线的避坑实战

1. 穿山甲广告SDK接入前的准备工作第一次接触穿山甲广告SDK时&#xff0c;我踩了不少坑。记得当时为了赶项目进度&#xff0c;直接跳过了账号申请环节&#xff0c;结果在调试阶段浪费了整整两天时间。所以特别提醒各位开发者&#xff0c;一定要先完成这些基础配置&#xff1a;注…

作者头像 李华