本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

koa地址：koa.bootcss.com/#introducti…

koa介绍

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

开启服务

koa得使用非常简单，以下几个步骤

初始化文件
安装koa
引入koa
创建实例，然后再使用实例，同时监听3000端口。代码如下

初始化文件

npm init -y

tsconfig.json的配置如下

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "outDir": "./dist",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "resolveJsonModule": true,
    "typeRoots": [
      
    ]
  }
}

安装koa

npm install koa @types/koa typescript

引入并起服务

创建index.ts文件

import * as Koa from "koa"
const app = new Koa()

app.use(async (ctx, next) => {
  ctx.body = 'hello world'
})

app.listen(3000)

起ts的监听

tsc -w

同时使用supervisor运行命令

supervisor ./dist/index.js

访问http://localhost:3000/

成功运行！！！

静态资源管理

创建文件夹

创建static静态文件夹，存放图片、脚本、css等

安装依赖并使用

安装koa-static-cache

npm install koa-static-cache

引入koa-static-cache，并使用它

app.use(KoaStaticCache('./static',{
  gzip: true,
  prefix:'/public',
  dynamic: true,  
}))

prefix：要添加的 url 前缀
gzip: 当请求的接受编码包含 gzip 时，文件将被 gzip 压缩。
dynamic: 是否在初始化时缓存资产，默认为true

模板使用

选中了nunjucks，官网地址：nunjucks.bootcss.com/

使用方法

npm i nunjucks

文件中引入并使用

app.use(async (ctx,next)=>{
  ctx.template = new Nunjucks.Environment(
    new Nunjucks.FileSystemLoader(process.cwd()+'/views/'),{
      autoescape: false
    }
  );
  await next();
})

控制器的安装与使用

安装

npm i koa-controllers

使用

useControllers(
  app,
  __dirname + "/controllers/**/*.js",
  {
    multipart:{
      dest: process.cwd() + '/static/uploads/avatar',
    }
  }
)

访问页面

在之前，我们已经把所有的准备工作都做完了，现在我们可以创建我们的第一个接口，访问我们的页面了。

创建接口文件

import {Controller,Get,Ctx, Post } from 'koa-controllers';
import { Context } from 'koa';

@Controller
export class MianIndexController {

  @Get('/')
  public async index(@Ctx ctx:Context) {
    ctx.body = ctx.template.render('index.html')
  }
}

重新访问之前的路径

渲染模板

ctx.template.render后还可以跟数据，用来渲染模板例如

  @Get('/')
  public async index(@Ctx ctx:Context) {
    const list = [
      {id: 0, name: '我是koa的第一条模板数据'},
      {id: 1, name: '我是koa的第二条模板数据'},
      {id: 2, name: '我是koa的第三条模板数据'},
    ]
    ctx.body = ctx.template.render('index.html', { list: list, name: 'koa案例' });
  }

模板渲染的语法，可以直接查阅文档，for的语法如下

<h1>{{name}}</h1>
  <ul>
  {% for item in list %}
    <li>{{ item.name }}</li>
  {% endfor %}
</ul>

效果如下：

代理服务

代理的安装与使用

安装koa-server-http-proxy

npm i koa-server-http-proxy

使用方法如下

const proxyTable = {
  '/dev':{
    target:'http://xxxx.com',
    pathRewrite: { '^/dev': '' },
    changeOrigin: true
  }
}


Object.keys(proxyTable).forEach((context)=>{
  var options = proxyTable[context]
  app.use(proxy(context,options))
})

页面的使用

<script src="./public/js/jquery.min.js"></script>
<script>
(function(){
  let data = '参数'
  let url = 'dev/url'
  $('.btn').on('click',function(){
    $.ajax({
      method: 'POST',
      url:'dev/url',
      contentType: 'application/json',
      data: JSON.stringify(data)
    }).done(data=>{
      console.log(data)
    })
  })
})()
</script>

总结

之前学这个koa是为了做网站的服务端渲染，也有学后端语言的想法，但最后还有没有用这种方式。这里记录一下，方便以后回忆。

有不对的地方，还请多多指导，欢迎点赞，留言！！！

初学koa搭建项目