[特殊字符] 《实战 | 基于Spring Boot + UniApp构建同城交友系统：技术架构与源码解析》-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62330360/article/details/146909918

采用前后端分离架构，具体技术栈如下：

后端：Spring Boot + MyBatis-Plus + MySQL，提供用户认证、匹配推荐、聊天、订单等接口服务。
用户端与师傅端：UniApp（Vue语法），编译生成微信小程序、iOS 和 Android APP。
管理后台：Vue + Element UI，实现用户管理、订单审核、统计分析等功能。

📄 架构图逻辑说明

less

复制编辑

[ 用户端 / 师傅端 ] | ————————————API调用———————————— | [Spring Boot 后台服务] ——> MySQL数据库 | [管理后台：Vue + ElementUI]

✅ 核心交互流程：

用户/师傅端通过UniApp调用后端API，进行登录、匹配、聊天等操作。
管理员在后台管理系统审核师傅信息、处理举报或投诉。
数据存储在MySQL中，采用MyBatis-Plus操作数据库。

💡 二、功能模块与源码解析

1️⃣ 后端服务：Spring Boot + MyBatis-Plus

核心依赖

xml

复制编辑

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.30</version> </dependency> </dependencies>

✅ 核心配置项：

yaml

复制编辑

# application.yml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/tongcheng_db?useSSL=false&serverTimezone=UTC username: root password: your_password jpa: show-sql: true hibernate: ddl-auto: update

用户匹配接口示例

java

复制编辑

@RestController @RequestMapping("/api/user") public class UserController { @Autowired private UserService userService; @GetMapping("/match") public R<List<User>> matchUsers(@RequestParam String city) { List<User> matchedUsers = userService.findUsersByCity(city); return R.ok(matchedUsers); } }

⚠️ 常见误区：

误区一：SQL查询未加索引，查询慢
- ✅ 优化方案：为城市字段加索引 ALTER TABLE user ADD INDEX idx_city(city);
误区二：未使用MyBatis-Plus分页，查询效率低
- ✅ 使用 Page<User> page = new Page<>(1, 10);

2️⃣ 前端用户端：UniApp + Vue

登录页面示例

vue

复制编辑

<template> <view class="container"> <input v-model="username" placeholder="请输入用户名"/> <input type="password" v-model="password" placeholder="请输入密码"/> <button @click="login">登录</button> </view> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { async login() { const res = await uni.request({ url: 'https://api.example.com/login', method: 'POST', data: { username: this.username, password: this.password } }) if (res.data.success) { uni.showToast({ title: '登录成功' }); } } } } </script>

✅ 关键注意事项

使用 uni.request() 发起API请求，兼容小程序和H5。
跨平台兼容性：UniApp编译后可打包成小程序、Android 和 iOS App。

3️⃣ 管理后台：Vue + Element UI

用户管理页面示例

vue

复制编辑

<template> <el-table :data="users" stripe> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="city" label="城市"></el-table-column> <el-table-column label="操作"> <template v-slot="scope"> <el-button @click="editUser(scope.row)" type="primary">编辑</el-button> <el-button @click="deleteUser(scope.row.id)" type="danger">删除</el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { users: [] } }, methods: { async fetchUsers() { const res = await this.$http.get('/api/user/list'); this.users = res.data; } }, created() { this.fetchUsers(); } } </script>

⚙️ 三、性能优化与常见误区

✅ 优化对比表格

功能	普通方案	优化方案	性能提升
数据查询	普通SQL查询	使用MyBatis-Plus分页查询	查询效率提升2倍
静态资源	前端打包未做压缩	启用Gzip压缩	响应体减少60%
数据库访问	没有连接池，线程阻塞	使用HikariCP连接池	连接效率提升40%