koa项目：云音乐应用4——音乐上传与列表显示

Xu Quan（Nikkkki）

2018-08-19

学习笔记

koa, node.js

完成了注册与登录功能后，我们来实现音乐应用的音乐相关功能。

我们首先来完成两个功能，第一个是完成登录后，跳转到index页面，页面中根据登录的id来找到用户的音乐，并在页面中显示音乐列表；第二个功能是点击上传按钮能够上传音乐。

显示音乐列表

创建`router`

和之前创建专门处理用户账号相关的请求一样，我们先创建一个专业用来处理音乐请求相关的router，明确好router的功能，并在主文件中引入。

// music_router.js
const Router = require("koa-router");
let router = new Router();
let musicController = require("../modules/music_controller");

router.get("/music/index", musicController.showIndex)

// app.js
const musicRouter = require("./routes/music_router");
...

// 在处理router的部分添加以下代码
app.use(musicRouter.routes)
.use(musicRouter.allowedMethods());

创建数据库的表

我们还需要在数据库中添加专门管理音乐的表，并定义好里面需要的列名。

这一部分直接通过navicat设置就好了，非常傻瓜式的操作。

音乐操作

接下来我们将和处理音乐相关的函数都放到music_controller.js中去。

const music_db = require("../modules/db");

exports.showIndex = async ctx => {
  let user = ctx.session.user;    //判断出用户是谁
  let musics = music_db.query("SELECT * FROM music_table WHERE uid = ?", [user.id]);
  ctx.render('index', {musics})
}

我们判断出用户是谁，再根据用户的id来找到该用户上传的音乐，从而返回给模板。在postman中测试的结果（这里要注意，一定要先登录，再发请求，否则会提示没有登录，如下：）

如果按步骤来测试，则结果是：

添加音乐

添加的关于音乐的内容就是我们在显示音乐列表部分看到的那些信息，包括歌名title，歌手singer，时长time，歌曲文件file，歌词文件filelrc，id由数据库自动生成，uid则是上传歌曲的用户的id，其中uid是决定哪些歌曲显示在页面上的辨识标志。

我们还是在music_router.js中先确定发起添加音乐请求后会调用相应的功能函数。

1
2
3

// music_router.js
router.get("/music/index", musicController.showIndex)
.post("/music/add-music", musicController.addMusic)

接着来完成添加音乐的功能函数：

因为添加音乐的过程中除了常规的歌名、歌手的信息可以直接从ctx.request中获取外，我们还需要处理上传的文件，所以这里需要用到中间件来处理。

在前面的复习内容中，我们接触过multer中间件配合express来完成文件上传，但是koa-multer上传会有一点小问题，我在测试了几次之后都没有成功，一直没有获取到相关数据，应该是哪里设置不对，我后面再找时间来试，这里我们先用全栈课的老师推荐的koa-formidable中间件来完成。

先在app.js文件中引入并设置好，然后我们就可以在controller中直接通过中间件添加在ctx.request上的files属性来获取上传文件的相关信息了。

1	npm i koa-formidable -S

// app.js
const formidable = require("koa-formidable");
const musicRouter = require("./routes/music_router");

musicRouter.use(formidable({
  uploadDir: './public/upload',  // 在public文件夹中添加一个upload文件夹用来存放上传的歌曲和歌词文件
  keepExtensions: true  //文件保持上传的后缀名不变
}))

// music_controller.js
exports.addMusic = async ctx => {
  let {title, singer, time.} = ctx.request.body;
  
  let filePath = ctx.request.files.file.path;   // 歌曲文件的上传路径
  let fileLrcPath = ctx.request.files.filelrc.path;  // 歌词文件的上传路径
  
  let net_filePath = '/public/upload/' + filePath;
  let net_fileLrcPath = '/public/upload/' + fileLrcPath;
  
  let uid = ctx.session.user.id;
  
  let result = await music_db.query("INSERT INTO music_table (title, singer, time, file, filelrc, uid) values (?, ?, ?, ?, ?, ?)", [title, singer, time, net_filePath, net_fileLrcPath, uid]);
  
  ctx.body = {code: '001', msg: '上传成功'}；
}

这样我们就基本上把后台的功能都完成了，然后就开始逐步完成前端渲染，一边完成前端工作，一边来测试后台的代码是否有bug。

显示音乐列表

创建router

创建数据库的表

音乐操作

添加音乐

创建`router`