SpringBoot+Vue构建二手手机管理系统实战

发布时间：2026/7/28 7:00:00

1. 项目概述：华强北二手手机管理系统的技术架构

华强北作为全国最大的电子产品集散地，每天流转的二手手机数量以万计。传统Excel表格管理方式早已无法满足商户需求——机型混乱、价格波动频繁、质检标准不统一等问题长期困扰着从业者。这套基于SpringBoot+Vue的前后端分离系统，正是为解决这些痛点而生。

我在实际开发中采用了经典的三层架构：Vue3构建的前端负责数据展示与用户交互，SpringBoot搭建的后端处理业务逻辑，MySQL作为数据存储核心。这种架构最大的优势在于，前端开发人员可以专注于页面交互优化，后端工程师则能全力保障接口性能，双方通过JSON格式的API文档协同工作，效率比传统JSP模式提升至少50%。

提示：系统默认适配华强北市场主流手机品牌（苹果、华为、小米等），支持扩展三星、传音等国际品牌机型库

2. 核心技术栈解析

2.1 SpringBoot后端设计要点

采用2.7.12版本构建的RESTful API包含三个核心模块：

商品管理模块：处理手机信息CRUD
交易模块：记录进货/销售流水
质检模块：存储IMEI检测报告

数据库连接池配置示例（application.yml）：

spring: datasource: url: jdbc:mysql://localhost:3306/used_phone?useSSL=false username: root password: 你的密码 hikari: maximum-pool-size: 20 connection-timeout: 30000

2.2 Vue前端工程化实践

通过vue-cli创建的工程采用以下优化方案：

使用axios拦截器统一处理401权限异常
路由懒加载缩短首屏时间
自定义v-phone指令校验手机格式

关键依赖版本：

"dependencies": { "vue": "^3.2.47", "element-plus": "^2.3.3", "echarts": "^5.4.2" }

2.3 MyBatis动态SQL妙用

针对二手手机复杂的查询条件（品牌+成色+价格区间），使用MyBatis的动态SQL避免硬编码：

<select id="selectByCondition" resultType="Phone"> SELECT * FROM t_phone <where> <if test="brand != null"> AND brand = #{brand} </if> <if test="minPrice != null"> AND price >= #{minPrice} </if> </where> ORDER BY create_time DESC </select>

3. 数据库设计与优化

3.1 核心表结构

手机信息表关键字段设计：

CREATE TABLE `t_phone` ( `id` bigint NOT NULL AUTO_INCREMENT, `imei` varchar(20) COLLATE utf8mb4_bin NOT NULL COMMENT '国际移动设备识别码', `brand` varchar(20) NOT NULL COMMENT '苹果/华为/小米等', `model` varchar(50) NOT NULL COMMENT '具体型号', `storage` varchar(10) NOT NULL COMMENT '存储容量', `color` varchar(10) NOT NULL, `price` decimal(10,2) NOT NULL COMMENT '收购价', `selling_price` decimal(10,2) DEFAULT NULL COMMENT '销售价', `quality_level` tinyint DEFAULT NULL COMMENT '成色等级1-5', PRIMARY KEY (`id`), UNIQUE KEY `idx_imei` (`imei`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

3.2 性能优化方案

针对华强北高频查询场景：

为价格字段添加复合索引：ALTER TABLE t_phone ADD INDEX idx_brand_price (brand, price)
使用Redis缓存热门机型数据
配置MySQL查询缓存：query_cache_size = 64M

4. 系统部署实战

4.1 后端部署流程

打包SpringBoot应用：

mvn clean package -DskipTests

使用Docker运行MySQL：

docker run --name phone-mysql -e MYSQL_ROOT_PASSWORD=你的密码 -p 3306:3306 -d mysql:8.0

启动SpringBoot应用：

java -jar target/phone-system-1.0.0.jar

4.2 前端部署要点

生产环境构建：

npm run build

Nginx配置示例：

server { listen 80; server_name yourdomain.com; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; } }

5. 典型问题排查指南

5.1 跨域问题解决方案

开发环境下配置vue.config.js：

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }

5.2 MyBatis字段映射异常

当数据库字段名与Java属性名不一致时：

使用@Result注解手动映射
或配置mapUnderscoreToCamelCase：

mybatis: configuration: map-underscore-to-camel-case: true

5.3 事务管理踩坑记录

在Service层添加注解确保数据一致性：

@Transactional(rollbackFor = Exception.class) public void createPhone(Phone phone) { phoneMapper.insert(phone); // 其他数据库操作... }

6. 扩展功能实现思路

6.1 手机估价算法

基于历史交易数据实现价格预测：

public BigDecimal estimatePrice(String brand, String model) { // 获取最近30天同型号成交均价 BigDecimal avgPrice = transactionMapper.selectAvgPrice(brand, model); // 根据成色等级调整系数 return avgPrice.multiply(new BigDecimal("0.9")); }