手把手教你用SpringBoot+Vue+Uniapp三件套，从零搭建一个计算机维修预约小程序（附完整源码）

从零构建计算机维修预约系统SpringBootVueUniApp全栈实战指南在数字化服务日益普及的今天传统计算机维修行业也面临着转型升级的需求。一个高效的线上预约系统不仅能提升用户体验还能优化维修服务流程。本文将带你完整实现一个基于SpringBoot后端、Vue管理后台和UniApp小程序的计算机维修预约系统特别适合作为全栈开发的学习项目或毕业设计。1. 技术选型与项目架构设计选择合适的技术栈是项目成功的基础。我们采用目前主流的企业级开发组合后端服务SpringBoot 2.7 MyBatis-Plus MySQL管理后台Vue 3 Element Plus Axios小程序端UniApp uView UI这种架构的优势在于前后端完全分离各层职责清晰组件化开发提高代码复用率跨平台能力UniApp可同时发布到微信、支付宝等多个小程序平台成熟的生态各技术栈都有丰富的社区支持项目目录结构建议如下computer-repair-system/ ├── repair-api/ # SpringBoot后端项目 ├── repair-admin/ # Vue管理后台 └── repair-miniprogram/ # UniApp小程序2. 数据库设计与核心表结构合理的数据库设计是系统稳定运行的关键。我们主要设计以下几张核心表表名主要字段说明userid, username, password, phone, role用户表(管理员/维修员/普通用户)repair_typeid, name, description维修类型表repair_orderid, user_id, repairer_id, type_id, status, create_time维修订单表repair_progressid, order_id, status, description, update_time维修进度表repair_commentid, order_id, content, rating, create_time评价表在SpringBoot中使用MyBatis-Plus可以快速实现CRUD操作。以下是用户实体的Java代码示例Data TableName(user) public class User { TableId(type IdType.AUTO) private Long id; private String username; private String password; private String phone; private Integer role; // 0-管理员 1-维修员 2-普通用户 TableField(exist false) private String token; }3. 后端API开发与接口规范RESTful API设计是前后端交互的基础。我们主要实现以下几类接口用户认证接口POST /api/auth/login - 用户登录POST /api/auth/register - 用户注册GET /api/auth/info - 获取当前用户信息维修订单接口POST /api/order/create - 创建维修订单GET /api/order/list - 获取订单列表(分页)PUT /api/order/update - 更新订单状态维修进度接口POST /api/progress/add - 添加进度记录GET /api/progress/history - 获取进度历史使用Spring Security实现JWT认证的配置示例Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated(); http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); } }4. Vue管理后台开发实战管理后台主要面向系统管理员和维修人员我们使用Vue 3的组合式API进行开发。核心功能模块包括用户管理用户CRUD、角色分配维修类型管理维修项目分类维护订单管理订单状态跟踪与分配数据统计维修量、评价等数据分析一个典型的订单管理页面组件示例template el-table :dataorderList stylewidth: 100% el-table-column propid label订单号 width180 / el-table-column propuserName label用户 width180 / el-table-column proptypeName label维修类型 / el-table-column propstatus label状态 template #default{row} el-tag :typestatusMap[row.status].type {{ statusMap[row.status].text }} /el-tag /template /el-table-column /el-table /template script setup import { ref, onMounted } from vue import { getOrderList } from /api/order const orderList ref([]) const statusMap { 0: { text: 待接单, type: info }, 1: { text: 维修中, type: warning }, 2: { text: 已完成, type: success } } onMounted(async () { orderList.value await getOrderList() }) /script5. UniApp小程序端开发技巧小程序端面向普通用户主要功能包括维修预约选择类型、填写问题描述进度查询实时查看维修状态服务评价对完成的维修进行评分消息通知订单状态变更提醒UniApp的页面开发与Vue类似但有一些小程序特有的注意事项登录授权流程async function login() { const [err, res] await uni.login() if (err) return const { code } res const { data: token } await api.login({ code }) uni.setStorageSync(token, token) }图片上传处理async function uploadImage() { const [err, res] await uni.chooseImage() if (err) return const tempFilePaths res.tempFilePaths const uploadRes await uni.uploadFile({ url: /api/upload, filePath: tempFilePaths[0], name: file }) }跨端兼容处理// 条件编译处理不同平台差异 // #ifdef MP-WEIXIN wx.requestSubscribeMessage() // #endif6. 前后端联调与部署上线联调阶段常见问题及解决方案跨域问题Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }接口规范不一致使用Swagger生成API文档统一响应格式Data public class ResultT { private int code; private String msg; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setData(data); return result; } }小程序域名配置需要在微信公众平台配置合法域名生产环境必须使用HTTPS部署方案推荐后端Docker容器化部署管理后台Nginx静态部署小程序通过HBuilderX打包上传7. 项目优化与扩展方向基础功能完成后可以考虑以下优化点性能优化添加Redis缓存高频访问数据数据库查询优化添加适当索引小程序端图片懒加载功能扩展维修员抢单模式预约时间段选择维修知识库用户体验提升维修进度推送通知服务评价系统在线客服功能一个简单的Redis缓存示例Service public class RepairTypeService { Autowired private RedisTemplateString, Object redisTemplate; public ListRepairType getAllTypes() { String cacheKey repair:types; ListRepairType types (ListRepairType) redisTemplate.opsForValue().get(cacheKey); if (types null) { types typeMapper.selectList(null); redisTemplate.opsForValue().set(cacheKey, types, 1, TimeUnit.HOURS); } return types; } }在实际开发中我们遇到的一个典型问题是小程序端图片上传大小限制。解决方案是通过后端接口先获取OSS临时凭证然后直传到对象存储服务既避免了后端带宽压力又绕过了小程序上传限制。