[JavaScript知识库]1. Koa2 基本使用

koa2的安装

1. 创建一个包 npm init -y
2. 安装 koa2 包 npm i koa
3. 创建 index.js 文件

index.js 文件

const Koa = require('koa')
const app = new Koa()
app.use( async ( ctx ) => {
  ctx.body = 'hello koa2'
})
app.listen(3000)
console.log('服务器启动了')

4. node index.js 启动服务器

代码分析：

• const Koa = require('koa')
  默认去找 koa 包的 index.js 文件，如果没有 index.js 文件，就要在 koa 的 package.json 中找入口文件了。
  koa 的 package.json 中 "main": "lib/application.js"，lib/application.js 就是主入口文件。
  lib/application.js 文件
  module.exports = class Application extends Emitter { ... } 导出了一个类，所以在使用 koa 的时候是 new
• app.use( async ( ctx ) => { ctx.body = 'hello koa2' })
  app.use() 是用来加载中间件(第三方的包)，app.use() 中可以写异步函数，也可以写同步函数，取决于业务，ctx.body = 'hello koa2'属于同步函数，在浏览器中直接能看到结果。

function getData(){
  var data
  setTimeout(() => {
    data = Math.random();
  },3000);
  return data;
}
app.use( async ( ctx ) => {
  ctx.body = getData() 
})

上述代码什么都打印不出来，只执行同步任务没有执行异步任务，data 是空的值，直接返回了。
解决方法：使用 async 和 await

function getData(){
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      var data = Math.random();
      resolve(data)
    },3000);
  })
}
app.use( async ( ctx ) => {
  ctx.body = await getData()
})

自定义中间件

1. 创建文件 log.js

function log(ctx) {
  console.log(ctx.method, ctx.header.host + ctx.url)
}
module.exports = function () {
  return async function (ctx, next) {
    log(ctx)
    await next()
  }
}

2. 在index.js 中使用 log 中间件

const logger = require('./log')
app.use(logger())

• app.listen(3000) 监听端口 3000

路由

1. 创建 views 文件夹存放页面：index.html、todo.html、404.html
2. 根据浏览器访问的地址，显示不同的页面

const Koa = require('koa')
const app = new Koa()
const fs = require('fs')

// 读文件函数
function render(path){
  let filename = "./views" + path + ".html"
  return new Promise((resolve,reject) => {
    fs.readFile(filename,'utf-8',function(err,data){
      if(err){
        reject(err)
      }else{
        resolve(data)
      }
    })
  })
}

// 使用中间件
app.use(async (ctx) => {
  let url = ctx.url
  let data
  switch (url) {
      case '/':
      case '/index':
        data = await render('/index')
      break;
      case '/todo':
        data = await render('/todo')
      break;
    default:
        data = await render('/404')
      break;
  }
  ctx.body = data
})

app.listen(3000)
console.log('服务器启动了')

上述的方式可以实现路由了，但是比较麻烦，koa-router 是一个好的解决方法。

• koa-router
  安装：npm i @koa/router
  引用：

const Koa = require('koa')
const Router = require('@koa/router')  // 导入

const app = new Koa()
const router = new Router()			   // new一个

router.get('/', (ctx, next) => {
  ctx.body = "hello"				 // 这下不用读文件了
})

app									// 固定写法，可参考npm官网
  .use(router.routes())
  .use(router.allowedMethods())
app.listen(3000)
console.log('服务器启动了')

• koa-router 处理客户端传来的参数。
  (1) ctx.querystring
  浏览器地址输入(get请求)：http://localhost:3000/?name=lisi&age=18

router.get('/', (ctx, next) => {
  console.log(ctx.querystring)
})

控制台返回："name=lisi&age=18" 字符串。

（2）ctx.query
浏览器地址输入(get请求)：http://localhost:3000/?name=lisi&age=18

router.get('/', (ctx, next) => {
  console.log(ctx.query)
})

控制台返回：{ name: 'lisi', age: '18' } 对象

（3）ctx.params
浏览器地址输入(get请求)：http://localhost:3000/lisi/18

router.get('/:name/:age', (ctx, next) => {
  console.log(ctx.params)
})

控制台返回：{ name: 'lisi', age: '18' } 对象

• 处理 post 请求 传过来的值

1. 安装koa2版本的koa-bodyparser@3中间件 npm install --save koa-bodyparser@3
2. 引用 koa-bodyparser@3

const bodyParser = require('koa-bodyparser')
// 使用ctx.body解析中间件
app.use(bodyParser())

3. 先展示一个提交表单的页面

router.get('/', (ctx) => {
  let html = `
  <h1>koa2 request post demo</h1>
  <form method="POST" action="/regist">    // 提交数据到 regist 页面
    <p>userName</p>
    <input name="userName" /><br/>
    <p>nickName</p>
    <input name="nickName" /><br/>
    <p>email</p>
    <input name="email" /><br/>
    <button type="submit">submit</button>
  </form>`
  ctx.body = html
})

服务器接收 post 请求传来的数据。

router.post('/regist',(ctx) => {
  console.log(ctx.request.body)
})

控制台打印信息：{ userName: '111', nickName: '222', email: '333' }

模板引擎

有页面的结构，同时也有页面中的数据。

1. 安装 koa-views 中间件：npm install koa-views
2. 安装 ejs：npm i ejs
3. 创建 views 文件夹，放置的都是模板文件。
4. views 文件夹中创建 index.ejs 文件

index.ejs 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1><%=title%></h1>		// 数据部分
  <p><%=message%></p>		// 数据部分
</body>
</html>

5. 引用 koa-views 和 ejs

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')   	// 导入 koa-views
const path = require('path')

// 加载模板引擎(固定写法)
app.use(
  views(path.join(__dirname,"./views"),{ //表示 ejs 文件所在的位置
    extension:"ejs"
  })
)

app.use(async (ctx) => {
  let title = "hello koa"				// 定义变量
  let message = "first use ejs"			// 定义变量
  await ctx.render("index",{			// 变量要传给 index.ejs
    title,								
    message
  })
})
app.listen(3000)
console.log('服务器启动了')

• 在 ejs 文件中引入一张图片
  不能直接使用绝对路径，使用 koa-static npm install koa-static
  引入：

const static = require('koa-static')
app.use(static(
  path.join(__dirname,'./public')   // public 文件夹专门存放静态资源
))

在 index.ejs 中 <img src="img/1.jpg">，可以直接找到 public 文件夹中的图片。

连接数据库

1. 打开 XAMPP，启动 mysql 服务
2. 打开 Navicat
   可以点击测试连接，看 Navicat 和 MySQL 的连接情况。
3. 新建数据库 sql，新建表 t_user，插入数据。
4. 下载 mysql 包：npm i mysql
5. 项目中使用 mysql 包

var mysql = require('mysql');
// 创建一个数据库的连接
var connection = mysql.createConnection({
  host     : 'localhost',	// 连接到本地
  user     : 'me',			// 用户名
  password : 'secret',		// 密码
  database : 'my_db'		// 要连接的数据库
});
// 开始连接
connection.connect();
// 查询数据库
connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
  if (error) throw error;
  console.log('The solution is: ', results[0].solution);
});
// 关闭连接
connection.end();

node index.js 执行这个文件，将数据库的数据查出来了。