搭建一个小型的koa后端开发环境

以免忘记，慢慢丰富

初始化准备

开始开发，依旧是常规的初始化

// 初始化文件夹
npm init

// 安装koa
npm i koa --save-dev

helloworld

还是先按照官方文档helloword一下，测试koa的正常使用。
基本的文档，可以看这里koa。

在根目录新建app.js文件，输入以下内容。

// 必修的 hello world 应用:

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

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);

输入命令运行

node app.js

则会在本地的3000端口生成一个内容为Hello World的页面。

这样，我们一个基本的服务就生成并且启动成功了。

正式搭建开发环境

使用路由塑造接口

有两种是很多人常用的，我最开始见到别人用的是koa-route，也用了，但是最近发现koa-router是被koa-route推荐的，也是用的人最多的，所以两种都尝试一下。

koa-route

安装封装好的koa-route模块

npm i koa-route --save-dev

更改app.js文件，这也是官方给的例子。

const Koa = require('koa');
const app = new Koa();
var _ = require('koa-route');

var db = {
  tobi: { name: 'tobi', species: 'ferret' },
  loki: { name: 'loki', species: 'ferret' },
  jane: { name: 'jane', species: 'ferret' }
};
var pets = {
  list: (ctx) => {
    var names = Object.keys(db);
    ctx.body = 'pets: ' + names.join(', ');
  },
 
  show: (ctx, name) => {
    var pet = db[name];
    if (!pet) return ctx.throw('cannot find that pet', 404);
    ctx.body = pet.name + ' is a ' + pet.species;
  }
};
app.use(_.get('/pets', pets.list));

app.listen(3000);
console.log('listening on port 3000');

至此一个简单的接口完成，我们可以通过浏览器访问到数据。

koa-router

来自koa-router的官方的例子。
修改app.js文件

var Koa = require('koa');
var app = new Koa();
var Router = require('koa-router');
var router = new Router();

router.get('/test', (ctx, next) => {
  ctx.body = 'Hello World!';
});

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

app.listen(3001);
console.log('listening on port 3001');

跨域

由于我模拟的是前后端分离的项目，即后端采用本地3001端口开启服务，前端采用8081访问页面，那么前端请求后端接口必定跨域，浏览器报错

因此我们修改设置 Access-Control-Allow-Origin:*，允许所有域名的脚本访问该资源。

app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  await next();
});

重启服务即可拿取数据。

管理数据库以及静态资源

作为一个后端框架，当然需要负责从数据库拿取各种数据以及管理存储的静态资源。

管理静态资源

对于静态资源的管理，我们使用koa-static。
熟悉的安装

npm install koa-static

新建static文件夹，随意存放一些图片，模拟资源文件。

此时，通过本地开启的服务端口是访问不到这些静态资源，我们需要在服务里针对目录进行配置。
在app.js里添加以下两行代码，即把当前文件（app.js）的目录设置为端口访问的根目录。

const serve = require('koa-static');

app.use(serve('.'));

此时，所有该目录下的所有文件都可以通过端口直接访问。
例如，我用浏览器直接访问http://localhost:3001/static/img/category.png，即可看到图片

除此之外，为了整合，我们新建service文件夹，存放处理拿取资源的逻辑，这样保持app.js的接口清晰明了。

写一个简单的拿取图片路径的逻辑

exports.get_test_data = ()=>{
    var content = 'static/img/category.png';
    return content;
};

然后在app.js引入service文件，并写一个获取图片的接口

var service = require('./service/webAppService.js');

router.get('/img', (ctx, next) => {
  ctx.body = service.get_test_data();
});

这就是一个简单的模拟逻辑，前端请求该端口即可拿取数据

nodemon热更新

开发中，我们当然需要在修改文件后，项目能够自动重启，方便调用，nodemon是一个比较常见的解决方式。
安装nodemon

npm install --save-dev nodemon

使用nodemon来代替node启动服务即可

nodemon app

有大佬写了很详细的教程koa框架教程-阮一峰