返回

基于 React + Mobx + TypeScript 构建音乐应用:搭建 EggJS 版 API(一)

前端

引言

音乐,作为人类生活中不可或缺的一部分,一直以来都备受人们的喜爱。随着互联网的飞速发展,音乐的传播方式也发生了翻天覆地的变化。网易云音乐,作为国内领先的音乐平台,凭借其丰富的曲库、优质的音质和个性化的推荐,赢得了众多用户的青睐。

为了满足用户对音乐应用日益增长的需求,本文将以 React、Mobx 和 TypeScript 为基础,构建一款高质量的移动端音乐类 WebApp。React 是一个流行的 JavaScript 库,用于构建用户界面。Mobx 是一个状态管理库,可以帮助我们轻松管理应用中的状态。TypeScript 是 JavaScript 的一个超集,它可以帮助我们编写更健壮的代码。

搭建 EggJS 版 API

EggJS 是一个基于 Node.js 的全栈框架,它以其高性能、易扩展和高可靠性而著称。我们将使用 EggJS 来搭建音乐应用的 API。

首先,我们需要安装 EggJS 和相关的依赖:

npm install egg --save
npm install egg-sequelize --save
npm install egg-cors --save

然后,我们需要创建一个新的 EggJS 项目:

egg-init my-music-api

进入项目目录后,我们需要在 config/plugin.js 中启用 sequelize 和 cors 插件:

exports.plugins = [
  'sequelize',
  'cors'
];

接下来,我们需要在 config/config.default.js 中配置数据库连接信息:

exports.sequelize = {
  dialect: 'mysql',
  host: '127.0.0.1',
  port: 3306,
  database: 'my_music_api',
  username: 'root',
  password: '123456'
};

然后,我们需要在 app/model 中定义数据模型:

const Sequelize = require('sequelize');

class Song extends Sequelize.Model {}
Song.init({
  id: {
    type: Sequelize.INTEGER,
    primaryKey: true,
    autoIncrement: true
  },
  name: Sequelize.STRING,
  artist: Sequelize.STRING,
  album: Sequelize.STRING,
  url: Sequelize.STRING,
  cover: Sequelize.STRING
}, {
  sequelize,
  modelName: 'song'
});

最后,我们需要在 app/controller/song.js 中定义控制器:

const Song = require('../model/song');

class SongController {
  async list(ctx) {
    const songs = await Song.findAll();
    ctx.body = songs;
  }

  async get(ctx) {
    const song = await Song.findById(ctx.params.id);
    ctx.body = song;
  }

  async create(ctx) {
    const song = await Song.create(ctx.request.body);
    ctx.body = song;
  }

  async update(ctx) {
    const song = await Song.findById(ctx.params.id);
    await song.update(ctx.request.body);
    ctx.body = song;
  }

  async delete(ctx) {
    const song = await Song.findById(ctx.params.id);
    await song.destroy();
    ctx.body = {
      success: true
    };
  }
}

module.exports = SongController;

至此,我们就完成了 EggJS 版 API 的搭建。接下来,我们将开始构建音乐应用的前端部分。