返回
基于 React + Mobx + TypeScript 构建音乐应用:搭建 EggJS 版 API(一)
前端
2023-11-02 12:15:59
引言
音乐,作为人类生活中不可或缺的一部分,一直以来都备受人们的喜爱。随着互联网的飞速发展,音乐的传播方式也发生了翻天覆地的变化。网易云音乐,作为国内领先的音乐平台,凭借其丰富的曲库、优质的音质和个性化的推荐,赢得了众多用户的青睐。
为了满足用户对音乐应用日益增长的需求,本文将以 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 的搭建。接下来,我们将开始构建音乐应用的前端部分。