koa项目:云音乐应用1——项目框架+数据库连接

发表于 分类于 阅读次数： Disqus：

这个是全栈课的一个作业，要实现一个类似网易云音乐应用的项目。有这样一些基本功能：

  • 实现注册、登录功能
  • 上传音乐并且播放

我们先来实现最基本的功能：

  • 用koa搭建项目框架
  • 用art-template实现页面渲染
  • 连接到数据库，并且能够获取数据库数据。

以下我们一步一步来实现。

搭建基本框架

1. 初始化项目

我的所有内容都放在my_music文件夹下，在文件夹目录下初始化。

1
npm init -y

注意：这里有一个细节需要注意，项目文件夹的名字不能和后面我们需要用到的模块名重名，否则我们在下载模块的时候会被拒绝。我测试了一个小的例子（创建一个名叫koa的文件夹，并在文件夹里下载koa模块）：

image-20180817141922702

2. 下载相关模块

在搭建框架部分，我们会用到koa, koa-router, koa-art-template三个模块。

1
npm i koa koa-router koa-art-template -S
3. 搭建框架

相关模块的应用我在之前的笔记里都记录过，这里直接上手。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const Koa = require("koa");
const Router = require("koa-router");
const render = require("koa-art-template");
const path = require("path");

let app = new Koa();
let router = new Router();

//渲染模板
render(app, {
  root: path.join(__dirname, "views"),
  extname: '.html',
  debug: process.env.NODE_ENV !== "production"
})

router.get('/', (ctx) => {
  ctx.render("index", {text: "hello world"})
})

app.use(router.routes()).use(router.allowedMethods());

app.listen(9000, () => {
  console.log("server running at 9000");
})

我们先在views文件夹中建一个测试用的index.html页面：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<title>
		My music app
	</title>
</head>
<body>
	{{text}}
</body>
</html>

然后在localhost:9000测试一下基本功能：

image-20180817151427074

连接数据库

我们需要利用mysql创建一个数据库，用来放置项目完成后上传的音乐文件。现在我们先将数据库连接起来。

下载模块

这里需要用到一个新的中间件mysql

1
npm i mysql -S
创建数据库

在navicat中创建一个名叫my_music的数据库，并创建一个名叫user-table的表，在表单里添加一个测试数据：

image-20180817152154487

创建数据库连接

我们可以通过mysql模块来创建数据库连接，为了尽量保持主文件中结构清晰，我们将功能性的模块放到一个modules文件夹中，通过在主文件中引入功能模块的方式来操作。

image-20180817153021453

官方文档首先提到，mysql模块提供mysql.createConnection方法来创建连接，但是与其挨个创建连接，还有一个更方便的方法叫做mysql.createPool(config)，它采用的是创建多个连接，每个连接用完就放回池子里的方法。

image-20180817153228298

整个流程是mysql.createPool(config)创建连接池， pool.getConnection连接池启动连接，connection.query发起数据库请求，connection.release()请求完毕后释放连接。

我们先明确数据库信息（config），将它存在文件夹根目录下，防止路径过深，方便之后有调整的时候随时修改。

1
2
3
4
5
6
7
8
9
//db_config.js
let dbConfig = {
    connectionLimit: 10,
		host: 'localhost',
		user: 'root',
		password: 'root',
		database: 'my_music'
}
module.exports = dbConfig;

接着我们来实现数据库的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// modules/db.js
const mysql = require("mysql");
const dbConfig = require("../db_config");   // 引入数据库配置
let pool = mysql.createPool(dbConfig);   // 创建连接池

let db = {};  //创建数据库对象，这个对象最终会被导出
// 创建数据库查询的方法
// 保留两个参数，分别是查询语言，即查询语言中的变量(是一个数组)
db.query = ((sql, params) => {   
  return new Promise((resolve, reject) => {
    pool.getConnection((err, connection) => {
      connection.query(sql, params, (err, results) => {
        if(err) return reject(err);
        resolve(results);
      })
    })
  })
})

module.exports = db;

在主文件app.js中我们来测试一下数据库查询功能：

1
2
3
4
5
6
7
8
router.get('/', async (ctx) => {
  let db = require("./modules/db");
  let users = await db.query("SELECT * FROM user_table WHERE id = ?", [1]); //查询id为1的用户数据
  console.log(users);
  ctx.render('index', {
    text: users[0].name
  })
})

此时页面渲染结果：

image-20180817155359093

终端输出结果：

image-20180817155415513