项目结构
uniapp项目通常包含以下核心目录：
pages/ └── index/ ├── index.vue // 首页 └── detail.vue // 陪玩详情页 components/ └── player-card.vue // 陪玩卡片组件 static/ └── icons/ // 图标资源 App.vue // 应用入口 main.js // 项目配置
核心功能实现
首页列表渲染
// pages/index/index.vue <template> <view class="container"> <player-card v-for="item in playerList" :key="item.id" :player="item" /> </view> </template> <script> export default { data() { return { playerList: [] } }, onLoad() { this.getPlayerList() }, methods: { async getPlayerList() { const res = await uni.request({ url: 'https://api.example.com/players', method: 'GET' }) this.playerList = res.data } } } </script>陪玩卡片组件
// components/player-card.vue <template> <view class="card" @click="navigateToDetail"> <image :src="player.avatar" mode="aspectFill"/> <text class="name">{{player.nickname}}</text> <text class="price">¥{{player.price}}/小时</text> </view> </template> <script> export default { props: { player: { type: Object, default: () => ({}) } }, methods: { navigateToDetail() { uni.navigateTo({ url: `/pages/index/detail?id=${this.player.id}` }) } } } </script>后端接口示例
// Spring Boot控制器示例 @RestController @RequestMapping("/api") public class PlayerController { @Autowired private PlayerService playerService; @GetMapping("/players") public List<Player> getPlayerList() { return playerService.getAllPlayers(); } @GetMapping("/players/{id}") public Player getPlayerDetail(@PathVariable Long id) { return playerService.getPlayerById(id); } }数据库实体类
@Entity @Table(name = "players") public class Player { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String nickname; private String avatar; private BigDecimal price; private String description; // getters & setters }注意事项
- 需要配置uniapp的manifest.json文件添加网络请求权限
- 跨域问题需在后端配置CORS或使用代理
- 图片资源建议使用云存储服务
- 价格字段建议使用精确计算类型（如BigDecimal）
扩展功能建议
- 添加收藏功能
- 实现在线聊天模块
- 集成支付SDK
- 增加评价系统
- 实现搜索筛选功能
