Vue+SpringBoot音乐网站全栈开发实践-三亩地-编程学习日记

1. 项目概述：基于Vue+SpringBoot的音乐网站全栈开发

这个毕业设计项目采用前后端分离架构，前端使用Vue.js框架构建用户界面，后端采用SpringBoot提供RESTful API服务，实现了一个功能完整的在线音乐平台。系统包含音乐播放、歌单管理、用户交互等核心模块，适合作为计算机专业学生展示全栈开发能力的综合性实践案例。

从技术栈选择来看，Vue+SpringBoot的组合既能体现现代Web开发的主流技术，又保证了项目的可维护性和扩展性。前端Vue的响应式特性特别适合音乐播放器这类需要实时更新UI的场景，而后端SpringBoot的自动化配置则大大简化了服务端开发流程。整套系统涵盖了从数据库设计、API开发到前端交互的全流程实现，是检验学生综合开发能力的理想选题。

2. 核心功能模块设计

2.1 音乐播放器核心功能实现

音乐播放器作为系统的核心模块，需要解决以下几个关键技术点：

音频流处理：使用HTML5 Audio API配合vue-aplayer等插件实现

// 示例：Vue中基础音频控制实现 const audio = new Audio() audio.src = 'https://example.com/song.mp3' audio.play().catch(e => console.log('播放失败:', e)) // 使用vue-aplayer组件 <aplayer autoplay :music="{ title: '歌曲名', artist: '艺术家', src: '/audio/sample.mp3', pic: '/cover.jpg' }" />

播放列表管理：采用Vuex进行状态管理

// store/modules/player.js state: { playlist: [], // 完整播放列表 currentIndex: 0, // 当前播放索引 playMode: 'sequence' // 播放模式 }, mutations: { ADD_TO_PLAYLIST(state, songs) { state.playlist.push(...songs) }, CHANGE_SONG(state, index) { state.currentIndex = index } }

播放进度同步：通过timeupdate事件实现

audio.ontimeupdate = () => { this.currentTime = audio.currentTime this.duration = audio.duration || 0 }

2.2 后台管理系统功能架构

后端系统采用经典的MVC分层架构：

数据层：MyBatis-Plus + MySQL

// 歌曲实体类示例 @Data @TableName("t_song") public class Song { @TableId(type = IdType.AUTO) private Long id; private String name; private String artist; private String album; private String coverUrl; private String musicUrl; private Integer duration; // getters/setters... }

业务层：Spring Service

@Service public class SongServiceImpl extends ServiceImpl<SongMapper, Song> implements SongService { @Override public Page<SongVo> queryByPage(PageParam param) { return baseMapper.selectPageVo(param.toPage(), param.getKeyword()); } }

控制层：Spring RESTful API

@RestController @RequestMapping("/api/song") public class SongController { @Autowired private SongService songService; @GetMapping("/{id}") public Result<SongVo> getById(@PathVariable Long id) { return Result.success(songService.getDetail(id)); } }

3. 关键技术实现细节

3.1 前端工程化配置

项目采用Vue CLI搭建，关键配置包括：

vue.config.js优化配置

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/music/' : '/', devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = '音乐网站' return args }) } }

Axios全局封装

// utils/request.js const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) // 请求拦截 service.interceptors.request.use(config => { const token = store.getters.token if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config }) // 响应拦截 service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { return Promise.reject(new Error(res.message || 'Error')) } return res } )

3.2 后端关键技术实现

SpringBoot多环境配置

# application-dev.yml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/music_dev username: root password: 123456 redis: host: localhost port: 6379

文件上传下载实现

@PostMapping("/upload") public Result<String> upload(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return Result.fail("请选择文件"); } try { String fileName = UUID.randomUUID() + file.getOriginalFilename().substring( file.getOriginalFilename().lastIndexOf(".") ); Path path = Paths.get(uploadPath, fileName); Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return Result.success(fileName); } catch (IOException e) { log.error("文件上传失败", e); return Result.fail("上传失败"); } }

JWT认证实现

@Component public class JwtTokenProvider { private String secret = "music-secret-key"; private long validityInMilliseconds = 3600000; // 1h public String createToken(String username, List<String> roles) { Claims claims = Jwts.claims().setSubject(username); claims.put("roles", roles); Date now = new Date(); Date validity = new Date(now.getTime() + validityInMilliseconds); return Jwts.builder() .setClaims(claims) .setIssuedAt(now) .setExpiration(validity) .signWith(SignatureAlgorithm.HS256, secret) .compact(); } public boolean validateToken(String token) { try { Jws<Claims> claims = Jwts.parser() .setSigningKey(secret) .parseClaimsJws(token); return !claims.getBody().getExpiration().before(new Date()); } catch (Exception e) { return false; } } }

4. 项目部署方案

4.1 前端部署配置

生产环境打包优化

# 安装分析插件 npm install --save-dev webpack-bundle-analyzer # vue.config.js配置 configureWebpack: { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }) ], externals: process.env.NODE_ENV === 'production' ? { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios' } : {} }

Nginx配置示例

server { listen 80; server_name music.example.com; location / { root /usr/share/nginx/html/music; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

4.2 后端部署方案

Docker部署配置

# Dockerfile FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-jar","/app.jar"]

Jenkins自动化部署

pipeline { agent any stages { stage('Checkout') { steps { git branch: 'main', url: 'https://github.com/yourname/music-backend.git' } } stage('Build') { steps { sh 'mvn clean package -DskipTests' } } stage('Deploy') { steps { sshPublisher( publishers: [ sshPublisherDesc( configName: 'production-server', transfers: [ sshTransfer( sourceFiles: 'target/*.jar', removePrefix: 'target', remoteDirectory: '/opt/music', execCommand: ''' cd /opt/music docker stop music-app || true docker rm music-app || true docker build -t music-app . docker run -d -p 8080:8080 \ --name music-app music-app ''' ) ] ) ] ) } } } }

5. 开发经验与问题排查

5.1 常见问题解决方案

跨域问题处理

// SpringBoot跨域配置 @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .maxAge(3600); } }

Vue路由History模式404问题

// router/index.js const router = new VueRouter({ mode: 'history', routes }) // Nginx需要配置 location / { try_files $uri $uri/ /index.html; }

音频加载失败处理

// Vue组件中错误处理 <aplayer @error="handlePlayError" ... /> methods: { handlePlayError() { this.$message.error('音频加载失败，请稍后重试') this.skipNext() // 自动跳过当前歌曲 } }

5.2 性能优化实践

前端懒加载优化

// 路由懒加载 const Player = () => import('@/views/Player.vue') // 图片懒加载 <img v-lazy="song.coverUrl" alt="封面">

后端缓存策略

// Spring Cache配置 @Configuration @EnableCaching public class RedisConfig { @Bean public CacheManager cacheManager(RedisConnectionFactory factory) { return RedisCacheManager.builder(factory) .cacheDefaults(RedisCacheConfiguration.defaultCacheConfig() .entryTtl(Duration.ofMinutes(10)) .disableCachingNullValues() .serializeValuesWith(RedisSerializationContext.SerializationPair .fromSerializer(new GenericJackson2JsonRedisSerializer()))) .build(); } } // 使用缓存 @Cacheable(value = "songs", key = "#id") public Song getById(Long id) { return getById(id); }

数据库查询优化

// MyBatis-Plus查询优化 @Select("SELECT s.* FROM t_song s " + "LEFT JOIN t_song_artist sa ON s.id = sa.song_id " + "WHERE sa.artist_id = #{artistId} " + "ORDER BY s.play_count DESC " + "LIMIT 100") List<Song> listPopularByArtist(Long artistId); // 添加索引 ALTER TABLE t_song_artist ADD INDEX idx_artist_song (artist_id, song_id);

6. 项目扩展方向

移动端适配方案

<!-- 响应式布局示例 --> <div class="player-container"> <div class="cover" :class="{ 'mobile': isMobile }"></div> </div> <style scoped> .cover { width: 300px; height: 300px; } .cover.mobile { width: 150px; height: 150px; } </style>

社交功能扩展

// 评论功能实现 @PostMapping("/comment") public Result<?> addComment(@RequestBody CommentDto dto) { Comment comment = new Comment(); comment.setUserId(SecurityUtils.getCurrentUserId()); comment.setContent(dto.getContent()); comment.setSongId(dto.getSongId()); commentService.save(comment); return Result.success(); }

推荐算法集成

# Python推荐服务示例（可通过gRPC集成） import pandas as pd from sklearn.neighbors import NearestNeighbors def train_model(data): model = NearestNeighbors(n_neighbors=5) model.fit(data) return model def recommend(user_preferences, model): distances, indices = model.kneighbors([user_preferences]) return indices[0]

实时通信增强

// WebSocket实时通知 const socket = new WebSocket('wss://example.com/ws') socket.onmessage = (event) => { const data = JSON.parse(event.data) if (data.type === 'NEW_COMMENT') { this.$notify({ title: '新评论', message: `${data.user}评论了${data.song}` }) } }

在实现这个音乐网站项目的过程中，有几个关键点需要特别注意：首先是音频播放的兼容性问题，不同浏览器对音频格式的支持程度不同，建议统一转换为MP3格式；其次是移动端触摸事件的处理，需要特别优化播放控制条的触摸体验；最后是后端API的安全性，除了JWT验证外，敏感操作还应该加入权限校验。这个项目作为毕业设计，可以重点展示你在解决这些实际问题时的思考过程和实现方案。

日记详情

Vue+SpringBoot音乐网站全栈开发实践