三国经典网

大家今天跟大家唠唠我最近搞的一个挺有意思的玩意儿——“SOA亲妈姨妈歌手版官网”。是不是光听名字就觉得有点那哈哈，别想歪了，就是一个个人练手项目，跟大家分享一下我的实践过程。

起因：

事情是这样的，最近在瞎逛的时候，偶然看到了一个叫“SOA 新世代音乐人计划”的东西，感觉挺有意思的。然后又看到了一些关于什么“亲妈姨妈歌手版”的讨论，出于程序员的好奇心，就想着能不能把这些元素结合起来，做一个独一无二的网站玩玩。

准备工作：

我得明确一下要做什么。我的目标很简单，就是做一个展示用的官网，包含以下几个部分：

小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区



• 歌手展示：要有歌手的照片、简介和代表作。
• 音乐作品：可以试听歌手的音乐。
• 活动信息：发布一些相关的活动或者新闻。



• 联系方式：方便用户联系。

然后，就是技术选型了。因为我主要想练练手，所以就选择了比较熟悉的 * 作为前端框架，后端用 * + * 搭建一个简单的 API，数据库就用 MongoDB ，方便快捷。

撸起袖子开干：

1. 前端页面搭建：

先用 Vue CLI 创建了一个新的项目，然后就开始搭建页面结构。我把页面分成了几个组件：

• Header：导航栏
• Home：首页，展示歌手信息和音乐作品
• ArtistList：歌手列表
• ArtistDetail：歌手详情页
• Footer：底部信息

用了 Vue Router 来实现页面跳转，还用了一些简单的 CSS 来美化页面。不得不说，CSS 这玩意儿真是让人头疼，我花了好多时间才把页面弄得稍微能看一点。

2. 后端 API 接口：

用 * 和 * 搭建了一个简单的 API，主要提供以下几个接口：

• /artists：获取歌手列表



• /artists/:id：获取歌手详情
• /songs：获取歌曲列表

用了 Mongoose 来操作 MongoDB 数据库，先定义了 Artist 和 Song 两个 Schema，然后就可以方便地进行 CRUD 操作了。

3. 数据填充：

这个是最麻烦的，因为我得去找一些歌手的资料和音乐资源。我只是为了学习，所以就找了一些公开的资料和免费的音乐。然后把这些数据导入到 MongoDB 数据库中。

4. 前后端联调：

把前端页面和后端 API 连接起来，调试各种接口。这里遇到了一些跨域问题，用 CORS 中间件解决了。还有一些数据格式的问题，也慢慢地调整好了。

遇到的坑和解决方法：

• 跨域问题：这个是老生常谈了，用 CORS 中间件可以很方便地解决。
• 数据格式问题：前后端数据格式不一致，需要仔细检查和调整。



• CSS 样式问题：这个真是我的弱项，只能慢慢地学习和尝试。
• Vue 组件通信问题：父子组件之间、兄弟组件之间的数据传递，需要熟悉 Vue 的 props、emit 和 eventBus 等机制。

最终效果：

经过一番折腾，终于把这个“SOA亲妈姨妈歌手版官网”给搞出来了。虽然页面比较简陋，功能也比较简单，但是也算是一个完整的 Web 应用了。通过这个项目，我巩固了 *、*、* 和 MongoDB 的使用，也学到了一些新的知识。最重要的，是体验了整个 Web 应用的开发流程。

这回实践虽然名字有点不正经，但确实让我学到了不少东西。作为一个程序员，就是要不断地学习和实践，才能不断地提高自己的技能。希望我的分享能给大家带来一些帮助，也欢迎大家多多交流！